302: JQueryBaşlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

İçeriğe Erişme - text(), html(), and val()

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : web-programlama

Üç adet basit fakat çok faydalı metot sayesinde jQuery, DOM elemanlarını manipüle edebilir:

  • text() – seçilen elemanların metin içeriklerine atama yapar veya onlara erişerek işlem yapar.
  • html() – HTML işaretçileri de dâhil, seçilen elemanların içeriğini atar ya da onlara erişir.
  • val() – Form alanlarının değerine erişir veya onlara atama yapar.

Aşağıdaki örnek, içeriklere text() ve html() metotları ile nasıl erişileceğini gösteriyor:

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

Aşağıdaki örnekte ise jQuery val() metodu ile bir input alanına nasıl erişileceği görülmektedir:

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

Örnek HTML5 kodunda text ve HTML metodlarının kullanımını inceleyebilirsiniz:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                              $("#btn1").click(function(){
                                               alert("Text: " + $("#test").text());
                                               });
                              $("#btn2").click(function(){
                                               alert("HTML: " + $("#test").html());
                                               });
                              });
            </script>
    </head>
    
    <body>
        <p id="test">Turkcell Geleceği Yazanlarla<br>jQuery öğreniyorum</p>
        <button id="btn1">METNI GOSTER</button>
        <button id="btn2">HTML'I GOSTER</button>
    </body>
</html>

METNI GOSTER'e tıkladığınız zaman metin içerisinde yer alan HTML etiketleri olmadan metni ekrana basacaktır.

HTML'I GOSTER'e tıkladığınız zaman ise, metni HTML etiketleriyle birlikte ekrana yazacaktır.

Aşağıdaki HTML5 kodunda val() fonksiyonu kullanımı işlenmiştir:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                              $("button").click(function(){
                                                alert("Value: " + $("#test").val());
                                                });
                              });
            </script>
    </head>
    
    <body>
        <p>AD: <input type="text" id="test" value="JOHN VON NEUMANN"></p>
            <button>DEGERI GOSTER</button>
    </body>
</html>

DEGERI GOSTER dediğinizde ekrana metin kutusu içerisinde olan değeri basacaktır.