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:
<script>
$(document).ready(function(){
// diğer fonksiyonları burada oluşturacağız.
});
</script>
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.
jquery yazım kuralları, document.ready nedir nasıl kullanılır, jquery fonksiyon oluşturma, creatin jquery functions, jquery fonksiyon örnekleri
KONU İLE İLGİLİ ÖRNEKLER
|
JQuery Seçici Örnekleri (Jquery Selector Examples)
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak örneğin kodlarını değiştirebilir ve sonucu görebilirsin.
JQuery Kısmı:
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("p").hide();
});
$("#b2").click(function(){
$(".yazi").hide();
});
$("#b3").click(function(){
$("#yazi").hide();
});
$("#b4").click(function(){
$(this).hide();
});
$("#b5").click(function(){
$("*").hide();
});
$("#b6").click(function(){
$("p:first").hide();
});
$("#b7").click(function(){
$("ul li:first").hide();
});
$("#b8").click(function(){
$("ul.listem li:first").hide();
});
$("#b9").click(function(){
$("ul li:first-child").hide();
});
$("#b10").click(function(){
$("li:even").hide();
});
$("#b11").click(function(){
$("li:odd").hide();
});
});
</script>
Html Kısmı:
<h3><a href="http://www.btDersleri.com">Tıkla ve Gizle</a></h3>
<p>Paragraf 1</p>
<p id="yazi">Paragraf 2</p>
<p class="yazi">Paragraf 3</p>
<p class="yazi">Paragraf 4</p>
<h3><a href="http://www.btDersleri.com">Liste 1</a></h3>
<ul>
<li>Ders1</li>
<li>Ders2</li>
<li>Ders3</li>
<li>Ders4<br/>
</li>
</ul>
<h3><a href="http://www.btDersleri.com">Liste 2 (class uygulanmış)</a></h3>
<ul class="listem">
<li>Ders1</li>
<li>Ders2</li>
<li>Ders3</li>
<li>Ders4<br/>
</li>
</ul>
<button id="b1">Tüm p etiketlerini gizle</button><br/>
<button id="b2">.yazi class'ı olan p etiketlerini gizle</button><br/>
<button id="b3">id'si yazi olan p etiketlerini gizle</button><br/>
<button id="b4">Beni gizle</button><br/>
<button id="b5">Her şeyi gizle</button><br/>
<button id="b6">İlk p etiketini gizle</button><br/>
<button id="b7">Sayfadaki ilk ul içindeki ilk li etiketini gizle</button><br/>
<button id="b8">.listem classı olan ul içindeki ilk li etiketini gizle</button><br/>
<button id="b9">Tüm ul etiketleri içindeki ilk li etiketini gizle</button><br/>
<button id="b10">Tek sıra nolu li etiketlerini gizle</button><br/>
<button id="b11">Çift sıra nolu li etiketlerini gizle</button>
11602 kez okundu.