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: