jQuery ile Öğe Seçme

Merhaba,

jQuery, DOM elementlerini seçmek için XPath sözdizimini kullanır.

Dolayısıyla CSS kullandığınız veya XML'de düğümleri seçmek için XPath kullandığınız için jQuery ile elementleri nasıl seçeceğinizi zaten biliyorsunuz!

Şimdi bunları jQuery ile kullanalım 🚀

Class Seçici

İstenen class içindeki element, nokta(.) operatörü kullanılarak seçilir.

Aşağıdaki örnekte, title class'ına sahip tüm elementler seçilecek ve renkleri değiştirilecektir. 

<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>

<script>
$('.title').css('color','pink')
</script>

Sonraki derslerde css() methodunu tanıtacağız. 

Şimdilik yalnızca css() methodunun elementin stilini tanımlamak için kullanıldığını bilmeniz yeterlidir.

Id Seçici

İstenen id'ye sahip element, #(diyez işareti) operatörü kullanılarak seçilebilir. Bildiğimiz gibi, aynı id değeri HTML sayfasında yalnızca bir elemente verilebilir.

Aşağıdaki örnekte, title id'sine sahip element seçilecek ve rengi değiştirilecektir.

<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>

<script>
$('#title').css('color','pink')
</script>

Tag Seçici

İstenen tag içindeki element, yalnızca tag adı kullanılarak seçilebilir.

Aşağıdaki örnekte, span tag'ına sahip element seçilecek ve rengi değiştirilecektir.

<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>

<script>
$('span').css('color','pink')
</script>

Child Seçici

Bir elementin children öğelerini seçmek istiyorsak büyüktür(>) operatörünü kullanırız.

Aşağıdaki örnekte, istenen elementin tüm children öğeleri seçilecektir.

<p>
  <span>Hello</span>
  <span>CoddyKit</span>
</p>

<script>
$('p>span').css('color','pink')
</script>

Attribute Seçici

Bir elementin attribute değer taşıyıp taşımadığını kontrol ederek istenen elementi seçebiliriz.

Aşağıdaki örnekte, <a> tag'ına ve değeri _blank olan target attribute'una sahip elementler seçilir.

<a target="_blank" 
     href="http://coddykit.com">
   CoddyKit
 </a>

<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>

jQuery, XPath seçicilerinin yanı sıra bazı methodlar da sağlayarak DOM içinde seçim yapmayı kolaylaştırır.

Şimdi bunları öğrenelim.

parent() Methodu

jQuery tarafından sağlanan parent() methodunu kullanarak istenen elementin parent öğesini seçebiliriz.

Aşağıdaki örnekte, elementin parent öğesi seçilir ve parent elementinin metin rengi değiştirilir.

<div>
Parent Element Text
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
</div>

<script>
$ ('a').parent().css('color','pink')
</script>

children() Methodu

jQuery tarafından sağlanan children() methodunu kullanarak istenen elementin tüm children öğelerini seçebiliriz.

Aşağıdaki örnekte, elementin tüm children öğeleri seçilir ve children öğelerinin metin rengi değiştirilir.

<div>
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
<span>Children Element Text</span>
</div>

<script>
$ ('div').children().css('color','pink')
</script>

parents() Methodu

jQuery tarafından sağlanan parents() methodunu kullanarak istenen elementin üst öğelerini seçebiliriz.

Aşağıdaki örnekte, elementin üst öğesi seçilir ve parent elementinin metin rengi değiştirilir.

Bu methodun öğrendiğimiz diğer methodlardan farkı, bir parametre alabilmesidir.

Bu nedenle hangi üst öğenin seçileceğini belirtmek için parametre olarak bir XPath seçicisi göndeririz.

<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>

<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>

next() Methodu

next() methodu istenen elementin sonraki kardeşini seçer.

Aşağıdaki örnekte, a tag'ına sahip elementin kendisinden sonraki ilk kardeşi seçilir.

<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>

<script>
$ ('a').next().css('color','pink')
</script>

nextAll() methodu

nextAll() methodu, istenen elementin sonraki kardeşlerini seçmek için kullanılır.

Aşağıdaki örnekte, div tag'ına sahip elementten sonraki tüm kardeşler seçilir.

<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>


<script>
$ ('div').nextAll().css('color','pink')
</script>

siblings() Methodu

siblings() methodunu kullanarak istenen elementin tüm kardeşlerini seçebilirsiniz.

Aşağıdaki örnekte, p tag'ına sahip elementlerin tüm kardeşleri seçilir.

<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>

<script>
$ ('p'). siblings().css('color','pink')
</script>

prev() Methodu

prev() methodu, bir elementin önceki kardeşini seçmek için kullanılır.

a tag'ına sahip elementin kendisinden önceki ilk kardeşini seçer.

<span>Hello Coddy</span>
<div class="test"></div>

<script>
$ ('.test').prev().css('color','pink')
</script>

prevAll() methodu

prevAll() methodu, istenen elementin önceki kardeşlerini seçmek için kullanılır.

Aşağıdaki örnekte, div tag'ına sahip elementten önceki tüm kardeşler seçilir.

<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>

<script>
$('div').prevAll().css('color','pink')
</script>

Tebrikler 🎉

Bu bölümde DOM elementlerini seçmeyi öğrendik.

Sonraki bölümde DOM manipülasyonlarını öğrenmeye devam edeceğiz.