jQuery Bilgi Değiştirme - jQuery Dersleri

jQuery Bilgi Değiştirme

Bir önceki derste bahsedilen üç yöntemi, nesnelerin değerlerini değiştirmek için de kullanabiliriz.

- text("eklenecek/değiştirilecek yazı") - Yazılar için
- html("eklenecek/değiştirilecek yazı") - HTML kodları dahil olan içerikler için
- val("eklenecek/değiştirilecek yazı") - Form nesneleri için

Aşağıdaki kodu deneyin.

JAVASCRIPT Kodu

<p id="test1">Bu bir paragraf</p>
<p id="test2">Bu diğer bir paragraf.</p>
<p>Form Veri Girişi:
<input type="text" id="test3" value="Bu da form verisi"></p>
<button id="btn1">Yazıyı değiştir</button>
<button id="btn2">HTML kodunu değiştir</button>
<button id="btn3">Form verisi değiştir</button>
<script>

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Merhaba Ziyaretçi!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>jQuery Dersleri'ne Hoş Geldiniz.</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("jQuery oldukça basit!");
  });
});
</script>

Bu bir paragraf

Bu diğer bir paragraf.

Form Veri Girişi:



Butonlara sırasıyla basarsanız. Önceden girilen değerlerin butonlara bastıkça değiştiğini göreceksiniz.

NOT: text() ve html() fonksiyonlarında bazen eski ve yeni değerlere ihtiyaç duyabiliriz. Bu durumda jQuery'de hazır bir callback fonksiyon kullanarak değişen değerleri kullanabiliriz. html() ve text() parantez içinde bir fonksiyon oluşturun:

JAVASCRIPT Kodu

function(i,origText){
   return "Eski yazı: " + origText + " 
Yeni yazı: Hello world! (index: " + i + ")"; 
}

attr() komutu da bir element özelliğini değiştirmek için kullanılabilir.

Aşağıdaki kod, button elementine tıklandığında id değeri "link" olan A elementinin HREF özelliğinin http://sitesi.web.tr/ olarak değişmesini sağlar:

JAVASCRIPT Kodu

$("button").click(function(){
   $("#link").attr("href","http://sitesi.web.tr/");
 });

attr() fonksiyonunda birden fazla niteliği aynı anda değiştirebilirsiniz. Bununla ilgili örnek kullanımı inceleyin:

Web Sitesi



Yukarıdaki örneğe göre hem HREF hem TITLE niteliklerini değiştirdik.