jQuery Seçiciler(Selectors)

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 🙂
 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir