Öncelikle seçiciler konusuyla başlamak istiyorum. Bence jQuery için en önemli konu budur. Neden mi önemli? Çünkü web sayfalamızdaki elemanlara seçiciler sayesinde erişebiliyoruz. Örneğin bir yazının rengini değiştireceksiniz. Peki ama bu yazı web sayfanızın neresinde? Bu yazıyı jQuery’ye nasıl göstereceksiniz ve işleme almasını sağlayacaksınız? İşte seçiciler konusu bu yüzden önemli

Seçiciler

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 grupladı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. İş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.eburhan.com"> link </a>

Bu örnekte “href” ifadesi bir özniteliktir. İş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.eburhan.com] ile href özniteği “www.eburhan.com” 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*=eburhan] ile href özniteliği içerisinde “eburhan” 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. İş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 <div> 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”)