JQuery Yazım Kuralları

JQuery kütüphanesini kullanacağımız tüm sayfalara bağladıktan sonra artık JQuery metotlarını kullanabiliriz. İlk yapmamız gereken şey sayfamızın head kısmında script etiketleri arasına document.ready olayını tanımlamaktır. Ardından bu fonksiyon içerisinde diğer olaylar ve bunlara bağlanacak fonksiyonlar tanımlanır.

Document.ready olayı nedir?

Document.ready olayının kullanılmasının en büyük faydası, yazacağımız JQuery kodlarının sayfa tamamen yüklenmeden çalışmasını engellemektir. Sayfadaki bir eleman tam olarak yüklenmeden, o eleman için bir JQuery kodu çalışmaya kalkarsa hataya sebep olacaktır. Document.ready olayı şu şekilde yazılır:

$(document).ready(function(){
   // diğer fonksiyonları burada oluşturacağız.
});

JQuery Fonksiyon Kullanımı

JQuery de JavaScript ve diğer olay yönlendirmeli diller gibi, bir olay gerçekleştiğinde çalışacak metot veya fonksiyonlar belirtilerek kullanılır. Aşağıdaki örnekte de olduğu gibi $ işaretinden sonra olayı gerçekleştirecek html elemanı/elemanları belirtilir. Olayı tetikleyecek bu elemanlara seçici (selector) denir. Ardından hangi olay gerçekleştiğinde o fonksiyon çalışacaksa o olayın (event) adı yazılır. Süslü parantezler arasında da belirtilen olay gerçekleştiğinde yapılacak işlemler yazılır. Örnek:

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

Yukarıdaki örnekte button türündeki html elemanlarına tıklandığında çalışacak bir fonksiyon oluşturulmuştur. Fonksiyon içinde ise p etiketleri için hide metodunun çalıştırılması, bu sayede tüm p etiketlerinin gizlenmesi sağlanmıştır. Yukarıdaki örnekte seçici (selector) olarak button etiketi kullanılmıştır. Bu yüzden sayfada kaç tane button elemanı varsa hepsine tıklandığında bu fonksiyon çalışacaktır. Seçici olarak etiket adı yerine, id, class veya başka ifadeler de kullanılabilir. Aşağıda bazı örnekler verilmiş ve açıklanmıştır. Çalışan halleri örnekler kısmında görülebilir. Örneklerin hepsinde hide metodu kullanılmıştır. Amaç seçicileri anlamaktır.

$("p").hide(); //tüm p etiketleri için çalışır

$(".yazi").hide(); //.yazi class’ı uygulanmış tüm etiketler için çalışır

$("#yazi").hide(); //id’si yazi olan etiket için çalışır

$(this).hide(); //olayı tetikleyen elemanın kendisi için çalışır.

$("*").hide(); //sayfadaki tüm etiketler için çalışır

$("p:first").hide(); //sayfadaki ilk p etiketi için çalışır

$("ul li:first").hide(); //sayfadaki ilk ul etiketi içindeki ilk li etiketi için çalışır

$("ul.listem li:first").hide(); //sayfada .listem class’ı uygulanmış ul etiketleri içindeki ilk li etiketi için çalışır

$("ul li:first-child").hide(); //sayfadaki tüm ul etiketlerinin ilk li etiketleri için çalışır

$("li:even").hide(); //sayfadaki tüm tek sıra numaralı li etiketleri için çalışır

$("li:odd").hide(); //sayfadaki tüm çift sıra numaralı li etiketleri için çalışır

Not: Birden fazla tetikleyici aynı işlemleri gerçekleştirecek ise, hepsi için tek tek fonksiyon yazmaya gerek yoktur. Seçici kısmına aralarına virgül konarak birden fazla seçici adı yazılabilir. Örneğin üç farklı buton aynı işlemleri gerçekleştirecek ise;

$("#button1, #button2, #button3").click(function(){
...
}

şeklinde aynı fonksiyon-metot için birden fazla seçici kullanılabilir. Harici JavaScript Dosyası Kullanma Kod karmaşasını azaltmak için kendi yazdığımız bu JQuery kodlarını, harici bir JavaScript dosyasında saklayıp şu şekilde bağlantı yapabiliriz.

< script src="jqKodlarim.js" >< /script >

Harici JavaScript dosyası kullanmanın bir avantajı da farklı sayfalarda aynı işler yapılacak ise hepsine aynı kodları yazmaktan kurtulacak olmamızdır. Kodları kullanacağımız sayfalarda JavaScript dosyamıza bağlantı yapmak yeterli olacaktır.