JQuery Seçiciler ve Filtreler

 bcakir
 28 Şubat 2012

Merhaba arkadaşlar, iş yoğunluğumdan dolayı bir süredir makale yazamıyordum. Bu yazımda, JQuery kütüphanesinin çok kullanılan temel seçicilerini ve filtrelerini anlatacağım. Bu yazıyla, JQuery temel seçim işlemlerini öğrenmiş olacaksınız. Bu yazının, JQuery için ipucu rehberi olacağını ve takılınca dönüp sürekli bakacağınızı umut ediyorum. Yazıma ilk önce seçiciler ile başlayacağım. Bunun için bir tablo yapıp ilk sütünda nasıl kullanıldığını ikinci sütünda ise ne işe yaradığını açıklayacağım.

Kullanımı Açıklaması
$(“p”) bütün paragrafları seçer
$(“div p”) div nesnesinin altında bulunan bütün paragrafları seçer
$(“#giris”) id değeri giris olan nesneyi seçer
$(“.giris”) sınıfı giris olan nesneleri seçer
$(“#giris[name]”) id değeri giris olan ve isim değeri olan nesneyi seçer
$(“a[name=bcakir]”) ismi bcakir olan linkeri seçer
$(“input[name^=sec]”) ismi sec ile başlayan input nesnelerini seçer
$(“.giris[name$=sec]”) sınıfı giris olan ve ismi sec ile biten nesneleri seçer
$(“a[id!=sec]”) id değerinde sec olmayan linki seçer
$(“a[id*=bcakir]”) id değerinde bcakir geçen linki seçer
$(“input[type=hidden]”) gizli input nesnelerini seçer

Yukarıda çok kullanılan seçicileri ve açıklamalarını liste şeklinde sizlere verdim. Şimdi, JQuery filitreleri için de benzer bir kullanım ve açıklama tablosunu oluşturalım.

Kullanımı Açıklaması
$(“a:odd”) index değeri tek olan linkleri seçer
$(“a:even”) index değeri çift olan linkleri seçer
$(“p:first”) sıralamada ilk gelen paragrafı seçer
$(“#giris p:last”) giriş id değerine sahip nesnenin ilk paragrafını seçer
$(“p:not(:last)”) son paragraf hariç bütün paragrafları seçer
$(“li:eq(0)”) liste index değeri sıfır (0) olan liste elemanını seçer
$(“li:gt(2)”) liste index değeri ikiden (2) büyük olan liste elemanlarını seçer
$(“li:lt(2)”) liste index değeri ikiden (2) küçük olan liste elemanlarını seçer
$(“p:contains(‘bcakir’)”) içerisinde bcakir yazısı geçen pragrafları seçer
$(“div:empty”) içerisinde yazı olmayan div nesnelerini seçer
$(“div:parent”) içerisinde yazı bulunan div nesnelerini seçer
$(“div:has(a)”) içerisinde link bulunan div nesnelerini seçer
$(“a:hidden”) gizli linklerin hepsini seçer
$(“a:visible”) görünür linklerin hepsini seçer
$(“:button:enabled”) aktif olan bütün butonları seçer
$(“:button:disabled”) pasif olan bütün butonları seçer
$(“:checkbox:checked”) işaretlenmiş olan bütün checkboxları seçer
$(“input:text”) bütün text nesnelerini seçer
$(“.giris:button”) sınıfı giriş olan butonları seçer
$(“select option:selected”) seçim kutusundan seçili olan nesneyi seçer
$(“select [value=2]”) seçim kutusundan değeri iki (2) olan nesneyi seçer

Yukarıda çok kullanılan JQuery filitrelerinin listesini verdim. Burada dikkat etmeniz gereken bir nokta var. Bu nokta; dizilerde olduğu gibi nesnelerin de index değerinin sıfırdan (0) başlaması. Bu yazımda, JQuery kütüphanesinin temel konusu olan seçim işlemini anlattım. Yararlı olması dileğiyle.

 4.357 Okunma

Bu yazıya 3 yorum yapılmış.

  1. teşekkür ederim. tam olarak benim istediğim buydu, emeğinize sağlık : ))

  2. $(document).ready(function () {
    $(“#menu”).find(“li:has(ul)”).hover(function () {
    $(this).find(“ul:first”).toggle(“slow”);
    }, function () {
    $(this).find(‘ul’).css(‘visibility’, ‘hidden’);
    });
    });
    iyi günler benim bir sorunum var bu kodlarla acılan menu yapmaya calıştım yalnız
    $(this).find(“ul:first”).toggle(“slow”);
    kısmında hata veriyor. yapmaya calıstıgım sey sıralı olarak dizilmiş li lerden;alt menusu olanın uzerine gelince toggle veya slide seklinde acılmasını istedm ama hata verdi sebebi nedir? şimdiden sagolun

    • Maalesef yazdığınız kodlardan yola çıkarak yardım edemeyeceğim. Bu konuyu iyice öğrenmenizi tavsiye edebilirim.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat