1. BASİT SEÇİCİLER
Web sayfalarında kullanılan nesneler id, class ve bir etiket ismine sahip olabilir. jQuery de nesneleri seçmek için bu özellikleri kullanabiliriz.
1.1. Etiket seçiciler
Web sayfaları HTML etiketlerinden oluşur. <div>, <a>, <p>, <img>, <span> vb. Etiket seçicileri kullanarak aynı anda sayfadaki etiketlerin hespine aynı işlemi uygulayabiliriz.
$('etiket')
// $('p'), $('div'), $('span')
$('p').css('color','red');
// sayfadaki bütün p etiketli nesnelerin yazı rengini kırmızı yapıyoruz.
1.2. Sınıf(Class) seçiciler
Html nesnelerimize bir sınıf ataması yapabiliriz. Bu sınıf isimlerini elementlere stil verirken kullanabileceğimiz gibi o sınıf ismine sahip nesneleri jQuery ile seçmek için de kullanabiliriz.
$('.sinif_ismi')
// $('.paragraf')
$('.araba').css('color','blue');
// sayfadaki araba sınıfına sahip bütün nesnelerin yazı rengini mavi yapıyoruz.
1.3. ID seçiciler
Nesnelerimize diğer nesnelerden ayrılması için bir id niteliği verebiliriz. Bu id değeri sadece tek bir nesne için kullanılabilir.
$('#id_degeri')
// $('#ilk_div')
$('#ilk_div').css('background-color','green');
// id değerine ilk_div ismini verdiğimiz nesnenin arka plan rengini yeşil yapıyoruz.
Genel Uygulama
2. HİYERARŞİK SEÇİCİLER
HTML elemanlar, belli bir hiyerarşi ile sıralanır ve biz bu hiyerarşiye göre jQuery de seçme işlemi yapabiliriz. Aşağıdaki HTML kod bloğu bir hiyerarşiyi göstermektedir. Bu örneği aşağıdaki örnekler için kullandığımıza dikkat edelim.
<body>
<p id="bir_paragraf">Birinci paragraf</p>
<p id="iki_paragraf">İkinci paragraf</p>
<div>
<p id="uc_paragraf">Üçüncü paragraf</p>
<ul>
<li id="bir_li">Elma</li>
<li id="iki_li">Üzüm</li>
<li id="uc_li">Mandalina</li>
<li id="dort_li">Karpuz</li>
</ul>
</div>
<p id="dort_paragraf">Dördüncü paragraf</p>
<span>Birinci span</span>
<body>
- 3 tane
<p>, 1 tane<div>ve 1 tane<span>etiketi aynı seviyededir ve bunlar<body>etiketinin çocuklarıdır. <ul>ve<li>etiketleri<body>etiketinin torunudur.<p id="uc_paragraf">etiketi<body>etiketinin torunudur.<p id="uc_paragraf">etiketi<div>etiketinin çocuğudur.<p id="uc_paragraf">etiketi<ul>etiketleri birbirlerinin kardeşleridir.<ul>etiketi<div>etiketinin çocuğudur.<li>etiketleri ise<div>etiketinin torunudur.
2.1. Ebeveyn torun seçiciler (A B)
Bir A nesnesi içinde olan B çocuk ve torun nesnelerini seçer.
$('A B')
$('div li').css('color','red');
// div nesnesinin içindeki bütün li elemanlarını seçer ve yazı rengini kırmızı yapar.
2.2. Ebeveyn > çocuk seçiciler (A>B)
Birinci etiketin(A) içinde olan çocuk seviyesindeki B elemanlarını seçer.
$('A>B')
$('body>p').css('color','blue');
// body etiketinin çocukları olan aşağıdaki etiketlerin yazı rengini mavi yapar.
// <p id="bir_paragraf">Birinci paragraf</p>
// <p id="iki_paragraf">İkinci paragraf</p>
// <p id="dort_paragraf">Dördüncü paragraf</p>
2.3. Element + next seçiciler (A+B)
Bir A nesnesinden hemen sonra gelen ve aynı seviyede olan B nesnesini seçer. A nesnesinden sonra birden fazla B nesnesi olsa bile sadece ilkini seçer. Eğer B nesnesi A nesnesinden hemen sonra gelmiyorsa işlem yapılmaz.
$('A+B')
$('div+p').css('color','red');
// Dördüncü paragraf yazısı kırmızı renkli olur.
$('div+span').css('color','blue');
// div den hemen sonra span nesnesi gelmediği için bu komut bir iş yapmaz.
2.4. Element ~ kardeş seçiciler (A~B)
Bir A nesnesinden sonra gelen ve aynı seviyede olan bütün B nesnelerini seçer. A nesnesinden önce gelen B nesnelerini seçmez.
$('A~B')
$('li#iki_li~li').css('color','green');
// iki_li id değerli li nesnesinden(Üzüm) sonra gelen ve aynı seviyede olan
// li elemanlarının yazı rengini yeşil yapıyoruz. (Mandalina, Karpuz)
$('p#bir_paragraf~p').css('color','orange');
// bir_paragraf id değerli p nesnesinden sonra gelen ve aynı seviyede olan
// p elemanlarının yazı rengini turuncu yapıyoruz.
// (İkinci paragraf, Dördüncü paragraf)
Genel Uygulama
3. ÖZNİTELİK (ATTRIBUTE) SEÇİCİLER
Her elementin içinde bazı özellikler bulunur. width, height, name, id, value, src, alt ... gibi. Bu değerler üzerinden HTML elemanlarını seçme işlemi yapabiliriz. Aşağıdaki tablodaki örnekler için şu HTML bluğunu kullanacağım.
<img id="img1" alt="resim1" src="images/resim1.jpg">
<img id="img2" alt="resim2" src="images/resim2.jpg">
<img id="img3" alt="resim3" src="images/resim3.png">
| İşlem | Örnek | Açıklama |
| [attribute] | $('[src]') | src özniteliğine sahip bütün nesneleri seçer. |
| [attribute=value] | $('img[alt="resim1"]') | alt özniteliği "resim1" e eşit olan img etiketlerini seçer. |
| [attribute!=value] | $('img[alt!="resim1"]') | alt özniteliği "resim1" e eşit olmayan img etiketlerini seçer. |
| [attribute^=value] | $('img[src^="images/"]') | src özniteliği "images/" değeriyle başlayan img etiketlerini seçer. |
| [attribute$=value] | $('img[src$=".jpg"]') | src özniteliği ".jpg" değeriyle biten img etiketlerini seçer. |
| [attribute*=value] | $('img[id*="img"]') | id özniteliği içerisinde "img" değeri geçen img etiketlerini seçer. |
Genel Uygulama
4. FORM SEÇİCİLER
Form elemanlarını direk seçebilmek için kullanabileceğimiz seçicilerdir.
| Metod | Açıklama |
| $(':input') | Bütün input elemanlarını seçer. |
| $(':text') | text tipindeki bütün input elemanlarını seçer. |
| $(':password') | password tipindeki bütün input elemanlarını seçer. |
| $(':radio') | radio tipindeki bütün input elemanlarını seçer. |
| $(':checkbox') | checkbox tipindeki bütün input elemanlarını seçer. |
| $(':submit') | submit tipindeki bütün input elemanlarını seçer. |
| $(':reset') | reset tipindeki bütün input elemanlarını seçer. |
| $(':button') | button tipindeki bütün input elemanlarını seçer. |
| $(':image') | image tipindeki bütün input elemanlarını seçer. |
| $(':file') | file tipindeki bütün input elemanlarını seçer. |
| $(':enabled') | enabled özelliği olan bütün input elemanlarını seçer. |
| $(':disabled') | disabled özelliği olan bütün input elemanlarını seçer. |
| $(':selected') | selected özelliği olan bütün input elemanlarını seçer. |
| $(':checked') | checked özelliği olan bütün input elemanlarını seçer. |
Genel Uygulama
