19 Eylül 2016 Pazartesi

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

Merhaba arkadaşlar, bu yazımda kaldığımız yerden JQuery Selector' leri anlatmaya devam edeceğim. Lafı hiç uzatmadan başlayalım;


1) Form Elemanları Türüne Göre Seçim Yapmak

Bir önceki konuda HTML Tag' lere göre seçim yapar gibi kodlarımızı yazacağız fakat ek olarak filtreleme yapacağız.

$("input:text")
$("input:password")
$("input:button") şeklinde form elemanlarının türüne göre filtreleme yapabiliriz. Örnek yapacak olursak;


<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($("input:text").attr("id").tostring());
 
 });

 </script>

</head>
<title></title>
<body>
 <input type="text" id="txt1"/>
<input type="password" id="pw1"/>
<input type="text" id="txt2" />
</body></html>

Metodu incelersek;

  • alert() metodu bize sayfa açılışında mesaj verecektir.
  • $("input:text") ise form elemanlarından türü text olan objelerden ilkini seçecek,
  • attr("id") o objenin özelliklerinden "id" olanı bulup
  • toString() ise değerini bize döndürecektir.
İlerleyen zamanlarda yukarıdaki metodları daha detaylı şekilde inceleyeceğiz. Burada dikkat etmeniz gereken nokta, nasıl filtreleme yapıtğımızdır. Ek olarak filtreleme sonucunda sadece ilk objenin yakalanacak olmasıdır.


2) Görünürlük Durumuna Göre Filtreleme
Bir proje yaparken nelerle karşılaşacağımız belirli değildir. Bu yüzden her şeyi tam anlamıyla bilmesek de varolduklarını bilmeliyiz. Bu seferde bir filtreleme yöntemi kullanacağız. Örneğin;

$("div:hidden") şeklinde bir şeçim işlemi gerçekleştirebiliriz. Detaylı örnek verecek olursak;


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <style>

 .intro{
  display:none;
 }
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>

 <script>

 $(document).ready(function ()
 {

    alert($("div:none").attr("id").tostring());

 });

 </script>

</head>
<title></title>
<body>
<div id="testDiv" class="intro">
 <input type="text" id="txt1"/>
<input type="password" id="pw1"/>
<input type="text" id="txt2" />
</div>
</body></html>


Metodları incelersek;

  • alert() metodu sayfa hazır olduğunda mesaj verecektir,
  • $("div:hidden") gizlenmiş veya gösterilmeyen div' leri seçecek,
  • attr("id") o div' in ID' sini bulacak
  • ve toString() metodu ise bize metinsel ifade olarak dönüş yapacaktır.
Evet arkadaşlar genel olarak JQuery yardımıyla bir veya birden fazla DOM objesi seçmek istiyorsak bu yöntemleri kullanabiliriz. Tabi ki de bu yöntemlerden fazlası var hatta ve hatta kendi Selector yapınızı bile kurabilirsiniz eğer biraz incelerseniz.

Kaynak olarak;

Bir sonraki yazıda görüşmek üzere hoşça kalın.

Hiç yorum yok:

Yorum Gönder