jQuery seçicileri
03 Mart 2015 Furkan Atabaş 5.144 Okunma Yorum Yok

jQuery seçicileri


jQuery

Bir önceki hatta ilk jQuery içeriğimde jQuery nedir ve nasıl kullanılır? konusunu yazmıştım. Bu içerikte de jquery ile html nesnelerimizi nasıl seçeceğimiz konusuna değineceğim. jQuery fonksiyonlarına daha geçmediğim için çok fazla fonksiyon göstererek kafa karıştırmak istemiyorum o yüzden bu örneklerde kullanacağım iki fonksiyon hide ve show isimli fonksiyonlardır.

Seçiciler bir işlemin uygulanacağı html nesnelerini seçmeye yarar ve ardından eklenen fonksiyonlar bu seçilen nesnelere uygulanır. Basit olarak hem fonksiyonumuzun nasıl uygulanacağını hemde nesnenin seçilmesi için yazılacak alanın neresi olduğunu şu aşağıdaki koddan anlamaya çalışın (:

Not: İlk jQuery yazımda söylediğim gibi bu işlemleri jquery döküman yüklenme kontrolü kodları içerisine yazın.

Not 2: Seçiciler ile birden fazla nesneyi seçmek mümkündür. Bunu seçilecek 2 nesne arasına virgül , ekleyerek gerçekleştire bilirsiniz.

Görüldüğü üzere $ işaretinden sonra parantezler () içerisine seçilecek olan nesnemizi ya da nesnelerimizi yazıyoruz. Arından nokta . ile kullanacak olduğumuz fonksiyonlarımızı ekleyip yazdıklarımızın sonuna noktalı virgül ;  ekleyerek kodumuzu sonlandırıyoruz.

Dikkat ettiyseniz jQuery kodlarımızı yazmak için açtığımız alan bile aslında bu işlemi yapıyor. $(document)  ile dökümanımızı seçip ready() fonksiyonu ile döküman hazır olduğunda ready() fonksiyonu parantezleri içerisinde bulunan fonksiyonumuzun çalışmasını sağlıyoruz.

Seçiciler listemi yazmadan önce kullanacak olduğum iki fonksiyonumu açıklayayım.
hide() => seçilen nesneyi gizler (css ile display özelliğini none yapar.)
show() => Seçilen nesneyi gösterir (css ile display özelliğini block yapar.)

 

jQuery seçicileri

Html etiket seçicileri
$(“div”).hide() ► Tüm div nesnelerini gizler.
$(“span”).hide() ► Tüm span nesnelerini gizler.
$(“img”).hide() ► Tüm img(resim) nesnelerini gizler.
$(“a”).hide() ► Tüm a(link) nesnelerini gizler.
$(“em, i”).hide() ► Tüm em ve i nesnelerini gizler.
$(“h1, h3, h6”).hide() ► Tüm h1, h3 ve h6 nesnelerini gizler.

ID seçiciler
$(“#armut”).hide() ► ID değeri armut olan nesneyi gizler.
$(“span#mandalina”).hide() ► ID değeri mandalina olan span nesnesini gizler.
$(“#armut, span#mandalina”).hide() ► ID değeri armut olan nesne ve id değeri mandalina olan span nesnesini gizler.

Sınıf (Class) seçiciler
$(“.elma”).show() ► Class değeri elma olan tüm nesneleri seçer.
$(“a.elma”).show() ► Class değeri elma olan linkleri seçip gösterir.
$(“a.elma, h4.elma”).show() ► Class değeri elma olan a ve h4 nesnelerini seçip gösterir.

İç nesne seçiciler
$(“#karpuz .cekirdek”).hide() ► ID değeri karpuz olan nesne içerisindeki Class değeri cekirdek olan tüm nesneleri seç.
$(“#karpuz span.cekirdek”).show() ► ID değeri karpuz olan nesne içerisindeki Class değeri cekirdek olan sadece span nesnelerini seç.
$(“#sepet > .karpuz”).hide() ► sepet ID değerine sahip nesnenin direk içince olan karpuz classına ait nesneyi seçer. (Sepet nesnesiin içerisinde bulunan herhangi bir nesnenin içerisinde bile olsa karpuz nesnesini seçmez)

Tag değeri olan seçiciler
$(“#baslik[title]”).hide() ► ID si başlık olup içerisinde title tagını bulunduran nesneleri seç.
$(“img[alt]”).show() ► Alt tagı barındıran img nesnelerini seç.
$(“.box[style]”).hide() ► style değeri almış olan .box classına sahip nesneleri seç.

Tag ve Değer Koşullu Seçiciler
$(“img[height=200px]”).show() ► height değeri 200px olan img nesnelerini seçer.
$(“input[type=text]”).hide() ► type değeri text olan inputları seçer.

İçerik Koşullu Seçiciler
$(“input[name^=den]”).hide() ► name özelliği “den” ile başlayan inputları seç.
$(“input[name$=me]”).hide() ► name özelliği “me” ile sona eren inputları seç.
$(“input[name*=nem]”).hide() ► name özelliğinde”nem” geçen inputları seç.
$(“span[class!=mango]”).hide() ►classı mango olmayan span etiketlerini seç.

jQuery seçicilerimiz benim bildiğim kadarı ile bunlardan ibaret. Bilmediğim buraya yazmayı unuttuğum seçici çeşitleri varsa bunu bana yorum olarak haber verirseniz içeriğime eklerim arkadaşlar. Bir sonraki dersimde inşallah jQuery filtreli seçicileri anlatıcam (Örnek: ilk elemanı, son elemanı, index değeri XX olan elemanları seçmek gibi). Umarım bu yazım faydalı olmuştur.