jQuery ve Seçiciler

Eğer jQuery’e yeni başlıyorsanız jQuery derslerimin ilki olan jQuery Nedir? Nasıl Kullanılır? makalesini mutlaka okumalısınız. jQuery hakkında başlangıç bilgileri içeren rehber tarzında bir makaledir.

Eğer ingilizce biliyorsanız bu makale yerine Selecting Elements makalesini okuyabilirsiniz.

Ayrıca bu makalede genel CSS terimlerini (ID nedir? Class Nedir?) bildiğinizi varsayarak yazıyorum. Bu terimleri bilmiyorsanız lütfen öncelikle CSS öğrenin. 

Seçiciler nedir ?

Bildiğiniz gibi jQuery kodlarken bazı elementlere eventlar veririz. Bunlardan bazılar click(), change() v.s yada css(), animate() gibi elementlerin varolan css yapıları ile oynarız. İşte tüm bu eventleri verebilmek için elementlerini yolunu belirtmemiz gerekir.

Örneğin bir <a> elementine click() eventini vermek için $(‘a’) yapısını kullanırız.

Seçici çeşitleri

jQuery’de onlarca seçici vardır ve işlerimizi okadar kolaylaştırır ki anlatamam. Şimdi bunların birçoğunun detaylı olarak açıklamasını yapacağız.

1-) Element seçicileri

Genel HTML elementlerini seçebileceğiniz seçicidirler.

<h1>Cihan Aksoy</h1>
 $('h1')

Evet gödüğünüz gibi direkt olarak h1 şeklinde seçebiliyoruz. Ancak unutmamanız gereken sayfanızdaki bütün h1 elementlerini seçmiş olursunuz. Bu çoğu zaman istemediğimiz birşeydir. Ancak bazende çok işe yarar olabiliyorlar.

2-) ID’ye göre seçmek

Bu seçici html yapınızda belirttiğiniz ID elementlerini seçmenize yarar.

<div id="Secici">Cihan Aksoy</div>
$('#Secici')

Burada unutulmaması gereken birşey var. Bazı sayfalarda görüyorum. Birden fazla aynı ID ismi kullanıyorlar. Siz böyle bir hataya düşmeyin. ID isimleri uniquedir yani eşsiz olmalıdır. Eğer birden fazla aynı isimle ID yaratırsanız jQuery’de oldukça fazla sorun yaşarsınız.

3-) Class’a göre seçmek.

Bu seçici html yapınızda belirttiğiniz Class elementlerini seçmenize yarar.

<div class="SeciciClass">Cihan Aksoy</div>
$('.SeciciClass')

 4-) Özniteliklerine (attribute) göre seçmek

Başlamadan önce hemen belirtmek istiyorum. Jquery’nin resmi sitesinde şu şekilde bir uyarı var.

Kullanırken dikkatli olun! Eski tarayıcılarda yavaşlığa sebep olabilir.

<input type="text" />
$('input[type="text"]')

Bunu her özniteliğe yapabilirsiniz. Başka bir örnek verelim ve pekiştirelim.

<input type="text" name="cihanaksoy" />
$('input[name="cihanaksoy"]')

5-) İç içe geçmiş elementleri seçmek

Örneğin iç içe kullandığınız html elementlerini direkt olarak yol belirtebilirsiniz.

<div id="Content">
    <ul class="Profile">
        <li><a href="ChangePassword.html">Şifre Değiştir!</a></li>
    </ul>
</div>
$('#Content ul.Profile li a')

 6-) Sözde seçiciler (Pseudo-Selectors)

jQuery’nin en ilgi çekici ve işinizi kolaylaştıran seçicileri Sözde diğer adıyla Pseudo seçicilerdir. Muhteşem derecede işe yararlar ve bazen işinizi çok fazla kolaylaştırırlar.

Bu makalemizde sözde seçicilerden bir kaçına örnek verip bırakacağız. Çünkü Sözde seçiciler başlı başına bir makaleyi hak ediyor.

Çok sık kullanılan sözde seçicilerin listesi;

  • :first-child – Bir elementler dizisinin sadece ilk elemanını alır.
  • :last-child – Bir elementler dizisinin sadece son elemanını alır.
  • :nth-child(N) – Bir elementler dizisinin kaçıncı elemanını seçmek istiyorsanız N yerine onu yazarsınız.

Evet şimdi bunların hepsine tek html kodunda cevap verelim. Aşağıdaki gibi bir html çıktımız olsun.

<div id="Content">
    <ul class="Sehirler">
        <li>Antalya</li>
        <li>Bursa</li>
        <li>İstanbul</li>
        <li>Ankara</li>
        <li>İzmir</li>
        <li>Konya</li>
        <li>Eskişehir</li>
        <li>Kocaeli</li>
    </ul>
</div>

Şimdi burada yukarıda açıklamalarını yaptığımız sözde seçicileri kullanalım.

$('.Sehirler li:first-child') //Sadece Antalya olan Lİ'yi seçer.
$('.Sehirler li:last-child') //Sadece Kocaeli olan Lİ'yi seçer.
$('.Sehirler li:nth-child(4)') //Sadece Ankara olan Lİ'yi seçer.

Bu şekilde onlarca sözde seçiciler var. Başka bir makalemizde bunların hepsini tek tek açıklamaları ile öğreneceğiz.

Bir makalemizin daha sonuna geldik. İlerleyen günlerde bu makaleye eklemeler yapabilirim. Çünkü Seçiciler konusu okadar geniş bir konu ki günlerce yazarak bile detaylarını bitiremeyiz.


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.