Merhabalar, bu yazımda sizlere jQuery de kullanılan seçiciler(selectors) den bahsedeceğim.
jQuery’de 4 tip seçici vardır. Bunlar, Tag(Etiket) Seçicileri, Class Seçicileri, ID Seçicileri ve Hiyerarşik Seçiciler dir.
1) Tag(Etiket) Seçicileri
HTML etiketlerini kullanarak seçim yapabilmemizi sağlayan seçicidir.
* Örnek 1,
$("p").css("color", "red");
//Seçimin JavaScript karşılığı, document.getElementsByTagName("p")
Bu kod sayfada bulunan bütün p etiketlerinin yazı rengini kırmızı yapar.
* Örnek 2,
$("img, a").hide();
Bu kod sayfada bulunan tüm img ve a etiketlerini gizler.
2) Class Seçicileri
$(".bg-class").css("background-color", "yellow");
//Seçimin JavaScript karşılığı, document.getElementsByClassName("bg-class")
Bu kod “bg-class” içeren elementlerin arka plan rengini sarı yapar.
3) ID Seçicileri
$("#Soyad").css("font-weight","bold");
//Seçimin JavaScript karşılığı, document.getELementById("Soyad")
Bu kod id‘si “Soyad” olan elementlerin yazısını kalın yapar.
4) Hiyerarşik Seçiciler
* (“parent > child”) Bu kod ul etiketi içerisindeki bütün li etiketlerini seçer.
$("ul > li")
* (“prev + next”) div etiketi ile aynı seviyede (komşu) olan ilk span etiketini seçecektir.
$('div + span')
* (“prev ~ siblings”) div etiketi ile aynı seviyede (komşu) olan tüm span etiketlerini seçecektir.
$('div ~ span')
* (“div span”) div etiketinin alt seviyesindeki (torunu) span etiketini seçecektir.
$("div span")
jQuery de kullanılan seçicileri çok basit haliyle anlatmaya çalıştım, umarım fikir vermesi açısından sizlere yardımcı olabilmişimdir. Sorularınızı ya da görüşlerinizi yorumlar bölümüne yazabilirsiniz 🙂