Jquery seçiciler (jquery selector) kullanımı

Jquery öğrenmeye başlayan bir kişinin ilk olarak seçicileri öğrenmesini gerekir diye düşünüyorum.  Seçicileri iyi öğrenmeden DOM öğelerine erişmek, manipüle etmek, dinamik işlemler gerçekleştirmek, olaylar vermek, değiştirmek gibi işlemleri yapması mümkün olmaz. Bu yüzden Jquery için seçicilerin en önemli konu olduğunu söyleyebilirim.

Seçicileri 4 ana grupta toplayabiliriz.

1) Basit seçiciler
2) Hiyerarşik seçiciler
3) Filtreli seçiciler
4) Form seçiciler

1) Basit seçiciler

Basit seçiciler elemanları filtresiz direk seçmek için kullanılan seçicilerdir. Aşağıdaki örneklere inceleyelim:

1. $('div') - tüm div etiketlerini seçer.

2. $("#content") - id özniteliği content olan elemeti seçer. Bu bir katman ya da başka bir eleman da olabilir.

3. $(".uzmanim") - class özniteliği uzmanim olan tüm elemanları seçer.

4. $("div.ornek") - class özniteliği ornek olan tüm div etiketlerini seçer.

5. $("div.ornek.baslik") - class özniteliği ornek ve baslik olan tüm div etiketlerini seçer.

6. $("img , p ") - tüm img ve p etiketlerini seçer.

7. $("*") - tüm elemanları seçer.

2) Hiyerarşik seçiciler

Alt elemanları olan elamanlanları seçerken kullanılan seçicilerdir. Aşağıdaki örneklere inceleyelim:

1. $("#content div") - id özniteliği content olan elementin içindeki tüm div etiketelerini seçer.

<div id="content">
<div> bu div elemanı seçilir </div>
</div>
<div> bu div elemanı seçilmez </div>

2. $("#content div span ") - id özniteliği main olan elemanın içindeki div elamanların içindeki span etiketlerini seçer. ( soldan sağa doğru hiyerarşik bir yapıda )

<div id="content">
<div> <span> bu span elemanı seçilir </span> </div>
<div> <span> bu span elemanı seçilir </span> </div>
<div> <img> </div>
</div>
<div> <span> bu span elemanı seçilmez </span> </div>
<span> bu span elemanı seçilmez </span>

3. $("#content > div") - id özniteliği 'content' olan elementin içindeki 1. dereceden yakını olan div etiketlerini seçer. ( seçtiği div etiketin içindeki div etiketlerini seçmez. )

<div id="content">
<div> bu div elemanı seçilir </div>
<div> bu div elemanı seçilir </div>
<div> bu div elemanı seçilir
<div> bu div elemanı seçilmez</div>
</div>
bu div elemanı seçilmez
</div>

4. $("p + span") - div elamanından sonra gelen ilk span elamanını seçer. (birden fazla olsa dahi ilk olanı seçer.)

<span> bu span etiketi seçilmez </span>
<p> bir katman
<p id="uzmanim">katman içinde katman</p>
</p>
<span>bu span elemanı seçilir</span>
<span>bu span elemanı seçilmez</span>
<p>
<span >bu span elemanı seçilmez <span>
</p>

5. $("div ~ span") - div elemanından sonra gelen tüm span elemanlarını seçer. ( seçtiği div etikentin içindeki başka div etiketlerini seçmez. )

<span>bu span elemanı seçilmez </span>
<div> bir katman
<div id="uzmanim">katman içinde katman</div>
</div>
<span> bu span elemanı seçilir</span>
<span> bu span elemanı seçilir</span>
<div>
<span >bu span elemanı seçilmez<span>
</div>
<span > bu span elemanı seçilir<span>

3) Filtreli Seçiciler

Basit ya da hiyerarşik seçicileri kullanarak seçilen elemanları filtrelemek için kullanılır. Jquery seçilen elemanları indexler. Bu sayede index numaralarına göre filtreleme yapabiliriz.

Filtrelerin isimlerini ve işlevlerini inceleyelim:

• :first - 0 numaralı indexe sahip elamanı seçer.
• örnek : $('div:first')
• :last - Son numaralı indekse sahip elemanı seçer.
• örnek : $('div:last')
• :not(selector) - Eşleşen özelliklere sahip elemanları eler.
• örnek : $("div :not (.ornek)" )
• :even - Çift numaralı indekse sahip elemanları seçer.
• örnek : $('ul li :even')
• :odd - Tek numaralı indexe sahip elemanları seçer.
• örnek : $('ul li :odd')
• :eq(index) - Verilen indekse sahip elemanları seçer.
• örnek : $('ul li : eq(3)')
• :gt(index) - Verilen indeksten daha büyük indekse sahip olan elemanları seçer.
• örnek : $('ul li : gt(3)')
• :lt(index) - Girilen indeksten daha küçük indekse sahip elemanları seçer.
• örnek : $('ul li : lt(3)')
• :header - <h2>,<h3>... header etiketleri seçer.
• :animated - O andaki animasyonlu elemanları seçer.
• örnek : $(' div: animated')
• :nth-child(index/even/odd/equation) - Girilen seçiciye alt kümedeki elemanları seçer.
• Jquery ve Seçiciler örnek : $(' ul li: nth-child(even)')
• :first-child - Bulunduğu alt kümenin ilk elamanını seçer.
• örnek : $(' ul li: first-child')
• :last-child - Bulunduğu alt kümenin son elamanını seçer.
• örnek : $(' ul li: last-child')
• :only-child - Bulunduğu kümede eleman tek ise eleman seçilir.
• örnek : $(' ul li: only-child')

Bu filtrelerin dışında farklı tipte filtreleme daha bulunmaktadır.

Attributed filters ( Öznitelik filtreleri )

Elamanları özniteliklerine göre filtrelemek için kullanılır.

<img alt="img1" src="img/img1.jpg">
<img alt="img2" src="img/img2.jpg">
<img alt="img3" src="img/img3.png">

1. $("img [alt = img1]") : alt özniteliği img1 olan img etiketli elamanı seçer.

2. $("img [alt*= img]") : alt özniteliğinde img barındıran img etiketli elamanları seçer.

3. $("img [src^=img/img1]") : src özniteliği img/img1 ile başlıyan tüm img etiketli elamanları seçer.

4. $("img [alt$= .jpg]") : src özniteliği .jpg ile biten tüm img etiketli elamanları seçer.

Elemanların gizli ya da görünür olanları seçmek ve eleman içeriğine göre filtrelemek için kullanılanılan seçicilere göz atalım.

• :hidden - Gizlenmiş elemanları seçer.
• örnek : $("div : hidden")
• :visible - Görünür elemanları seçer
• örnek : $("div : visible")
• :contains(text) - Girilen ifadeyi bulunduran elemanları seçer.
• örnek : $("p : contains ('uzmanım.net')")
• :empty - Alt eleman bulundurmayan boş elamanları seçer.
• örnek : $("td:empty")
• :has(selector) - Girilen elamanı alt eleman olarak barındıran elemanları seçer.
• örnek : $("div:has(p)")
• :parent - Alt eleman barındıran elemanları seçer.
• örnek : $("div:parent")

4) Form seçiciler.

Form elemanlarını direkt seçmek için kullanılan seçicilerdir.

• :input - Tüm form elemanlarını seçer.
• örnek : $(':input')
• :text - Text tipi form elemanlarını seçer.
• örnek : $(':text')
• :password - Password tipi form elemanlarını seçer.
• örnek : $(':password')
• :radio - Radio tipi form elemanlarını seçer.
• örnek : $(':radio')
• :checkbox - Chechbox tipi form elemanlarını seçer.
• örnek : $(':checkbox')
• :submit - Submit tipi form elemanlarını seçer.
• örnek : $(':submit')
• :image - Image tipi form elemanlarını seçer.
• örnek : $(':image')
• :reset - reset tipi form elemanlarını seçer.
• örnek : $(':reset')
• :button - button tipi form elemanlarını seçer.
• örnek : $(':button')
• :file : file tipi form elemanlarını seçer.
• örnek : $(':file')

Form elamanlarını filtrelemek için kullanılan seçicileri inceleyelim;

• :enabled - Değiştirilebilen elemanlarını seçer.
• örnek : $('form : enabled')
• :disabled - Değiştirilmeye kapatılmış elamanlarını seçer.
• örnek : $('form : disable')
• :checked - İşaretlenmiş onay kutularını seçer.
• örnek : $('form : checked')
• :selected - Option tipi seçilmiş elemanları seçer.
• örnek : $('form : selected')