Bütün jquery seçicileri $() şeklinde tanımlanır. Seçicilerin basit kullanımlarını örneklerle açıklayacağım.
Sayfada örnek olarak verilen HTML etiketlerini kullanarak işlemleri seçme işlemlerini gerçekleştireceğiz.
Tüm örneklerde kullanacağımız HTML etiketi aşağıdadir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<ul id="dikey-menu"> <li><a href="#" class="aktif">Ana Sayfa</a></li> <li><a href="#">Galeri</a></li> <li><a href="#">Hakkımızda</a></li> <li><a href="#">İletişim</a></li> </ul> <a href="#">Dışarıda bir link</a> <form> <input type="text" id="ad" name="ad" /> <input type="text" id="soyad" name="soyad" /> <input type="mail" id="mailadres" name="mailadres" /> <input type="button" id="kaydet" name="kaydet" value="KAYDET" /> </form> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script> //Jquery kodlarını bu kısıma yazacağız. </script> |
Basit Seçiciler
Etiket (tag) adı ile seçmek.
$(“div”) sayfadaki tüm div etiketlerini seçer.
$(“p”) sayfadaki tüm p etiketlerini seçer.
|
1 2 3 |
$("a").css({color:"red"}); //sayfadaki bütün a etiketlerini kırmızı yapar. |
Class adı ile seçmek. Css’de olduğu gibi .classAdi şeklide istediğimiz etiketleri seçmemiz mümkün.
$(“.ogrenci”) class ismi öğrenci olan etiketleri seçer.
$(“.aktif”) class ismi aktif olan etiketleri seçer.
|
1 2 3 |
$(".aktif" ).css( "border", "3px solid red" ); |
Id adı ile seçmek. Css’de olduğu gibi #id adı ile istediğimiz etiketi seçmemiz mümkün.
$(“#logo”) id adı logo olan etiketi seçer.
$(“dikey-menu”) id adı dikey-menu olan etiketi seçer.
Birden çok etiketi tek bir seçici ile seçmek mümkün. Birden fazla seçme işlemi yapılacak etiketler ,(virgül) karakteri ile tek seçici içine eklenebilir.
$(“#logo,a,p”) id adı logo , a etiketi ve p etiketlerini seçilmektedir.
$(“h1,h2,h3”) h1,h2 ve h3 etiketlerini seçmektedir.
Hiyerarşi Seçiciler
Css yapısındaki gibi alt alta etiket gruplarını seçebiliriz.
Yukarıdaki HTML örneğini kullanarak. Aşağıdaki seçme işlemlerini gerçekleştirebiliriz.
ul etiketi içindeki li etiketlerini seç:(torun seçme yöntemi)
|
1 2 3 |
$( "ul li" ).css( "border", "3px solid red" ); |
li etiketinin ilk altındaki a etiketi etiketlerini seç:(çocuk seçme yöntemi)
|
1 2 3 |
$( "li > a" ).css( "border", "3px solid red" ); |
Attribute seçiciler
Css attribute seçme yönteminin aynısını jquery ile de kullanabiliriz.
|
1 2 3 |
$("input[type='text']").css( "background", "#25aaac" );//text kutularının arkaplanını değiştirir. |
Çocuk Seçiciler(Child Selector)
Bir html yapısı içinde bazen bir etiketi, bazende belirli bir sırada etiketi seçmek isteriz. Cssde olduğu gibi sözde sınıf (pseude class) seçme yöntemiyle html etiketlerini seçebiliriz.
Aynı etiket grubu içindeki ilk etiketi seçer.
ilk li etiketini seçme:
|
1 2 3 |
$("li:first-child").css( "background", "#25aaac" ); |
yada
|
1 2 3 |
$("ul li:first-child").css( "background", "#25aaac" ); |
Aynı şekilde son çocuğu seçmekte mümlün.
|
1 2 3 |
$("li:last-child").css( "background", "#25aaac" ); |
yada
|
1 2 3 |
$("ul li:last-child").css( "background", "#25aaac" ); |
Nth-Child ile belirli bir düzene göre de seçim yapmak mümkün.
Örn: 2. li etiketi seçmek için
|
1 2 3 |
$("ul li:nth-child(2)").css( "background", "#25aaac" ); |
Örn:3.li etiketi içindeki a etiketini seçmek için
|
1 2 3 |
$("ul li:nth-child(2) a").css( "background", "red" ); |
çift olan li etiketleri seçmek için.
|
1 2 3 |
$("ul li:nth-child(2n)").css( "background", "red" ); |
İçerik filitreleyerek seçim yapma;
İçerisindeki geçen kelimelere göre filtrelemek için. Bazen içersindeki kelimelerin altını çizme yada içindeki geçen gelimeye göre etiket ile işlem yapmak isteyebiliriz. Jqueryde bunun için yazılmış bir seçici var.Etiket adından sonra : ile contains bildiriminin içine aranacak ifade yazılır.
İçinde Galeri geçen a etiketlerini seçer:
|
1 2 3 |
$( "a:contains('Galeri')" ).css( "color", "red" ); |
