pillinetwork hesabınızla giriş yapın.

jQuery Nasıl Çalışır

jQuery'ye başlamak isteyen arkadaşlar için jQuery sitesinden bu adresteki dökümanı çevirdim. Herkese faydalı olma dileğiyle.

jQuery Temelleri

İsterseniz herp beraber bir web sayfası oluşturarak işe başlayalım. 

1
2
3
4
5
6
7
8
9
10
11
 
<html>

  <head>

    <script type="text/javascript" src="jquery.js"></script>



    <script type="text/javascript">

      

    </script>

  </head>

  <body>

    <a href="http://jquery.com/">jQuery</a>

  </body>


jquery.js dosyasını bu bağlantıdan indirebilirsiniz.

Sayfa Açıldığında Kodun Çalıştırılması

Klasik javascript programcıları sayfa açıldığında bir kodu çalıştırmak için aşağıdaki yöntemi uygularlar.

1
 
window.onload = function(){ alert("welcome"); }

Bu kullanımında tüm resimler indirilene kadar javascript kodu çalışmayacaktır. Kodun çalıştırılmasını sağlamak için önce sayfa yüklenmelidir.

jQuery basit bir şekilde dökümanı kontrol eder ve değişime hazır olana kadar bekler.

1
2
3
 
$(document).ready(function(){

   // Kodunuz burada

 });

Şimdi sayfamızda var olan bağlantının click olayına biraz kod ekleyelim. Bunu yaparken document.ready metodunu kullanacağız.
1
2
3
4
5
 
$(document).ready(function(){

   $("a").click(function(event){

     alert("Ziyaretiniz için teşekkürler");

   });

 });

Örneğin Tamamı

Biraz önce jQuery sitesinden jQuery.js dosyasını indirmiş ve kullanmıştık. İsterseniz bu dosyayı indirmeden Google Code platformundaki adresine link vererek dosyaya ulaşabilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE html>

 <html lang="en">

 <head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

   <script type="text/javascript">

     $(document).ready(function(){

       $("a").click(function(event){

         alert("As you can see, the link no longer took you to jquery.com");

         event.preventDefault();

       });

     });

     

   </script>

 </head>

 <body>

   <a href="http://jquery.com/">jQuery</a>

 </body>

CSS Sınıfı Ekleme Çıkarma

Bir diğer genel konu da nesnelere css sınıfı ekleme ve çıkarmadır.

İlk önce ediketimizin içine bir style ekleyelim.

1
2
3
 
<style type="text/css">

    a.test { font-weight: bold; }

 </style>

Şimdi bu css sınıfını nesnemize ekleyelim. Bu kodu script kısmı içindeki document.ready metodunun içine eklemeyi unutmayın.

1
 
$("a").addClass("test");

Aynı şekilde bir css sınıfını bir nesneden kaldırmak için de

1
 
$("a").removeClass("test");

kodunu kullanırız.

Özel Durumlar

Eğer bağlantıya tıklandığında sitenizin yönlendirme yapmasını engelliyorsanız jQuery'de bunun için de bir kaç efekt eklenmiştir.

1
2
3
4
 
$("a").click(function(event){

   event.preventDefault();

   $(this).hide("slow");

 });

Bu kodu çalıştırdığnızda a etiketinizin click olayında yapılacak olan varsayılan eylem durdurulacak ve bağlantı yavaş yavaş gözden kaybolacaktır.

GeriYükleme ve Fonksiyonlar

GeriYükleme bir fonksiyondan diğer bir fonksiyona argüman gönderir, ve ilk fonksiyon tamamlandıktan sonra çağrılan fonksiyon çalıştırılır.

Argümansız GeriYükleme (CallBack)

1
 
$.get('myhtmlpage.html', myCallBack);

Burada myCallBack Javascript fonksiyonunun ismidir.

Argümanlı GeriYükleme 

1
2
3
 
$.get('myhtmlpage.html', function(){

  myCallBack(param1, param2);

});

Genel Olarak Yapılan Hata

Genelde yapılan bir atadan burada bahsetmek iyi olur. Aşağıdaki kod çalışmayacaktır.

1
 
$.get('myhtmlpage.html', myCallBack(param1, param2));

Burada mantık hatası şudur : myCallBack fonksiyonu GeriYüklemeden önce çalıştırılacaktır.

jQuery hakkında giriş bilgisi vermeye çalıştım. Kaynağın orjinal haline bu adresten ulaşabilirsiniz.

/* Etiketler: , , , */
/* halislus yazdı. 01 Temmuz 2009 16:41. 4 yorum var */

Yorumlar

teşekkürler :)

/* queennothing | 11 Temmuz 2009 00:36 */

Şu parantezlerin durumu kafamı karıştırıyor. En basitinden, bir olayın parantezi bile kullanmaya alıştığımız {} gibi bir kod bloğu oluşturuyor. Sadeleştirmeye çalıştığımda şöyle bir şey çıkıyor:
http://pastebin.com/m2308a89a
Bu farkı ayırt etmek için ne önerirsiniz?

/* Kaza yerine ulaştınız, ilk ne yapmalısınız?Peki bununla beraber ilkyardımla nasıl hayat kurtarabileceğinizi biliyor musunuz? */
/* guldemgokalp | 16 Temmuz 2009 12:57 */

$( function(){
--(tab)--$("a").click(
--(tab)--function(){
--(tab)--|--(tab)--$(this).css("font-size", "16px");
)} });

şeklinde düzene sokabilirsin. Sürekli birbirini tetiklemesini istediğin eventlar varsa eğer addeventlistener kullanmalısın. Bu sayede birden çok fonksiyonu bu eventın ateşlenmesiyle beraber yaptırabilirsin.

/* / oguzozcan.com / */
/* centrual | 16 Temmuz 2009 13:08 */

haydi bakalım. aslında eburhan olsun, yakuter olsun ve şu an ismini zikredemeyeceğim nice arkadaşlar olsun, sağ olsunlar, bu konuda çok güzel yazılar yazdılar, şekiller çizdiler. onların yazılarına ortak olup, sorunsallarda dolaşmak fayda sağlayacaktır.

/* Kaza yerine ulaştınız, ilk ne yapmalısınız?Peki bununla beraber ilkyardımla nasıl hayat kurtarabileceğinizi biliyor musunuz? */
/* guldemgokalp | 16 Temmuz 2009 22:20 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork