Turkcell | Geleceği Yazanlar

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

jQuery - HTML Elemanlarına İçerik ve Vasıf Atama

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

İçerik almakta (get) kullandığımız üç metodu şimdi de içerik atamak (set) için kullanacağız:

  • 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 bu metotların atama işleminde nasıl kullanılacağını gösteriyor:

$("#btn1").click(function(){
  $("#test1").text("GUZEL YURDUM");
});
$("#btn2").click(function(){
  $("#test2").html("<b>GUZEL YURDUM</b>");
});
$("#btn3").click(function(){
  $("#test3").val("HEY KOCA YURT");
});

Atama işlemine örnek HTML5 kodunu dikkatle inceleyelim:

<!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(){
                                               $("#test1").text("WEB 101");
                                               });
                              $("#btn2").click(function(){
                                               $("#test2").html("<b>WEB 201</b>");
                                               });
                              $("#btn3").click(function(){
                                               $("#test3").val("WEB 301");
                                               });
                              });
            </script>
    </head>
 
    <body>
        <p id="test1">ILK DEGISECEK IFADE</p>
        <p id="test2">IKINCI DEGISECEK IFADE</p>
        <p>VERI GIRISI: <input type="text" id="test3" value="UCUNCU DEGISECEK IFADE"></p>
            <button id="btn1">METNI ATA</button>
            <button id="btn2">HTML' I ATA</button>
            <button id="btn3">DEGER ATA</button>
    </body>
</html>

METNI ATA düğmesini tıkladığınızda WEB 101 ifadesi ILK DEGISECEK IFADE metninin yerine atanacaktır.

Aynı şekilde HTML'I ATA düğmesine tıklayınca da IKINCI DEGİSECEK IFADE'nin yerine WEB 201 ifadesi atanacaktır.

Son olarak DEGER ATA düğmesine tıklayınca UCUNCU DEGİSECEK IFADE'nin yerine WEB 301 ifadesi atanacaktır.