Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 302 Ders Programı
Sınava Gir

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

Lisans: Creative Commons 26.11.2020 tarihinde güncellendi
Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

İç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.

Sınava Gir