jQuery ve Seçiciler

jQuery ve Seçiciler

jQuery ve Seçiciler

Seçiciler


Kızılay Web Banner 728X090

jQuery, web sayfamızdaki elemanlara erişmek için birkaç değişik yöntem kullanmakta. Ben bu yöntemleri 5 başlık altında gruplandırdım.


  1. Etiket seçicileri
  2. Öznitelik seçicileri
  3. Css seçicileri
  4. Form seçicileri
  5. Özel seçiciler


Bu seçicilerinin hepsini $('seçici') ifadesinde olduğu gibi kullanmamız gerekiyor. şimdi bu seçicileri ayrı ayrı başlıklar altında inceleyelim.


1. Etiket seçicileri


Web sayfamızda yer alan elemanları HTML etiketlerini kullanarak oluştururuz. Parağraf elemanları oluşturmak için P etiketini, resim elemanları oluşturmak içinse IMG etiketini kullanırız. işte bu elemanlara jQuery ile erişmek için, oluştururken kullandığımız etiket isimlerini aynen kullanıyoruz.

Örneğin web sayfamızdaki bütün parağraf elemanlarını seçmek isteyelim.


 $('p')


Yukarıda yalnızca bir tek etiket seçimi yaptık o da P etiketi idi. Ama biz aynı anda hem P etiketlerini hem de IMG etiketlerini seçmek isteyebiliriz. Birden fazla etiket seçimi yapacaksak etiketler arasına virgül (,) koymamız gerekiyor. Aynen alttaki gibi:


$('p,img')


Tekli ve Çoklu etiketlerin nasıl seçildiklerini öğrendikten sonra sıra geldi içiçe olan etiketleri seçmeye. Örneğin web sayfamızdaki bütün P etiketlerinin içerisinde ne kadar IMG etiketi varsa seçelim.


$('p img')


Bu son kodda dikkat edeceğimiz şey, etiketler arasında boşluk kullandığımızdır.


2. Öznitelik seçicileri


Her HTML etiketi attribute adı verilen özniteliğe sahiptir. Örneğin bir link oluşturmak için A etiketinin href özniteliğini kullanırız. Hatırlamak için hemen bir örnek görelim:


<a href="www.fethiuzun.com.tr"> link </a>


Bu örnekte “href” ifadesi bir özniteliktir. işte jQuery ile web sayfamızdaki elemanlara özniteliklerini kullanarak da erişebiliyoruz. Bize en çok gerekli olabilecek öznitelik seçicilerine kısaca gözatalım.

  • a[href] ile href özniteliği olan a etiketlerini seçiyoruz.
  • a[href=www.fethiuzun.com.tr] ile href özniteği "www.fethiuzun.com.tr" ile tam olarak eşleşen a etiketlerini seçiyoruz.
  • a[href^=www] ile href özniteliği "www" ile başlayan a etiketlerini seçiyoruz.
  • a[href$=com] ile href özniteliği "com" ile biten a etiketlerini seçiyoruz.
  • a[href*=fethi] ile href özniteliği içerisinde "fethi" geçen a etiketlerini seçiyoruz.

Öznitelik seçicilerini tek başına kullanabildiğimiz gibi birleştirerek de kullanabiliyoruz. Alttaki örnekte href özniteliği “www” ile başlayan VE yine href özniteliği “com” ile biten a etiketlerini seçmiş oluyoruz:


 $('a[href^=www][href$=com]')


3. Css seçicileri

Css kodlarken kullandığımız yöntemleri, jQuery ile birlikte kullanabiliyoruz. Örneğin bir elemanın id özniteliği metin olsun. Bu elemanı seçmek için şöyle bir kod kullanıyoruz:


$('#metin')


Şimdi de class özniteliği maviMetin olan elemanları seçelim.


 $('.maviMetin') 


Bir de etiket seçicileri ile css seçicilerini birarada kullanalım. Örneğin web sayfamızdaki bütün DIV etiketlerini seçelim fakat bu DIV etiketlerinin class özniteliği maviMetin olmak zorunda olsun. işte bu işi yapan kod:


 $('div.maviMetin') 


Elemanların class özniteliğine geri dönelim. Biliyorsunuz ki bir elemana birden fazla class değeri atanabiliyor. Örneğin 

 gibi… Böyle bir durumda class değerlerini biteşik yazarak seçim yapıyoruz.

 $('div.siyah.koyu.buyuk') 


Class özniteliğinde belli bir değeri içermeyen elemanları nasıl seçebiliriz ona bakalım. Örneğin class özniteliğinde koyu değeri bulunmayan elemanları seçmek istersek not ifadesini kullanmalıyız.


 $('div:not(.koyu)') 


Benim anlatacağım css seçileri şimdilik bu kadar (:


4. Form seçicileri


jQuery, form elemanları için birkaç özel seçici tanımlamıştır. Form seçicileri ile form elemanlarına çok kolay bir şekilde erişebiliyoruz.


  • :input
  • bütün form elemanları seçer
  • :text
  • sadece metin alanlarını seçer (type="text")
  • :file
  • sadece dosya alanlarını seçer (type="file")
  • :password
  • sadece parola alanlarını seçer (type="password")
  • :radio
  • sadece radyo düğmelerini seçer (type="radio")
  • :checkbox
  • sadece onay kutularını seçer (type="checkbox")
  • :submit
  • sadece gönder düğmelerini seçer (type="submit")
  • :image
  • sadece form resimlerini seçer (type="image")
  • :reset
  • sadece sıfırlama düğmelerini seçer (type="reset")
  • :button
  • sadece normal düğmeleri seçer (type="button")
  • :hidden
  • sadece gizlenmiş alanları seçer (type="hidden")


Form seçicilerinin nasıl kullanıldığına bakalım. Örneğin web sayfamızdaki id özniteliği iletisim olan bir formun bütün metin alanlarını seçelim. işte kodumuz:


$("#iletisim :input")


Peki hem metin alanlarını hem de onay kutularını seçmek isteseydik?


$("#iletisim :input :checkbox")


Bunlara ek olarak jQuery’de 4 tane daha form seçicisi bulunuyor. Bu ek seçiciler özel durumlar için hazırlanmışlar. Nedir bu özel durumlar? Örneğin formunuzda 10 tane onay kutusu olsun. Ziyaretçinin bunlardan kaç tanesini fare ile işaretlediğini öğrenmek için alttaki :checked seçicisini kullanabiliriz.


  • :enabled
  • etkin olan form elemanlarını seçer
  • :disabled
  • devre dışı bırakılmış form elemanlarını seçer
  • :checked
  • işaretlenmiş olan onay kutularını seçer
  • :selected
  • bir açılır menünün (dropdown) seçilmiş değerini alır


5. Özel seçiciler


jQuery bazı elemanlara daha kolay erişebilmemiz için özel seçiciler sunmuştur. Nasıl ki form elemanlarına erişmek için özel form seçicileri kullanıyorsak, diğer elemanlar için de bazı özel seçiciler mevcut.

:even

seçilen elemanları 0′dan başlayarak numaralandırır, daha sonra bu numaralardan çift olanları seçer. Örneğin 5 tane TR etiketi olsun. Bu özel seçici sayesinde 0, 2 ve 4 nolu TR etiketlerini seçebiliriz.


Seçilen elemanları 0′dan başlayarak numaralandırır, daha sonra bu numaralardan tek olanları seçer. Örneğin 5 tane TR etiketi olsun. Bu özel seçici sayesinde 1 ve 3 nolu TR etiketlerini seçebiliriz.


$('tr:even') // çift olanlar gelir
$('tr:odd') // tek olanlar gelir


:eq(2)

Kaçıncı sıradaki elemanı seçeceğimizi belirtir. Örneğin 5 tane DIV etiketi var ama biz 3. sıradakini seçmek istiyoruz. Öyleyse :eq(2) ifadesini kullanmalıyız.

:gt(3)

Greater Than demektir yani birşeyden daha büyük. 5 tane DIV etiketi var ama biz sırası 3′ten büyük olanları seçmek istiyoruz.

:lt(3)

Less Than demektir yani birşeyden daha küçük. 5 tane DIV etiketi var ama biz sırası 3′ten daha küçük olanları seçmek istiyoruz.


$('div:eq(2)') // 3'üncüsünü seç
$('div:gt(3)') // 3'den büyük olanları seç (4,5)
$('div:lt(3)') // 3'den küçük olanları seç (1,2)


:first

Seçmek istediğimiz eleman birden fazla ise "baştakini" seçmiş oluyoruz. Yani :eq(0) seçicisi gibi.

:last

Seçmek istediğimiz eleman birden fazla ise "sondakini" seçmiş oluyoruz.

:contains(‘X’)

içerisinde "X" ifadesi geçen elemanları seçer. Büyük-küçük harfe duyarlıdır. Örneğin içerisinde "fethi fethi" ifadesi geçen tüm paragrafları alttaki gibi seçebiliyoruz.


$(" p:contains('fethi fethi') ")


:visible

Görülebilir olan yani gizlenmemiş olan elemanları seçebilmemizi sağlar. Örneğin css’in bir özelliği olan display:none ile gizlenmiş elemanlara bu seçici ile ulaşamazsınız.

:hidden

Gizlenmiş olan elemanları seçer. Bir üstteki :visible seçicisi ile ters mantıktan çalışır.


$('div:hidden') // gizlenmiş div elemanlarını seç


Sonuç…

Burada anlattığım 5 seçiciden ziyade bir de XPath Seçicileri bulunuyor. Fakat XPath seçicileri, jQuery’nin 1.2 sürümüyle birlikte çekirdek kütüphaneden çıkarıldı ve ayrı bir eklenti olarak sunulmaya başlandı. XPath seçicilerini kullanmak isterseniz ilgili eklentiyi kurmanız gerekecektir.

Yazıyı bitirirken de şunu önemle vurgulamak istiyorum. Ben burada en çok kullanılan seçicilerden bahsettim. Oysa ki jQuery’nin daha fazla seçicisi var.