Merhaba arkadaşlar uzun bir aradan sonra jQuery derslerine devam ediyoruz. Bu dersmizinde jQuery’deki seçicilere değineceğiz.
jQuery Seçicileri
jQuery’deki seçiciler bizde html etiketlerini seçmemize olanak sağlar.
Seçiciler html etiketlerindeki kimlik,veri,stil özelliklerini ve ek olarak kedni eklediği özellikleri seçmemize yarar.
jQuery’deki seçiciler $() işareti arasına yazılır.
HTML Etiketi Seçici
Html etiketini seçmek için aşağıdaki kodu yazıyoruz.
$("p")
Yukarıdaki kodda p etiketini seçtik.
Örnek;
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Yukarıdaki kodda button etiketine tıklandığında ($(“button”).click(function()) p etiketinin gizlenmesini ($(“p”).hide();) istedik. $(document).ready(function(){ bu kodun arsına almamızın sebebi sayfa tam yüklenince içine aldığımız kodların çalışmasıydı.
#İd Seçicileri
İd seçicileri ise HTML etiketine belirtiğimiz id özniteliğini bulmamasını sağlar.
Not: HTML etiketlerine eklediğimiz id öznitelikleri bir kimlikmiş gibi her bir HTML etiketi için farklı olarak eklenmelidir. Örnek verecek olursak bir HTML etiketine “yazi” adında id özniteliği vermişsek başka bir HTML etiketine “yazi” adında id özniteliği veremeyiz.
Örnek;
$(document).ready(function(){
$("button").click(function(){
$("#yazi").hide();
});
});
Yukarıdaki örneğimizde butona tıklandığında ($(“button”).click(function()) id özelliği “yazi” olan HTML etiketinin gizlenmesini ( $(“#yazi”).hide()) istedik.
Sınıf (Class) Seçicileri
Sınıf seçicileri jQuery’de belirli sınıf özelliklerine sahip HTML etiketlerini bulmaya yarar.
$(".deneme")
Yukarıdaki kodda class özelliği deneme olan HTML etiketlerini seçmesini istedik.
Örnek;
$(document).ready(function(){
$("button").click(function(){
$(".deneme").hide();
});
});
Örneğimizde bu sefer butona tıklandığında ($(“button”).click(function()) sınıfı (class’ı) deneme olan HTML etiketinin gizlenmesini ($(“.deneme”).hide();) istedik.
Tüm jQuery Seçicileri
| Seçici | Açıklama |
| $(“*”) | Tüm HTML etiketlerini seçer. |
| $(this) | Geçerli HTML etiketini seçer. |
| $(“p.yazi”) | <p> etiketleri arasında sınıfı yazi olanları seçer. |
| $(“p:first”) | İlk <p> etiketini seçer. |
| $(“ul li:first”) | <ul> etiketleri içindeki ilk <li> etiketini seçer. |
| $(“ul li:first-child”) | <ul> etiketleri içindeki <li> etiketilerinin ilk öğesini seçer. |
| $(“[href]”) | Href özniteliğine sahip tüm HTML etiketlerini seçer. |
| $(“a[target=’_blank’]”) | Target özniteliği “_blank” olan tüm HTML etiketlerini seçer. |
| $(“a[target!=’_blank’]”) | Target özniteliği “_blank” olmayan tüm HTML etiketlerini seçer. |
| $(“:button”) | İnputlardaki “type” özniteliğinin değeri “button” olan tüm HTML etiketlerini seçer. |
| $(“tr:even”) | Tüm <tr> etiketlerinden even özelliğine sahip etiketleri seçer. |
| $(“tr:odd”) | Tüm <tr> etiketlerinden odd özelliğine sahip etiketleri seçer. |
Dersimizin sonuna geldik arkadaşlar bir başka derslerde görüşmek üzere. Kendinize iyi bakın, takildiğınız yer olursa yorum olarak sorabilirsiniz.