17 Eylül 2016 Cumartesi

JQuery Selectors - Seçiciler & text() Bölüm 1

Merhabalar, JQuery' ye kaldığımız yerden devam ediyoruz. Bildiğiniz gibi Jquery yapısı, bir veya birden fazla DOM objesini seçip bu objeleri manipüle etmeye dayanır. Hal böyle olunca Jquery bu objeleri seçebilmek için bir hayli yöntem sunmaktadır. Örneğin CSS selectorleri.


Bu yazıda en çok kullanılan selector'leri, örnekleriyle beraber sizlere anlatmaya çalışacağım. Selector'leri ne kadar yerinde ve mantıklı bir şekilde kullanırsak o kadar az kod yazarız.

İlk önce .text() metoduna bakacak olursak; .text() metodunun iki şekilde kullanım yolu vardır.

  • .text() metodu parametresiz bir şekilde kullanılırsa seçilen obje(ler)in metinini bize döndürecektir.
  • Tek seferde birden fazla obje seçildiyse, .text() metodu elementlerin metnini arka arkaya ekleyerek tek seferde bize verecektir.


Selector konusundaki en önemli noktalardan biri; JQuery yardımıyla DOM objesi veya objeleri seçildiğinde bu objelerden oluşan bir dizi elde edilir. Bu yüzden JQuery .text() metodu kullanıldığında hepsini göstermeye çalışır.

  • Eğer .text() metodu içerisine bir string yani metinsel ifade alırsa seçilen objenin metnine o string ifadeyi atayacaktır ve birden fazla seçildiği takdirde bütün elementlerin metni o string ifade olacaktır.

Her ne kadar anlamsız gelse de örneklerle birlikte daha anlaşılır olacaktır.

JQuery Selectors - Seçiciler

 1) Element Selector

$("elementName") şeklinde kullanılır. Sayfa içerisindeki elementlerin tag' lerine göre seçim yapmaya yarayan yöntemdir.
Böylece birden fazla elementi tek seferde elde edip manipüle edebiliriz.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.intro{
background-color:yellow;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script>
$(document).ready(function () 
   $("p").text("SQL- Defterim");
   
   alert($("p").text());
   
});
</script>
</head>
<title></title>
<body>
<p id="1">JQUERY</p>
<p id="2" class="intro" >Test Selector<p>
<p> Hello JQuery</p>

</body>
</html>

Metodları incelersek;

  • $("p").text("SQL- Defterim"); =>> HTML sayfası içerisindeki bütün "p" tagına sahip olan elementleri seçer ve metnini "sQL- Defterim" olarak değiştirir.
  • alert($("p").text()); =>> HTML sayfası içerisindeki bütün "p" tagına sahip olan elementleri seçer ve metnini mesaj olarak gösterir.

2) Multiple Element Selector

$("element1,element2,element3 ....") şeklinde kullanılmaktadır. HTML sayfasındaki belirtilen taglara sahip tüm objeleri seçer.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.intro{
background-color:yellow;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script>
$(document).ready(function () 
   alert($("p,div,table").text());
   
});
</script>
</head>
<title></title>
<body>
<p id="1">JQUERY</p>
<p id="2" class="" >Test Selector<p>
<p> Hello JQuery</p>
<div>div</div>
<table>table</table>
</body>
</html>
Metodu inceleyecek olursak;

  • $("p,div,table").text(); =>> P, div ve table taglerine sahip elementlerin metnini mesaj olarak gösterir.

3) Class Selector

$(".className") şeklinde kullanılır. HTML sayfası içerisinde ".className" adlı class'ı kullanan elementleri seçer.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.intro{
background-color:yellow;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script>
$(document).ready(function () 
   $(".intro").text("SQL- Defterim");
   
});
</script>
</head>
<title></title>
<body>
<p id="1">JQUERY</p>
<p id="2" class="intro" >Test Selector<p>
<p> Hello JQuery</p>

</body>
</html>


Metodu incelersek;
$(".intro").text("SQL- Defterim"); =>> ".intro" classını kullanan elementlerin metnini "SQL- Defterim" olarak değiştirecektir.

4) ID Selector

$("#ID") şeklinde kullanılır. HTML sayfası içerisindeki belirtilen ID' deki elementi seçer. ID her elemente özgü olacağı için bu selector ile sadece bir tane element seçilir.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.intro{
background-color:yellow;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script>
$(document).ready(function () 
   $("#1").text("SQL- Defterim");
   
});
</script>
</head>
<title></title>
<body>
<p id="1">JQUERY</p>
<p id="2" class="intro" >Test Selector<p>
<p> Hello JQuery</p>

</body>
</html>
 
Metodları incelersek;
 $("#1").text("SQL- Defterim"); =>> ID' si 1 olan elementin metnini "SQL- Defterim" olarak değiştirecektir.

Yukarıda sıralanan selectorler en yaygın olarak kullanılan selectorlerdir. İkinci bölümde özellikle filtreleme yapabileceğimiz selectorlere de yer vereceğim. Takipte kalın.


Hiç yorum yok:

Yorum Gönder