jQuery - Selectors(Seçiciler)

jQuery ile seçicileri kullanarak HTML elementlerini seçip, üzerinde işlemler yapabiliriz.

Seçicilerin mantığı HTML elementini çeşitli yönlerden(id,class,element,attribute) bulur ya da seçer.

Selectorlar $(' ') dolar işareti ile başlar ve tırnak işaretleri içerisine id, class gibi özelliğini yazarız.

Şimdi çeşitli selector kullanımlarını inceleyelim.

1-) Element adı ile seçme

<script>
        //Element adı ile seçme
        //this: seçtiğim elementi temsil eder
        $(document).ready(function () {
            $('div').click(function () {
                $(this).css('background-color', 'red').css('width', '200').css('height', '200')
            });
        });
</script>

Bu kodlar ile HTML sayfamızdaki bütün divleri seçecek ve üzerine tıklandığı - click() zaman div'in style özellikleri-css() değişecektir.

2-)Class ile seçme - Kullanımı CSS'deki class gibidir.  . ile kullanılır.

<script>
 $(document).ready(function () {
            $('.link').click(function () {
                $(this).text("jQuery");
            });
        });
</script>

Bu kodlar ile HTML sayfamızdaki class="link" olan elementleri seçecek ve üzerine tıklandığı - click() zaman ilgili sınıfın text("jQuery") text'i jQuery olarak değişecektir.

3-)Id ile seçme - Kullanımı CSS'deki idgibidir. # ile kullanılır.

<script>
  $(document).ready(function () {
            $('#paragraf').click(function () {
                $('.link').css("background-color", "yellow");
            });
        });
</script>

Bu kodlar ile HTML sayfamızdaki paragraf id'li elementleri seçip tıklandığı zaman link adındaki class'a ait element seçilecek ve link'in style özellikleri değişecektir.

4-)Attribute ile seçme

<script>
 $(document).ready(function () {
            $('[src]').click(function () {
                $(this).hide(2000).show(2000);
            });
        });
</script>

Bu kodlar ile HTML sayfamızdaki [src] atrribute'ye sahip elementin üzerine tıklandığı zaman ilgili element, 2 saniye gizlenip-hide() 2 saniye görüntülenecektir-show()

5-) child'ini seçme

<script>
  $(document).ready(function () {
            $('ul li:first-child').css('background-color', 'red').hide(500).show(500);
        });
</script>

Bu kodlar ile ul elementinin ilk li elementini bulup style özelliğini değiştirip, bu elementi yarımşar saniye gizleyip gösterecektir.

6-):nth-child() ile seçme

:nth-child(even) çift sayılı elementler
:nth-child(odd) tek sayılı elementler
:nth-child(3n) 3'ün katı olan elementler
:nth-child(2) 2. element

Parantez içine yazdığımız değere göre değişiklik yapacağımız elementleri belirtiriz.

7-)  $("*") ile seçmek

Bu selector kullanıldığı zaman, bütün elementleri seçip üzerinde değişiklik yapılacağı anlamına gelir.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("*").hide();
    });
});
</script>

Bu kodlar,HTML sayfasında button elementine tıklandığı zaman bütün elementler gizlenecektir.-hide()

Diğer seçici tipleri

$("this") : Bulunduğu HTML elementini temsil eder

<script>
        //Element adı ile seçme
        //this: seçtiğim elementi temsil eder
        $(document).ready(function () {
            $('div').click(function () {
                $(this).css('background-color', 'red').css('width', '200').css('height', '200')
            });
        });
</script>

Bu kodlarda kullanılan yer sayfadaki bütün div'lerdir.

$("p.yazi") : p elementindeki yazi adındaki class'ı seçer. 

$("p:first") : Sayfadaki ilk p elementini seçer.