Jquery ve Seçiciler

Jquery nedir sorusunu “Jquery nedir, nasıl kullanılır, nasıl öğrenilir” adlı yazımda cevaplamaya çalışmıştım. Bu yazıda ise Jquery deki en önemli konulardan biri olan Seçicileri (Selector) yazmaya çalışacağım.

Jqueryde seçicileri öğrenmek sanırım dili öğrenmek için atılması gereken ilk adımdır. Bunun yanı sıra seçicileri öğrendiğinizde jquerynin büyük bir kısmını halletmiş olursunuz.

Seçiciler sayesinde bir sayfadaki öğeleri, nesneleri, elementleri, başka aklınıza ne geliyorsa hepsini seçebilirsiniz, yakalayabilirsiniz. Seçtikten sonra belirli fonksiyonlar ile işleme soktuğunuzda zaten jqueryde büyük yol katetmiş oluyorsunuz. Seçicileri jquery.com dan da alıntı yaparak kendime göre kategorilendirmeye çalıştım. Kategorilere bir göz atmak gerekirse ;

  • CSS ve Element Seçicileri
  • Form Seçicileri
  • Filtreleme Seçicileri
  • Niteleyici Seçicileri
  • Diğer Seçiciler

Kategorileri tek tek açıklayarak hepsinde güzel ve basit örnekler vermeye çalışacağım, hadi başlayalım.

CSS ve Element Seçicileri

CSS denilince akla ilk gelenler arasında sınıflar (.class) ve id‘ler (#id) bulunmaktadır. Sayfanızda oluşturduğunuz sınıfları, idleri, elementleri ya da oluşturduğunuz herhangi bir öğeyi seçmeniz mümkündür.

Sayfanızdaki tüm linkleri (yani a taglarını) seçelim ;

$("a")

Herhangi bir “header” adlı sınıfı seçelim ;

$(".header")

Ya da footer id’sine sahip bir öğeyi seçelim ;

$("#footer")

Gördüğünüz gibi jquery, css ile içiçe kullanılan bir teknoloji. Şimdi ise “header” sınıfı içinde bulunan tüm paragraf etiketlerini seçelim ;

$(".header p")

“header” id’sine sahip span etiketlerini seçelim ;

$("#header span")

Mesela header sınıfı içindeki linkleri ve footer id’sindeki paragraf etiketlerini seçerek çoklu seçim yapalım ;

$('.header a, #footer p')

Not 1 : Seçicilerin başına tek tırnak ya da çift tırnak işareti koyabilirsiniz, ikiside aynı işlevi görüyor.

Not 2 : * seçicisi sayfadaki tüm öğeleri seçer. Aşağıdaki gibi kullanabilirsiniz.

$("*")

Aslında bu örnekler somut olmadığı için somut bir örnek gösterme gereği duyuyorum. Sayfamızdaki “myClass” adlı sınıfın içerisindeki linkeri ve span etiketlerinin rengini beyaz, arkaplan renklerini kırmızı yapalım.

$(".myClass a, .myClass span").css({
   background : "red";
   color : "white";
})

Sonuca buradan inceleyebilirsiniz. Ayrıca seçicilerden sonra gelen .css() kısmını şimdilik dert etmeyin.

Örneği buradan indirebilirsiniz.

Form Seçicileri

Form seçicileri adından da anlaşıldığı gibi sayfanızda oluşturduğunuz form etiketleri üzerinde işlem yapmanıza olanak sağlıyor. Form seçicilerini incelemeye başlayalım.

:input ile sayfadaki tüm input etiketlerini seçelim ;

$("input")

:text ile sayfadaki text niteleyicisine sahip input etiketlerini seçelim ;

$("input:text")

:submit ile sayfadaki header sınıfı içindeki submit niteleyicisine sahip input etiketlerini seçelim ;

$(".header input:submit")

:button ile sayfadaki footer id’sine sahip button etiketlerini seçelim ;

$("#footer button")

:checkbox ile sayfadaki checkbox niteleyicisine sahip input etiketlerini seçelim ;

$("input:checkbox")

Bildiğiniz üzere form etiketlerinin enabled ve disabled adlı niteleyicileri bulunmaktadır. Enabled açık, disabed kapalı anlamına geliyor. Şimdi ise bir sayfadaki input etiketlerinin enabled niteleyici olanlarının arkaplanını yeşil, disabled niteleyicisine sahip olanlarının arkaplanını mavi yapalım ;

$("input:disabled").css("background","#0099FF");   //Yeşil
$("input:enabled").css("background","#009966");   //Mavi

Sonuca buradan bakabilirsiniz. Ayrıca buradan da indirebilirsiniz.

Sayfadaki seçilmiş olan checkbox inputlarını seçelim ;

$("input:checkbox:checked")

Bunların dışında diğer form etiketleri için de seçiciler üretilmiştir. Tamamına buradan bakabilirsiniz.

Şimdilik bu kadar seçici olmak yeter. :) Aslında hepsini bu yazıya sığdırmak isterdim ama sığacak gibi değiller. Diğer seçici kategorilerini ileriki günlerde yazmaya devam edeceğim.

Benzer Yazılar

Henüz yorum yapılmamış

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