Mustafa Çağatay KIZILTAN

8. Jquery HTML taglerinden veri alma

Çok sık olarak Jquery kullanarak HTML içerisindeki verileri çekmemiz onları jquery kodları arasında işlememiz ve tekrar html kodlarıyla ekranda sergilememiz gerekebilir. Bunun için özelleştirilmiş bir kaç tane metot var. Bunlar

  1. text(); , text(“set edilecek string”);
  2. html(); , html(“set edilecek string”);
  3. val();  , val(“set edilecek string”);
  4. attr(); , attr(“attribute ismi” , “set edilecek string”);

Eğer ki bu metodlara parametre gönderirseniz bu get yerine set işlemi yapmanız anlamına gelecektir. Parametre ile gönderdiğiniz string ilgili taglerin arasına yerleştirilecektir.

1. Text Metodu

Text metodu yakalanan tag içerisindeki text’i çekerken içerisinde yer alan iç html taglerini es geçer.

2. Html metodu

Html metodu yakalanan tag içerisindeki text’i çekerken içerisinde yer alan iç html taglerini de text olarak alır.

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

   $(document).ready(function () {

     $("#btn1").click(function () {      
      alert("text : " + $("#test").text());  // " text: Örnek bold yazı satırı "
        });

     $("#btn2").click(function () {  // " html : Örnek <b>bold</b> yazı satırı "
      alert("html : " + $("#test").html());
       });

   });

</script>

</head>
<body>
 
 <p id="test">Örnek <b>bold</b> yazı satırı </p>

 <button id="btn1">Text Metodu</button>
 <button id="btn2">Html Metodu</button>
 
</body>

</html>

3. Val metodu

Val metodu input textlerin içerisindeki değerleri çekmek için kullanılır.

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

$(document).ready(function () {
 $("button").click(function () {
 alert("Value : " + $("#test").val());

});

});

</script>

</head>
<body>
 
 <p>Name : <input type="text" id="test" value="Cagatay" /></p>
 <button>Show value</button>
 
</body>
</html>

4.  ATTR metodu

Etiketlerin attribute value’larını çekmeye yarar.

<script>
   $(document).ready(function(){
     $("button").click(function(){
     alert($("#w3s").attr("href"));   //https://www.w3schools.com
    });
   });
</script>

<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>   // ister href içerisindeki değeri istersek de id içerisindeki değeri çekebiliriz.