View Sidebar
jQuery ve Seçiciler (Selectors)

jQuery ve Seçiciler (Selectors)

Kasım 9, 2012 15:025 yorum

Öncelikle merhaba. Tüm yazılım geliştiricilerinin ve kod severlerin geçmiş Cumhuriyet ve Kurban Bayramlarını en içten dileklerimle kutluyorum.

Araya giren tatiller, sınavlar vs. dolasıyla yaklaşık 3 haftadır yazamıyordum. Bu haftaki konumuz jQuery Seçiciler (Selectors) olacak. CSS’in içinde gömülü olarak gelen seçicilerin jQuery ile birleşmesi sonucu ortaya çıkan güçlü aracı inceleyeceğiz.

Bu güçlü araçtan bazı örnekler vermek gerekirse, ‘JQuery’ nesnesi yerine ‘$’ kullanarak çok kısa kodlarla büyük işler yapabiliyoruz. ‘$’ kullanımını şu şekilde özetleyebiliriz. Aynı CSS sınıf (class) değerlerine sahip elementleri $(‘.sinif_adi’) şeklinde seçebiliyoruz. ID seçmek için ise $(‘#element_idsi’) kullanımı yeterli oluyor. $(‘a’) şeklinde tüm <a> elementlerini seçebiliyoruz. Yine aynı şekilde ‘:’ operatörünü kullanarak filtreleme işlemlerini gerçekleştirebiliyoruz. Mesela, $(‘a:even’) ile çift sırada olan linkleri seçebiliyoruz.

Şimdi bunun gibi birçok avantajı olan bu nimetin derinliklerine inelim. Şimdiden çok faydalı ve okuması zevkli bir yazı olacağını düşünüyorum.

jQuery(‘*’) / $(‘*’)

Tüm elementleri seçer.

var elementSayisi = $("*").css("border","3px solid green").length;

Bu kullanımı tavsiye etmiyorum. Bu şekilde head, body vs. kısımları da dahil edecektir. Eğer tarayıcınızda <script> veya <link> şeklinde DOM kaynağına eklemeler yapan bir eklenti var ise onları da dahil edecektir.

Örnek uygulama -> https://jsfiddle.net/icntfan/uLSLF/

<!DOCTYPE html>
<html>
<head>
  <style>
  h3 { margin: 0; }
  div,span,p {
    width: 80px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  #test {
    width: auto; height: auto; background-color: transparent;
  }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="test">
  <div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Buton</button></p>
</div>
<script>
var elementSayisi = $("#test").find("*").css("border","3px solid green").length;
$("body").prepend("<h3>" + elementSayisi + " element bulundu</h3>");</script>

</body>
</html>​

Kodumuz #test ID’sine sahip div elementinin çocuğu olan tüm elementlere 3 piksellik yeşil kenarlık veriyor. Bu kullanımı, <body> içindeki elementleri seçmek için en ideal yöntem olarak görüyorum.

jQuery(‘:animated’)

Seçici çalıştığı anda devam eden tüm animasyonları seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/hCGUU/

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
  div.renkli { background:green; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="calistir">Çalıştır</button>

  <div></div>
  <div id="hareketli"></div>
  <div></div>
<script>

    $("#calistir").click(function(){
      $("div:animated").toggleClass("renkli");
    });
    function hareketlendir() {
      $("#hareketli").slideToggle("slow", hareketlendir);
    }
    hareketlendir();
</script>

</body>
</html>

Kodumuz tarayıcı üzerinde çalıştığı anda hareketlendir fonksiyonumuz çalışıyor ve id si hareketli olan kutumuza slideToggle komutunu özyinelemeli olarak, yani sonsuz defa uyguluyor. Sürekli hareket halinde olan kutumuzu div:animated seçicisiyle seçip rengini değiştiriyoruz.

jQuery(‘[attribute|=”value”]’)

Niteliği ve niteliğin değeri verildiği gibi olan veya “-” işareti tarafından takip edilen tüm elementleri seçer. Tanım biraz kafa karıştırıcı gibi. Örneği incelerseniz daha iyi anlayacağınıza eminim.

Örnek uygulama -> https://jsfiddle.net/icntfan/mzn6j/

<!DOCTYPE html>
<html>
<head>
  <style>
a { display: inline-block; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <a href="#" hreflang="tr">Bu bir yazıdır</a>

  <a href="#" hreflang="tr-TR">Bu da bir yazıdır</a>

  <a href="#" hreflang="trkye">Bu seçilmeyecek bir yazıdır</a>

<script>
$('a[hreflang|="tr"]').css('border','3px dotted green');
</script>

</body>
</html>​

Kodumuzda da görebileceğiniz üzere seçicimiz, hreflang niteliğindeki “tr” ve “tr-” yi içeren elementleri seçiyor ve etrafına 3 piksellik noktalı ve yeşil kenarlık veriyor.

jQuery(‘[attribute*=”value”]’)

Verilen string ifadede seçici tarafında verilen substring ifadeyi arar. En yaygın kullanıma sahip seçicilerden biridir.
Örnek uygulama -> https://jsfiddle.net/icntfan/HrgeF/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="guner-ler" />

  <input name="guner" />
  <input name="birguner" />
  <input name="alakasizgu" />
<script>$('input[name*="gun"]').val('içinde gun var');</script>

</body>
</html>​

Name niteliğindeki string ifadede “gun” substringini içeren tüm elementleri seçiyor.

jQuery(‘[attribute~=”value”]’)

Belirlenen nitelikte, verilen string ifade sadece boşluklar ile sınırlandırılmışsa elemeti seçer.
Örnek uygulama -> https://jsfiddle.net/icntfan/zRm54/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="adam-haberleri" />
  <input name="sut adam" />
  <input name="yaziciadam2" />
  <input name="yenisut" />
<script>$('input[name~="adam"]').val('Sayın adam bulundu!');</script>

</body>
</html>​

Gördüğünüz üzere etrafında boşluk karakterleri olan metinleri seçiyor. Daha doğrusu ona bağlı DOM elementimizi seçiyor.

jQuery(‘[attribute$=”value”]’)

Belirlenen niteliğin sadece son kısmında arama yapıyor. Yani aranacak kelime, nitelik değerinin sonunda ise elementi seçiyor.
Örnek uygulama -> https://jsfiddle.net/icntfan/CtZw6/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="haberbulteni" />

  <input name="sutadam" />
  <input name="ganyanbulteni" />
<script>$('input[name$="bulteni"]').val('bir bülten');</script>

</body>
</html>​

Aranan kelimeyi verilen niteliğin sonunda arıyor. Bulursa DOM elementini seçiyor.

jQuery(‘[attribute=”value”]’)

Verilen nitelik ve değeri aranan değere tam olarak eşitse elementi seçiyor.
Örnek uygulama -> https://jsfiddle.net/icntfan/UfeKz/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <label>
      <input type="radio" name="haberbulteni" value="Sıcak Şeyz" />
      <span>adı ne?</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="haberbulteni" value="Soğuk Birşeyz" />
      <span>değer ne?</span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="haberbulteni" value="Kötü planlar" />
      <span>değer ne?</span>
    </label>
  </div>
<script>$('input[value="Sıcak Şeyz"]').next().text(" Sıcak Şeyz");</script>

</body>
</html>​

Value değerimiz tam olarak “Sıcak Şeyz” ile eşleştiği için, bir sonraki elementi yani <span> elementini .next() metodu ile seçip içeriğini “Sıcak Şeyz” olarak ayarlıyor.

Query(‘[attribute!=”value”]’)

Verilen değere eşit olmayan nitelik değerlerine bağlı elementi seçer.

Bu seçinin eşleniği olan kullanım şu şekildedir: “:not([attr=”value”])”

Örnek uygulama -> https://jsfiddle.net/icntfan/KYudC/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>

    <input type="radio" name="haberbulteni" value="Sıcak Şeyz" />
    <span>adımız bir haber bültenidir</span>

  </div>
  <div>
    <input type="radio" value="Soğuk füzyon" />
    <span>isim yok</span>

  </div>
  <div>
    <input type="radio" name="kabul" value="kötü planlar" />

    <span>isim kabul edildi</span>
  </div>
<script>$('input[name!="haberbulteni"]').next().append('<b>; haber bülteni değildir</b>');</script>

</body>
</html>​

Verilen değerlere eşit olmayan niteliklere bağlı elementleri seçtikten sonra, bir sonraki element olan <span> içeriklerine “haber bülteni değildir” ifadesini .append() metodu ile ekliyor.

jQuery(‘[attribute^=”value”]’)

Nitelik tam olarak verilen ifade ile başlıyorsa, niteliğe bağlı elementi seçiyor.

Örnek uygulama -> https://jsfiddle.net/icntfan/zQrQz/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input name="haberbulteni" />
  <input name="sutadam" />
  <input name="haberadami" />
<script>$('input[name^="haber"]').val('Haber burada!');</script>

</body>
</html>​

Kodumuzdan da rahat bir şekilde anlaşılacağı gibi, elementi adı “haber” ile başlayan tüm elementlerin değerlerini “Haber burada!” yapıyor.

jQuery(‘parent > child’)

Parent ile üst seviyesindeki elementi belirtilmiş ve bu elementin altındaki elementi child ile belirtilmiş olan elementi seçer. Sanırım örnekle daha iyi açıklamış olacağım.

Örnek uygulama -> https://jsfiddle.net/icntfan/JMrYZ/

<!DOCTYPE html>
<html>
<head>
  <style>
body { font-size:14px; }
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<ul class="topnav">
    <li>Madde 1</li>
    <li>Madde 2
        <ul><li>İçiçe Madde 1</li><li>İçiçe Madde 2</li><li>İçiçe Madde 3</li></ul>
       </li>
    <li>Madde 3</li>
</ul>

<script>$("ul.topnav > li").css("border", "3px double blue");</script>

</body>
</html>​

$(“ul.topnav > li”) Bu ifadeyi konuşma diline çevirecek olursak, atası “<ul>” elementi ve bu atanın sınıfı “.topnav” olan atanın altındaki tüm “<li>” elementlerini seçiyor.

jQuery(‘.class’)

Kullanımı oldukça yaygın olan bu seçici, belirtilen sınıf değerine sahip olan tüm elementleri seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/YQnRp/

<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 130px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="BeniSev">div class="BeniSev"</div>

  <div class="benimSinifim">div class="benimSinifim"</div>
  <span class="benimSinifim">span class="benimSinifim"</span>
<script>$(".benimSinifim").css("border","3px solid blue");</script>

</body>
</html>​

Kodumuz, rahatlıkla görebileceğiniz üzere class niteliği “benimSinifim” olan tüm elementleri seçiyor ve etrafına 3 piksellik mavi kenarlık veriyor.

jQuery(‘#id’)

Belirtilen ID’ye sahip tek bir elementi seçer. Kurallara göre her ID döküman içerisinde tek olmalıdır. Eğer birden fazla element aynı ID’ye sahipse ilk elementi seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/Dj5hj/

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 90px;
    height: 90px;
    float:left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="bendegilim"><p>id="bendegilim"</p></div>

  <div id="benim">id="benim"</div>
<script>$("#benim").css("border","3px solid blue");</script>

</body>
</html>​

Seçicimiz “benim” ID’sine sahip olan elementi seçiyor.

jQuery(‘element’)

Belirtilen tipteki tüm elementleri seçer. JavaScript’teki getElementsByTagName() metoduyla aynı işi yapıyor.

Örnek uygulama -> https://jsfiddle.net/icntfan/AqNGr/

<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 60px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>DIV1</div>

  <div>DIV2</div>
  <span>SPAN</span>
<script>$("div").css("border","15px solid blue");</script>

</body>
</html>​

$(“div”) ile tüm div elementlerini seçip, 15 piksellik mavi kenarlık verdik.

jQuery(‘:contains(text)’)

Bir nevi arama fonksiyonu diyebiliriz. Belirtilen metin ifadeyi arıyor ve bu ifadeye sahip olan tüm elementleri seçiyor. Büyük/küçük harf duyarlıdır.

Örnek uygulama -> https://jsfiddle.net/icntfan/8JAY6/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div>Ali Ulvi Elöve</div>
<div>Ulvi ERCAN</div>
<div>ulvi</div>
<div>Beşiktaşlıulvi</div>

<script>
$("div:contains('Ulvi')").css("text-decoration", "underline");
    </script>

</body>
</html>​

Tam olarak “Ulvi” ifadesini içeren elementleri seçiyor.

jQuery(‘ancestor descendant’)

Ancestor: Ata
descendant: Oğul

Örnek verecek olursak: jQuery(‘form input’)
Bu kod form elementinin altındaki tüm input elementlerini seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/zETeE/

<!DOCTYPE html>
<html>
<head>
  <style>

  body { font-size:14px; }
  form { border:2px blue solid; padding:2px; margin:0;
         background:#efe; }
  div { color:green; }
  fieldset { margin:1px; padding:3px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <div>Form mavi kenarlıkla çevrelenmiştir</div>
    <label>Oğul:</label>
    <input name="isim" />

    <fieldset>
      <label>Torun:</label>
      <input name="haber" />
    </fieldset>

  </form>
  Kardeş form: <input name="none" />
<script>$("form input").css("border", "2px dotted red");</script>

</body>
</html>​

Form içindeki tüm input elementlerinin etrafını kırmızı ve noktalı kenarlık ile kapladık.

jQuery(‘:enabled’)

Tüm aktif edilmiş elementleri seçer.

Sözde sınıf seçicisi olan “:” ile başlayan ifadeler kullanıldığında, evrensel seçici olan “*” uygulanacaktır. Bir başka deyişle:

$(':enabled') == $('*:enabled')

Bu kullanım yerine

$('input:enabled')

tarzındaki kullanım daha uygun olacaktır.

Örnek uygulama -> https://jsfiddle.net/icntfan/Awdc9/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>

    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
<script>$("input:enabled").val("İşte budur");</script>

</body>
</html>​

Nitelik kısmında disabled=”disabled” olmayan input elementlerini seçip, değerini “İşte budur” olarak ayarlıyor.

jQuery(‘:visible’)

Görünebilir olan tüm elementleri seçer.

  1. Dökümanda yer kaplayan her bir element visible olarak değerlendirilir.
  2. visibility: hidden veya opacity: 0 tüm elementler de dökümanda yer kaplayacağından visible olarak değerlendirilir.
  3. Görünür bir elementi gizleyen animasyon tamamlanana kadar görünür yani visible olarak değerlendirilecektir.
  4. Gizli bir elementi gösteren animasyon başladığı anda visible olarak kabul edilecektir.

Örnek uygulama -> https://jsfiddle.net/icntfan/Zyn3S/

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
  .gizli_olarak_baslat{ display:none; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Değişmediklerini görmek için gizli elementleri göster</button>
  <div></div>
  <div class="gizli_olarak_baslat"></div>
  <div></div>

  <div></div>
  <div style="display:none;"></div>
<script>
    $("div:visible").click(function () {
      $(this).css("background", "yellow");
    });
    $("button").click(function () {
      $("div:hidden").show("fast");
    });

</script>

</body>
</html>​

Gördüğünüz üzere show() metodu, elementimizin visible niteliğini değiştirmiyor. Bu yüzden başlangıçta display:none olan elementlere tıkladığımızda herhangi bir değişiklik olmuyor.

jQuery(‘:disabled’)

Tüm disabled yani devre dışı bırakılmış elementleri seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/P8TDS/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>

    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
<script>$("input:disabled").val("işte budur");</script>

</body>
</html>​

Nitelik kısmında disabled=”disabled” olan input elementini seçip, değerini “İşte budur” olarak ayarlıyor.

jQuery(‘:empty’)

Herhangi bir çocuğu olmayan elementleri seçer. “:parent” ifadesinin tam tersidir.
Dikkatli olunması gereken bir nokta var. Text nodes yani metin bloklarını da kapsar. İçine herhangi bir metin girilmemiş olan elementleri de seçecektir.

Örnek uygulama -> https://jsfiddle.net/icntfan/7N9cr/

<!DOCTYPE html>
<html>
<head>
  <style>

  td { text-align:center; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>TD #0</td><td></td></tr>
    <tr><td>TD #2</td><td></td></tr>
    <tr><td></td><td>TD#5</td></tr>
  </table>
<script>$("td:empty").text("Boş!").css('background', 'rgb(255,220,200)');</script>

</body>
</html>​

Örneğimizde gördüğünüz gibi <td> elementimiz hiç bir çocuk veya metin içermiyor. O yüzden kodumuz içerisine “Boş!” ifadesini yazdırıyor.

jQuery(‘:eq(index)’)

Seçilen elementler içerisinde N numaralı elementi seçer. İndeksleme işlemi sıfırdan başlar.

İndeks temelli seçiciler: (:eq(), :lt(), :gt(), :even,:odd)

Örnek uygulama -> https://jsfiddle.net/icntfan/36zY5/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:eq(2)").css("color", "red");</script>

</body>
</html>​

3. sıradaki <td> elementini seçiyor.

jQuery(‘:lt(index)’)

Less than yani küçük ise seçicisi. Adı üzerinde, seçilen elementlerin içinden indeksi verilenden daha küçük olanları seçer.
Örnek uygulama -> https://jsfiddle.net/icntfan/BKX3Z/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">

  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>

  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script>$("td:lt(4)").css("color", "red");</script>

</body>
</html>​

Seçilenlerden indeks numarası dörtten küçük olanları seçiyor.

jQuery(‘:gt(index)’)

Greater than yani büyük ise seçicisi. Adı üzerinde, seçilen elementlerin içinden indeksi verilenden daha büyük olanları seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/GPgpS/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">

    <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
    <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>

    <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
  </table>
<script>$("td:gt(4)").css("text-decoration", "line-through");</script>

</body>
</html>​

Seçilenlerden indeks numarası dörtten büyük olanları seçiyor.

jQuery(‘:even’)

Seçilen elementlerden çift indeksli olanları seçiyor. Sıfırdan başlar. “:odd” şeklinde kullanım ise tek indeksli elementleri seçecektir.

Örnek uygulama -> https://jsfiddle.net/icntfan/y7apf/

<!DOCTYPE html>
<html>
<head>
  <style>

  table {
    background:#eeeeee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>Indeks #0</td></tr>
    <tr><td>Indeks #1</td></tr>

    <tr><td>Indeks #2</td></tr>
    <tr><td>Indeks #3</td></tr>
  </table>
<script>$("tr:even").css("background-color", "#bbbbff");</script>

</body>
</html>​

Kodumuz #0 ve #2 inci satırları renklendiriyor

jQuery(‘:odd’)

Seçilen elementlerden tek indeksli olanları seçiyor. Sıfırdan başlar. “:even” şeklinde kullanım ise çift indeksli elementleri seçecektir.

Örnek uygulama -> https://jsfiddle.net/icntfan/Dh8F3/

<!DOCTYPE html>
<html>
<head>
  <style>

  table {
    background:#eeeeee;
  }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">
    <tr><td>Indeks #0</td></tr>
    <tr><td>Indeks #1</td></tr>

    <tr><td>Indeks #2</td></tr>
    <tr><td>Indeks #3</td></tr>
  </table>
<script>$("tr:odd").css("background-color", "#bbbbff");</script>

</body>
</html>​

#1 ve #3 numaralı satırları yeniden renklendiriyor.

jQuery(‘:first-child’)

Belirtilen elementler için tüm ilk çocukları seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/zL7ms/

<!DOCTYPE html>
<html>
<head>
  <style>
  span { color:#008; }
  span.deneme { color:green; font-weight: bolder; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <span>Ahmet,</span>
    <span>Mehmet,</span>
    <span>Burak</span>

  </div>
  <div>
    <span>Ayşe,</span>
    <span>Fatma,</span>
    <span>Emine</span>

  </div>
<script>
    $("div span:first-child")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("deneme");
            }, function () {
              $(this).removeClass("deneme");
            });

</script>

</body>
</html>​

İlk elemanı seçtikten sonra yazılan hover fonksiyonu incelersek, this anahtar kelimesini taşıdığını görürüz. Metodumuzun içine yazılan bu kelime $(“div span:first-child”) ile seçilen, yani ilk kelimeleri ifade ediyor.

jQuery(‘:first’)

İlk eşleşen elemanı seçer. “:eq(0)” ile eşleniktir.

Örnek uygulama -> https://jsfiddle.net/icntfan/dErFa/

<!DOCTYPE html>
<html>
<head>
  <style>

  td { color:blue; font-weight:bold; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table>
    <tr><td>Satır 1</td></tr>
    <tr><td>Satır 2</td></tr>
    <tr><td>Satır 3</td></tr>
  </table>
<script>$("tr:first").css("font-style", "italic");</script>

</body>
</html>​

$(“tr”) Tüm satırları seçer, ancak $(“tr:first”) tüm satırlar içerisinden sadece ilk satırı seçer.

jQuery(‘:last-child’)

Atalarının son sırasındaki çocukları olan elementi seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/x2Neg/

<!DOCTYPE html>
<html>
<head>
  <style>
  span.deneme{ text-decoration:line-through; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <span>Ali,</span>
    <span>Ahmet,</span>
    <span>Mehmet,</span>
    <span>Samet</span>
  </div>
  <div>
    <span>Ayşe,</span>
    <span>Fatma,</span>
    <span>Emine,</span>
    <span>Neşe</span>
  </div>
<script>
    $("div span:last-child")
        .css({color:"red", fontSize:"80%"})
        .hover(function () {
              $(this).addClass("deneme");
            }, function () {
              $(this).removeClass("deneme");
            });

</script>

</body>
</html​

Her bir div’in içerisindeki son span elementini seçiyor ve üstüne gelince üstü çizili hale getiriyor.

jQuery(‘:last’)

Seçilen elementlerin sonuncusunu seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/JY5vZ/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table>

    <tr><td>İlk Satır</td></tr>
    <tr><td>Orta Satır</td></tr>
    <tr><td>SonSatır</td></tr>

  </table>
<script>$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});</script>

</body>
</html>​

$(“tr”) ile tüm satırları seçiyoruz, $(“tr:last”) ile bu seçilen satırların sonuncusunu seçiyoruz.

jQuery(‘:focus’)

Odaklanılmış (focused) herhangi bir element varsa onu seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/MgkYr/

<!DOCTYPE html>
<html>
<head>
  <style>
.odaklan{
    background: #abcdef;
}
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>Seçici</option>
    </select>
</div>

<script>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "odaklan", elem.is( ":focus" ) );
    }, 0);
});
</script>

</body>
</html>​

Kodumuzu konuşma diline çevirecek olursak, content kutusu içerisindeki herhangi bir elementteki focus ya da blur olaylarında elemente “odaklan” sınıfını ata, eğer zaten atanmışsa atanmış sınıfı kaldır.

jQuery(‘[attribute]’)

Verilen niteliğe sahip olan tüm elementleri değeri gözetmeksizin seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/tx9PR/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>id yok[tıkla]</div>
  <div id="bubirid">id ile[tıkla]</div>

  <div id="budabirid">ID si var[tıkla]</div>
  <div>hop[tıkla]</div>
<script>

    $('div[id]').one('click', function(){
      var idString = $(this).text() + ' = ' + $(this).attr('id');
      $(this).text(idString);
    });
</script>

</body>
</html>​

Tıklanan kutulara, o kutuların ID niteliğini ekliyor.

jQuery(‘:has(selector)’)

Seçicide belirtilen element en bir adet bulunuyorsa, seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/3gTs4/

<!DOCTYPE html>
<html>
<head>
  <style>
  .test{ border: 3px inset red; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div><p>Paragraf</p></div>

  <div>Merhaba! (paragraf yok)</div>
<script>$("div:has(p)").addClass("test");</script>

</body>
</html>​

<p> elementine sahip olan, <div> elementimize test CSS sınıfını ekliyor.

jQuery(‘:header’)

H1,H2,H3…. Şeklindeki tüm başlıkları seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/ubk2d/

<!DOCTYPE html>
<html>
<head>
  <style>
  body { font-size: 10px; font-family: Arial; }
  h1, h2 { margin: 13px; font-size: 16px;}
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <h1>Başlık 1</h1>

  <p>İçerik 1</p>
  <h2>Başlık 2</h2>
  <p>İçerik 2</p>
<script>$(":header").css({ background:'#CCC', color:'blue' });</script>

</body>
</html>​

<h1> ve <h2> başlıklarını seçip arka plan rengini ve başlığın rengini değiştiriyor.

jQuery(‘[attributeFilter1][attributeFilter2][attributeFilterN]’)

Bu kullanım birden fazla filtre uygulamamıza yardımcı oluyor.
Örnek uygulama -> https://jsfiddle.net/icntfan/X9Yqw/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input id="haberleradam" name="adam-haberler" />

  <input name="sutadam" />
  <input id="yaziadam" name="yazi-adam" />
  <input name="yenisut" />
<script>$('input[id][name$="adam"]').val('sadece bu seçildi');</script>

</body>
</html>​

Kodumuz id niteliği olan ve adı “adam” olan inputumuzu seçiyor.

jQuery(‘selector1, selector2, selectorN’)

Bu kullanım belirtilen seçicilere sahip olan elementleri seçiyor.

Örnek uygulama -> https://jsfiddle.net/icntfan/jRZU7/

<!DOCTYPE html>
<html>
<head>
  <style>

  div,span,p {
    width: 150px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>div</div>

  <p class="benimsinifim">p class="benimsinifim"</p>
  <p class="benimsinifimdegil">p class="benimsinifimdegil"</p>
  <span>span</span>
<script>$("div,span,p.benimsinifim").css("border","3px solid blue");</script>

</body>
</html>​

Elementler herhangi biri seçici içerisinde belirtilen “div,span ve p.benimsinifim” seçicilerinden biri ise 3 piksellik mavi kenarlık veriyoruz.

jQuery(‘prev + next’)

Next ile belirtilmiş olan ve kardeşi prev ile belirtilmiş olan tüm elementleri seçer. Dikkat edilmesi gereken nokta next ve prev olarak belirtilen bu iki elementin aynı ataya sahip olmasıdır.

Örnek uygulama -> https://jsfiddle.net/icntfan/CwQRk/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>

    <label>Ad:</label>
    <input name="ad" />
    <fieldset>
      <label>Haber:</label>

      <input name="haber" />
    </fieldset>
  </form>
  <input name="yok" />
<script>$("label + input").css("color", "blue").val("etiketlendi!")</script>

</body>
</html>​

Next: input ve prev: label olarak düşünürsek label ve input ikilisine sahip tüm inputları seçip, içine “etiketlendi!” yazdırıyor.

jQuery(‘prev ~ siblings’)

Prev’den sonra gelen ve siblings ile seçilen tüm kardeş elementleri seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/mpusR/

<!DOCTYPE html>
<html>
<head>
  <style>

  div,span {
    display:block;
    width:80px;
    height:80px;
    margin:5px;
    background:#bbffaa;
    float:left;
    font-size:14px;
  }
  div#small {
    width:60px;
    height:25px;
    font-size:12px;
    background:#fab;
  }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>#prev den önce geldiği için seçilmiyor</div>
  <span id="prev">span#prev</span>
  <div>kardeş div</div>

  <div>kardeş div<div id="small">div niece</div></div>
  <span>kardeş span(div değil)</span>
  <div>kardeş div</div>
<script>$("#prev ~ div").css("border", "3px groove blue");</script>

</body>
</html>​

Kod bloğunda yer alan açıklamalara ek olarak

<div>kardeş div<div id="small">div niece</div></div>

small ID’sine sahip div diğerinin bir alt seviyesi olduğu için seçilmiyor.

jQuery(‘:not(selector)’)

Seçide belirtilenlerin dışında kalan tüm elementleri seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/SatLx/

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
  <input type="checkbox" name="a" />
  <span>Deneme</span>
</div>

<div>
  <input type="checkbox" name="b" />
  <span>bune</span>

</div>
<div>
  <input type="checkbox" name="c" checked="checked" />
  <span>Yok</span>
</div>
<script>
  $("input:not(:checked) + span").css("background-color", "yellow");
  $("input").attr("disabled", "disabled");

</script>

</body>
</html>​

İşaretli olmayan ve sonrasında <span> elementi içeren tüm <span> elementlerinin arka planını sarı yapıyor.

jQuery(‘:nth-child(index/even/odd/equation)’)

Belirtilen elemanı seçer. Parametre:

  1. 1 ile başlayan indeks numarası
  2. “even” Çift sayılı indeksler
  3. “odd” tek sayılı indeksler
  4. “equation” bir denklem

olabilir.

Örnek uygulama -> https://jsfiddle.net/icntfan/6n2Vc/

<!DOCTYPE html>
<html>
<head>
  <style>

  div { float:left; }
  span { color:blue; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div><ul>
    <li>Ali</li>
    <li>Ahmet</li>
    <li>Mehmet</li>

  </ul></div>
  <div>
  <ul style="margin: 0 30px;">
    <li>Veli</li>
  </ul>
 </div>

  <div><ul>
    <li>Ayşe</li>
    <li>Ayça</li>
    <li>Merve</li>

    <li>Murat</li>
  </ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2inci!</span>");</script>

</body>
</html>​

$(“ul li:nth-child(2)”) seçicisi ile ul elementinin içerisinde olan li elementlerinden 2. sırada olanını seçiyoruz.

jQuery(‘:only-child’)

Sahip oldukları atanın tek çocuğu olan tüm elementleri seçer.

Örnek uygulama -> https://jsfiddle.net/icntfan/zerWw/

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:100px; height:80px; margin:5px; float:left; background:#a9e }
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
  <button>Kardeş!</button>
  <button>Kardeş!</button>
</div>

<div>
  <button>Kardeş!</button>
</div>
<div>
  Yok
</div>

<div>
  <button>Kardeş!</button>
  <button>Kardeş!</button>
  <button>Kardeş!</button>

</div>
<div>
  <button>Kardeş!</button>
</div>
<script>
  $("div button:only-child").text("Yalnız").css("border", "2px blue solid");
</script>

</body>
</html>​

Kodumuzu incelediğimizde görebileceğimiz üzere tek sahip olduğu atanın tek çocuğu olan elementlerin text niteliğini “yalnız” olarak atıyor.

jQuery(‘:parent’)

Herhangi bir elementin atası olan tüm elementleri seçiyor. Metin blogları da dahildir. “:empty” kullanımının tam tersidir.

Örnek uygulama -> https://jsfiddle.net/icntfan/t4jNj/

<!DOCTYPE html>
<html>
<head>
  <style>
  td { width:40px; background:green; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <table border="1">

  <tr><td>Değer 1</td><td></td></tr>
  <tr><td>Değer 2</td><td></td></tr>

</table>
<script>$("td:parent").fadeTo(1500, 0.3);</script>

</body>
</html>​

İçeriğinde “Değer 1” ve “Değer 2” olan <td> elementlerine .fadeTo() işlemi uyguluyor.

jQuery(‘:hidden’)

Gizli olan tüm elementleri seçer.

Elementler bir kaç sebepten dolayı gizli olabilir.

  1. CSS Display değerleri none olarak belirtilmiştir.
  2. Type=”hidden” olarak belirtilmiş form elementidir.
  3. Width ve Height değerleri açıkça 0 (sıfır) olarak belirtilmiştir.
  4. Ata elementi gizli ise, kendisi sayfada gözükmeyeceğinden, gizli olarak ele alınır

Örnek uygulama -> https://jsfiddle.net/icntfan/t3kpJ/

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
  span { display:block; clear:left; color:red; }
  .baslangicta_gizli{ display:none; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span></span>
  <div></div>
  <div style="display:none;">Gizli!</div>
  <div></div>

  <div class="baslangicta_gizli">Gizli!</div>
  <div></div>
  <form>
    <input type="hidden" />

    <input type="hidden" />
    <input type="hidden" />
  </form>
  <span>

  </span>
<script>
// bazı tarayıcılarda :hidden kısmı şunları da içerir -> head, title, script, vs...
var hiddenEls = $("body").find(":hidden").not("script");

$("span:first").text("Bulunan " + hiddenEls.length + " adet gizli element var.");
$("div:hidden").show(3000);
$("span:last").text("Bulunan " + $("input:hidden").length + " gizli input var.");
</script>

</body>
</html>​

Kodumuzdaki .not(“script”) metodu bazı tarayıcılardaki gizli olarak tanımlanan head, title, script elementlerini seçmesini engellemek içindir. Yukarıda saydığım 4 adet gizli olma koşullarını kod içerisinde sağlamaya çalıştım. Örneğin, başlangıçta bazı div bloklarını hidden yani gizli olarak başlattım. Dikkat ederseniz de, gizli tipte inputlarımız da var. Toplam gördüğümüz 6 rakamı, bu 4 koşuldaki ihtimaller dahilinde olan element sayısıdır.

jQuery(‘:image’)

Tüm image tipindeki elementleri seçer. Eşlenik kullanımı [type=”image”] şeklindedir.
Örnek uygulama -> https://jsfiddle.net/icntfan/AFR9x/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Giriş Düğmesi"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Seçenek<option/></select>

    <textarea></textarea>
    <button>Buton</button>
  </form>
  <div>
  </div>
<script>
    var input = $("input:image").css({background:"yellow", border:"3px red solid"});
    $("div").text("Şu kadar bulundu: " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; });

</script>

</body>
</html>​

Form içerisnde yer alan 1 adet image tipindeki inputumuzu seçiyor.

jQuery(‘:input’)

Şu elementleri seçer: input, textarea, select ve button

Örnek uygulama -> https://jsfiddle.net/icntfan/Zd5GV/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Giriş Düğmesi"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Seçenek</option></select>

    <textarea></textarea>
    <button>Buton</button>
  </form>
  <div id="messages">
  </div>
<script>

    var allInputs = $(":input");
    var formChildren = $("form > *");
    $("#messages").text("Bulunan " + allInputs.length + " adet input ve formda " +
                             formChildren.length + " tane çocuk var.");

    // so it won't submit
    $("form").submit(function () { return false; });

</script>

</body>
</html>​

Giriş elementi (input) olarak algılanan input, textarea, select ve button elementlerinin toplamdaki sayısını ekrana basıyoruz.

jQuery(‘:password’)

Tipi password olan tüm elementleri seçer. Eşlenik kullanımı şu şekildedir.

$('[type=password]')

Örnek uygulama -> https://jsfiddle.net/icntfan/hbXpS/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Giriş Düğmesi"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Seçenek<option/></select>

    <textarea></textarea>
    <button>Buton</button>
  </form>
  <div>
  </div>
<script>

    var input = $("input:password").css({background:"yellow", border:"3px red solid"});
    $("div").text("Şu kadar bulundu: " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; });

</script>

</body>
</html>​

$(“input:password”) seçicisi ile seçilen, tipi şifre olan giriş elemanımıza sarı arka plan ve 3 piksellik kırmızı kenarlık veriyoruz.

jQuery(‘:radio’)

Tipi radio olan tüm elementleri seçer. Eşlenik kullanımı şu şekildedir.

$('[type=radio]')

Örnek uygulama -> https://jsfiddle.net/icntfan/MECCd/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Giriş Düğmesi"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" name="asdf" />
    <input type="radio" name="asdf" />

    <input type="reset" />
    <input type="submit" />
    <input type="text" />

    <select><option>Seçenek<option/></select>
    <textarea></textarea>
    <button>Buton</button>
  </form>

  <div>
  </div>
<script>

    var input = $("form input:radio").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
    $("div").text("Şu kadar bulundu: " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; });

</script>

</body>
</html>​

$(“form input:radio”) seçicisi ile seçilen, radyo butonunun bir üstüne eklenen span elementine sarı arka plan ve 3 piksellik kırmızı kenarlık veriyoruz.

jQuery(‘:reset’)

Tipi reset olan tüm elementleri seçer. Eşlenik kullanımı şu şekildedir.

$('[type=reset]')

Örnek uygulama -> https://jsfiddle.net/icntfan/fdpqP/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Giriş Düğmesi"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Seçenek<option/></select>

    <textarea></textarea>
    <button>Buton</button>
  </form>
  <div>
  </div>
<script>

    var input = $("input:reset").css({background:"yellow", border:"3px red solid"});
    $("div").text("Şu kadar bulundu: " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; });

</script>

</body>
</html>​

$(“input:reset”) seçicisi ile seçilen, tipi reset olan giriş elemanımıza sarı arka plan ve 3 piksellik kırmızı kenarlık veriyoruz.

jQuery(‘:selected’)

Örnek uygulama -> https://jsfiddle.net/icntfan/eHYdX/

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select name="bahce" multiple="multiple">

    <option>Çiçekler</option>
    <option selected="selected">Çalılıklar</option>
    <option>Ağaçlar</option>
    <option selected="selected">Otluklar</option>

    <option>Çimler</option>
    <option>Çamur</option>
  </select>
  <div></div>
<script>

    $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .trigger('change');
</script>

</body>
</html>​

Select elementimizin her bir change olayında seçilen elemanlar :selected ile seçip ekrana bastırıyoruz.

jQuery(‘:submit’)

Submit tipindeki tüm elementleri seçer.
Örnek uygulama -> https://jsfiddle.net/icntfan/y4Uch/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Giriş Düğmesi"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" name="asdf" />
    <input type="radio" name="asdf" />

    <input type="reset" />
    <input type="submit" />
    <input type="text" />

    <select><option>Seçenek<option/></select>
    <textarea></textarea>
    <button>Buton</button>
  </form>

  <div>
  </div>
<script>

    var input = $("form input:submit").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
    $("div").text("Şu kadar bulundu: " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; });

</script>

</body>
</html>​

$(“form input:submit”) seçicisi ile seçilen gönderici butonunun bir üstüne eklenen span elementine sarı arka plan ve 3 piksellik kırmızı kenarlık veriyoruz.

jQuery(‘:text’)

Text tipindeki tüm elementleri seçer.

Şu iki kullanımın farkını aşağıda görebilirsiniz: $(‘:text’) ve $(‘[type=text]’)

$('<input>').is('[type=text]'); // false
$('<input>').is(':text'); // true

Örnek uygulama -> https://jsfiddle.net/icntfan/ECNYC/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Giriş Düğmesi"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Seçenek</option></select>

    <textarea></textarea>
    <button>Buton</button>
  </form>
  <div>
  </div>
<script>

    var input = $("form input:text").css({background:"yellow", border:"3px red solid"});
    $("div").text("Şu kadar bulundu: " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; });

</script>

</body>
</html>​

$(“form input:text”) seçicisi ile seçilen, tipi metin olan giriş elemanımıza sarı arka plan ve 3 piksellik kırmızı kenarlık veriyoruz.

jQuery(‘:button’)

Döküman üzerinde yer alan butonları seçer.
Eşlenik kullanımı şu şekildedir: “$(“button, input[type=’button’]”)”

Örnek uygulama -> https://jsfiddle.net/icntfan/FfFAN/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:35px; }
  div { color: red; }
  fieldset { margin: 0; padding: 0; border-width: 0; }
  .isaretli{ background-color: yellow; border: 3px red solid; }
</style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
  <fieldset>
    <input type="button" value="Giriş Butonu"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Seçenek<option/></select>

    <textarea></textarea>
    <button>Düğme veya buton</button>
  </fieldset>
</form>

<div>
</div>
<script>
  var input = $(":button").addClass("isaretli");
  $("div").text( "Şu kadar bulundu: " + input.length + "." );
  $("form").submit(function () { return false; });
</script>

</body>
</html>​

Kodumuz, butonlara isaretli isimli CSS sınıfını ekliyor.

jQuery(‘:checkbox’)

Dökümandaki tüm checkboxları seçer.

Eşlenik kullanımı şu şekildedir: “$(‘[type=checkbox]’)”

Örnek uygulama -> https://jsfiddle.net/icntfan/U7npG/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:25px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Giriş Düğmesi"/>
    <input type="checkbox" />

    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />

    <input type="image" />
    <input type="password" />
    <input type="radio" />

    <input type="reset" />
    <input type="submit" />
    <input type="text" />

    <select><option>Seçenek<option/></select>
    <textarea></textarea>
    <button>Buton</button>
  </form>

  <div>
  </div>
<script>

    var input = $("form input:checkbox").wrap('<span></span>').parent().css({background:"yellow", border:"3px red solid"});
    $("div").text("Şu kadar bulundu: " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; });

</script>

</body>
</html>​

Kodumuz, checkboxların etrafını <span> ile kapladıktan sonra, <span> elementine kenarlık ve sarı bir arka plan uyguluyor.

jQuery(‘:checked’)

Dökümandaki seçili elemanları seçer. Radio ve Checkbox tipindeki form elemanları için çalışır. Select elementleri için “:selected” kullanınız.

Örnek uygulama -> https://jsfiddle.net/icntfan/gtx7U/

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<form>
  <p>
    <input type="checkbox" name="haber" checked="checked" value="Hourly" />

    <input type="checkbox" name="haber" value="Günlük" />
    <input type="checkbox" name="haber" value="Haftalık" />

    <input type="checkbox" name="haber" checked="checked" value="Aylık" />
    <input type="checkbox" name="haber" value="Yıllık" />
  </p>
</form>
<div></div>

<script>
function countChecked() {
  var n = $("input:checked").length;
  $("div").text(n +  " tane işaretlendi!");
}
countChecked();
$(":checkbox").click(countChecked);
</script>

</body>
</html>​

Sayfadaki tüm checkboxların click yani, tıklama olayında countChecked() fonksiyonunu çağırıyor ve seçilen checkbox sayısı length niteliği sayesinde ekrana bastırıyor.

jQuery(‘:file’)

File tipindeki tüm elementleri seçer. Eşlenik kullanımı [type=”file”]
Örnek uygulama -> https://jsfiddle.net/icntfan/vZwWp/

<!DOCTYPE html>
<html>
<head>
  <style>
  textarea { height:45px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <input type="button" value="Giriş Düğmesi"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Seçenek<option/></select>

    <textarea></textarea>
    <button>Buton</button>
  </form>
  <div>
  </div>
<script>

    var input = $("input:file").css({background:"yellow", border:"3px red solid"});
    $("div").text("Şu kadar bulundu: " + input.length + ".")
            .css("color", "red");
    $("form").submit(function () { return false; });

</script>

</body>
</html>​

Tipi file olan input elementini seçip arka planını sarı yapıp, 3 piksellik kırmızı kenarlık veriyor.

Faydalanılan kaynaklar:
1-) JQuery documentation -> Selectors | https://api.jquery.com/category/selectors/

5 Yorum

Yanıtla