4. Selectors (Seçiciler)

HTML elemanlarına, elemanların etiketi (tag) , css sınıfı (class) , kimlik (id) ve isim (name) özellikleriyle ulaşılabilir.


1. HTML ELEMANINI SEÇME

  Jquery ile HTML elemanrına elemanların etiketleriyle erişebilirsiniz. Bu işlem için find() fonsiyonu kullanılır ve parametresine ulaşmak istenen etiket yazılır. Bunun sonucunda değişken o etiketlerin elemanlarından oluşan bir diziye dönmüş olur ve bir dizi gibi muamele yapılabilir.

 <html>
     <head>
       <script src="~/Scripts/jquery-1.10.2.js"></script>
         <script>

           $document.ready(function () {

           $.inputlar = $(document).find("input");
           // DİV İÇERİSİNDEKİ DİV'İ SEÇME : $('div div').html('Kiziltan');

           });

     </script>

   </head>
      <body>

       Adı : <input type="text" id="ad" />
       <br/>
       Soyad : <input type="text" id="soyad" />
 
       <div> Cagatay <div> Cagatay2 </div> </div>
       </body>

</html>

yukarıdaki kodun sonucu olarak $.inputlar değişkenimize input tagleri yerleşmiştir ve bir dizi haline dönmüştür.

$.inputlar[0]   –> ilk input tag’ini
$.inputlar[1]   –> ikinci input tag’ini  temsil etmektedir.

üzerlerinde işlem yapmak istersek örneğin id’lerine ulaşmak istersek.

$.inputlar[0].ad   –> ad
$.inputlar[1].soyad   –> soyad  değerini bize vermektedir.

2.CSS SINIFI (CLASS) ile SEÇME

Bu işlemi $(“.SınıfAdı”) tanımlamasıyla gerçekleştirebiliriz.  Sınıf adının başında nokta olması onun sınıf tanımı olduğunu destekler.

<html>
 <head>
 <script src="~/Scripts/jquery-1.10.2.js"></script> 
 <script>

$document.ready(function () {

$.kalinYazilar = $.(".yazikalin");

 });

</script>       
</head>      

<body>
  <div class="yazikalin" id="ad"></div>
  <div class="yazikalin" id="soyad"></div>

</body>

</html>

yukarıdaki kodun sonucu olarak $.inputlar değişkenimize input tagleri yerleşmiştir ve bir dizi haline dönmüştür. Unutulmaması gereken şey bizim burada class üzerinden yine tag’e ulaştığımızdır yani sonuç olarak yine bir tag elde ediyoruz.

$.inputlar[0]   –> ilk input tag’ini
$.inputlar[1]   –> ikinci input tag’ini    temsil etmektedir.

üzerlerinde işlem yapmak istersek örneğin id’lerine ulaşmak istersek.

$.inputlar[0].id–> ad
$.inputlar[1].id   –> soyad  değerini bize vermektedir.

Örnekler :

$('div.red '//class'ı red olan divleri seç.
$('.red').css({'font-size ':20px  });  //red classına css propertysi ekle.
$('.red  ul li.blue').css({'color' : ' #ppp'});  //red classinin yer aldığı tag'in içindeki ul taginin içindeki class'ı blue olan li tag'lerinin color'unu white yap


3. KİMLİK (ID) ile SEÇME

Sayfada id’si “ad” olan elemanlara $(“#ad”) tanımlamasıyla ulaşıp üzerinde işlem yapabiliriz.

$('#5th').css({'color' : 'red','background-color':'yellow'}); //5th id'sine sahip olan elementin yazı rengini kırmızı , arka plan rengini de sarı yap.
$('#5th , .blue').css({ 'color':'red'  , 'background-color':' yellow ' }); //id'si 5th etiketlerin ve .blue class'ına sahip olan etiketlerin yazı rengini kırmızı , arka plan rengini de sarı yap.
$('#5th , .blue, div div').css({'color' : 'red' ,'background-color':' yellow'}); //id'si 5th etiketlerin, .blue class'ına sahip olan etiketlerin ve div içindeki divlerin yazı rengini kırmızı , arka plan rengini de sarı yap.

4. İSİM (NAME) ile SEÇME

$(“[name=’ElemanınNameDeğeri’]”) tanımlamasıyla tag’lere nameleri üzerinden ulaşabiliriz. Örneğin, sayfada ismi “ad” olan bir elemana $(“[name=’ad’]”) tanımlamasıyla ulaşıp üzerinde işlem yapabiliriz. Aynı isme sahip birden fazla  $(“[name=’ad’]”)[0] şeklinde ulaşabiliriz.

  $document.ready(function ()
  { 
     $.ad= $.(" [ name=' ad '] ")[0].name; //ad
  });

5. HİYERARŞİK SEÇİCİLER

Hiyerarşik seçici modeli oluştururken seçici kısmına CSS’den bildiğimiz tüm hiyerarşik seçici modellerini koyabiliriz. 

 $('.topnav > li').css('color' : 'red');
 $('label + input').css('color,red').val("jquery değiştirdi"); //arka arkaya label'den sonra input geliyorsa onun özelliklerini değiştir.

https://www.w3schools.com/Jquery/jquery_selectors.asp