Jquery ve Seçiciler – 2

Merhaba, bir önceki yazımda Jquery ve Seçiciler konusuna bir giriş yapmıştım ve css, element ve form seçicilerini yazmıştım. Bu yazımda ise jquery de niteleyici ve filtreleme seçicilerinden bahsetmeye çalışacağım. Öncelikle bunların ne anlama geldiğini açıklamaya çalışayım.

Her HTML elementinin bir ya da daha fazla sayıda niteleyicisi bulunur, bir nevi sıfatı bulunur. Mesela <a> elementinin href, title gibi niteleyicileri bulunmaktadır. <a> elementini bir örnekle hatırlamak gerekirse ;

<a title="Teknoloji" href="http://www.cemdemir.net">Cem Demir</a>

Niteleyici seçicilerini bir element üzerinden anlatmak daha açıklayıcı olabileceği için bu seçicileri <a> elementi üzerinden anlatmaya çalışacağım.

a[name] ile <a> elementinin herhangi bir niteleyicisi seçilir.

$("a[title]")
$("a[href]")

a[name=’value’] ile <a> elementinin herhangi bir niteleyicisinin, verilen değerle birebir uyuşanı seçilir.

$("a[href='http://www.cemdemir.net']")
$("a[title='Bilişim']")

a[name*=’value’] ile <a> elementinin herhangi bir niteleyicisinin, verilen değeri herhangi bir yerinde içerenleri seçilir.

$("a[title*='Bil']")
$("a[title*='işi']")
$("a[title*='şim']")

a[name^=’value’] ile <a> elementinin herhangi bir niteleyicisinin, verilen değerle başlayanları seçilir.

$("a[title^='Bili']")

a[name$=’value’] ile <a> elementinin herhangi bir niteleyicisinin, verilen değerle bitenleri seçilir.

$("a[title$='şim']")

a[name!=’value’] ile <a> elementinin herhangi bir niteleyicisinin, verilen değeri birebir içermeyenleri seçilir.

$("a[title!='Bilişim']") // Bu element seçilmez.
$("a[title!='Bil']") // Bu element seçilir.

Ayrıca a[name][name] ile çoklu niteleyici seçimi yapmanız da mümkündür.

title özelliği “Bilişim” olan ve href  özelliği barındıran <a> elementlerini seçelim ;

$("a[href][title='Bilişim']")

Niteleyicilerle ilgili birkaç seçici daha var fakat pek önemli olmadığını düşünerek yazmadım. İsterseniz buradan bakabilirsiniz.

Yazının başında bahsettiğim gibi bir de filtreleme seçicileri vardır. Bunları da bir örnek üzerinden anlatmak mantıklı olacaktır. Elinizde bir sırasız (ul>li) listenin olduğunu düşünün ;

:first ile listenin ilk elemanı seçilir.

$("li:first")

:last ile listenin son elemanı seçilir.

$("li:last")

:even ile listenin çift sayıda olan elemanları seçilir. Jquery bir programlama dili olduğundan ilk elemanlar aslında sıfırıncı elemanlardır, bunu unutmayın.

$("li:even")

: odd ile listenin tek sayıda olan elemanları seçilir.

$("li:first")

:eq() ile listede istediğiniz elemana ulaşabilirsiniz, listedeki 3. elemana ulaşmak için ;

$("li:eq(2)") // Sıfırdan başladığımızı hatırlayın..

:gt() ile listenin belli bir sayıdan büyük elemanları seçilir, listede 2. elemandan sonraki elemanları seçmek isterseniz ;

$("li:gt(2)")

:lt() ile listenin belli bir sayıdan küçük elemanları seçilir, gt() fonksiyonunun tersidir.

$("li:lt(2)")

:not() ile listede istenmeyen bir elemanın seçimini engelliyoruz, mesela ilk ilk eleman hariç diğer elemanları seçmek isterseniz ;

$("li:not(:first)")

Bunların dışında işe yarayabilecek bir de :header seçicisi bulunmakta. Bu seçici ile sayfadaki <h1>, <h2> gibi tagları seçebilirsiniz.

$(":header")

Jqueryde seçiciler konusunda benim yazabileceklerim bunlardı. Fakat belirtmeliyim ki daha fazla sayıda seçici bulunmakta, tamamına buradan bakabilirsiniz.

Benzer Yazılar

Yorumlar

  • İsim , 14 Temmuz 2014 - 13:41:25

    “odd ile listenin tek sayıda olan elemanları seçilir.” demişsiniz lakin örnek olarak gene “first” demişsiniz bilginize…

    Cevapla
  • İsim , 14 Temmuz 2014 - 14:24:15

    ” gt() ile listenin belli bir sayıdan büyük elemanları seçilir, listede 2. elemandan sonraki elemanları seçmek isterseniz ;

    $(“li:gt(2)”) ”

    demişsiniz. 2. elemandan sonrakiler için acaba parantez içine 1 yazmamız gerekmez mi?

    Cevapla

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla