Bu bölümde jQuery seçicilerinin nasıl çalıştığını anlatmaya çalışacağım. Başlamadan önce size birkaç ipucu vermek istiyorum. Verdiğim örneklerin kaynak kodlarına bakmadan önce kendi başınıza bu kodları yazmaya çalışmanız sizin için daha yararlı olacaktır. Şimdi yavaş yavaş anlatıma geçebiliriz.
jQuery’de sayfadaki elemanlara ulaşmak, javascripten farklı olarak daha karmaşık fakat daha güçlüdür. jQuery sayesinde, daha az kod yazarak daha fazla elemana ulaşıp, onlar üzerinde istediğimiz değişiklikleri daha rahat yaparız. Bu durum bize büyük avantaj sağlar. Size basit bir örnek vererek yazıma devam etmek istiyorum;
$("a")
Gördüğünüz gibi, jQuery’de herhangi bir seçim işlemi yaparken $(“seçilen_öğe_adı”) veya jquery(“seçilen_öğe_adı“) şeklinde bir tanımlama yaparız. Genelde uzun yazım biçimi pek kullanılmaz. Bizde bundan sonraki örneklerimizde, html elemanlarını seçmek için $(“seçilen_öğe_adı”) fonskiyonunu kullanacağız. Yukarıdaki örnekte sayfanın içindeki tüm <a> tagı ile başlayan tüm elemanları jQuery nesnesi olarak geri döner.
Konuyu daha iyi kavramak için aşağıdaki örnek üzerinden gitmemizde fayda var;
Soru 1 : Sayfamızın içindeki paragrafların tümünü seçen kodu yazmaya çalışınız.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function Getir(){
var paragrafSayisi = $("p").length;
alert("Sayfadaki paragraf sayisi: " + paragrafSayisi);
}
</script>
</head>
<body>
<p>1. paragraf</p>
<p>2. paragraf</p>
<p>3. paragraf</p>
<p>4. paragraf</p>
<input type="button" value="Getir" onClick="Getir();">
</body>
</html>
Önce sayfamızın <body></body> taglari arasına paragraflarımızı yerleştirdik ve bunların sayısını öğrenmek için, tıkladığımız da Getir() adlı fonksiyonunu çalıştıracak bir buton yerleştirdik. Fonksiyon çalıştığında paragrafSayisi adlı değişkene $(“a”).length adlı jquery nesnemizi atadık. Butona basıldığında paragraf sayısı alert() fonksiyonu ile ekrana yazdırılacaktır. Ekran çıktısı aşağıdaki gibidir:
Çalışmayı buradan indirebilirsiniz. jQuery - Seçiciler - Örnek 1
Soru 2 : Sayfamızda bulunun <p> etiketlerinin yalnızca id’si 1’e eşit olanların sayısını veren kodu yazın.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function Getir(){
var paragrafSayisi = $("p#1").length;
alert("Sayfadaki paragraf sayisi: " + paragrafSayisi);
}
</script>
</head>
<body>
<p id="1">1. paragraf</p>
<p>2. paragraf</p>
<p>3. paragraf</p>
<p>4. paragraf</p>
<input type="button" value="Getir" onClick="Getir();">
</body>
</html>
Ekran çıktısı aşağıdaki gibi olacaktır:
Id’si 1 olan elemanı seçmek için $(“p”) yerine $(“p#1″) yazmak yeterli oldu. Aşağıdaki tabloda bu seçicilerin nasıl kullanılması gerektiğini gösteren tanımları ve örnekleri görebilirsiniz. Şimdi onlara biraz göz atalım:
| Kullanım | Açıklama |
| $(“*”) | Bütün elemanları seçer. |
| $(“p”) | Bütün paragrafları seçer. |
| $(“p a”) | Bütün paragrafların içindeki a taglarını seçer. |
| $(“p#1”) | Id’si 1 olan paragrafları seçer. |
| $(“p#1 a#1”) | Id’si 1 olan paragrafların altındaki id’si 1 olan a taglarını seçer. |
| $(“p a[name=’deneme’]”) | Tüm paragrafların altındaki, adı deneme olan a taglarını seçer. |
| $(“div p”) | Sayfada ki tüm div nesnelerinin altında bulunan bütün paragrafları seçer. |
| $(“div#1 p”) | Sayfada id’si 1 olan div nesnelerinin altında bulunan bütün paragrafları seçer. |
| $(“#deneme”) | Id değeri deneme olan bütün nesneleri seçer. |
| $(“.giris”) | sınıfı giris olan nesneleri seçer. |
| $(“p.deneme”) | Sayfadaki, sınıfı deneme olan tüm paragrafları seçer. |
| $(“#deneme[align]“) | Id değeri deneme olan ve align degerine sahip olan nesneyi seçer. |
| $(“a[name=’deneme’]“) | İsmi deneme olan linkleri seçer. |
| $(“input[name^=’deneme’]“) | İsmi deneme ile başlayan tüm input nesnelerini seçer. |
| $(“.deneme[name$=’footer’]“) | Sınıfı deneme olan ve ismi footer ile biten nesneleri seçer. |
| $(“a[id!=’deneme’] p“) | Id değerinde deneme olmayan a taglarının altındaki paragrafları seçer. |
| $(“a[id*=’deneme’]“) | Id değerinde deneme geçen linki seçer. |
Buraya kadar seçicilerin nasıl kullanıldığını gördük. Sonraki yazımızda daha farklı ve kompleks örnekler üzerinde yoğunlaşacağız. Görüşmek üzere.
