JQuery kullanarak DOM elemanı seçmek

Meyve SepetiÖnünüzdeki meyve sepetinden sadece yeşil elmaları seçmek istediğimizde keşke burdada JQuery’nin selektörü olsa diyeceğimiz özelliğidir.

Bu özellik sayesinde sayfanızda bir veya birden fazla DOM elamanını JQuery kullanarak seçebilirsiniz. Zaten bu özelliği JQuery’nin en güçlü yanlarından birini oluşturur.

Web sayfanızda idye sahip olmayan elemanların tümünü seçmek için iki çeşit JQuery fonksiyonu kullanabilirsiniz. Bunlardan ilkinde CSS selektörü ve genel sellektör kullanır.

Örnek vermek gerekirse

1
2
3
4
5
6
7
8
9
10
<meta http-equiv="Content-Type" content="text-html; charset=UTF-8" />
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a><script type="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">// <![CDATA[
 
// ]]></script><script type="text/Javascript">// <![CDATA[
 alert('Sayfada toplam ' + $('a').length + ' link ( </a> )  var');
// ]]></script>

Yukardaki html sayfasını çalıştırdığınızda Sayfada toplam 5 link (</a>) var uyarısını alırsınız.

İkinci yöntem ise javascript kodu olan getElementByTagName fonksiyonunu jQuery fonksiyonuna atamak sureti ile gerçekleştirilir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text-html; charset=UTF-8" />
</head>
<body>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<a href='#'>link</a>
<script type="text/Javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/Javascript">
 alert('Sayfada toplam ' + $(document.getElementsByTagName('a')).length + ' link ( </a> )  var');
</script>
</body>
</html>

İlk örnek kod ile aynı çıktıyı verecektir. İlk örnek daha az kod yazılması açısından daha anlamlıdır.

JQuery konusunda eylemlerimiz devam edecektir.

Bir Cevap Yazın

Your email will not be published. Name and Email fields are required.

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>