jQuery text() , html() ve val()

Merhabalar dostlar, bu dersimizde jQuery‘nin birbirinden güzel işlerimize çok yarayacak 3 metodunu örnekler ile anlatmaya çalışacağım. Bu metodlarımız text() , html() ve val() metodlarıdır.

Çok sık kullanacağımız bu metodların kullanımı oldukça kolaydır. Bu dersimizi iyi kavramanızı tavsiye ederim. her konunun altında canlı örnekler olacaktır. Sağ tarafta yer alan edit butonuna tıklayarak örnek üzerinde değişiklikler yapabilirsiniz. Şimdi text() metodu ile örneklerimize başlayalım.

jQuery text()

jQuery text() metodu seçtiğimiz Html elementinin içerisinde yer yazı değerini bizlere döndürür. Örnekle bu metodu anlamaya çalışalım.

Yukarıda yer alan örnek ile metodumuzu daha iyi anlamış olduk. Aynı zamanda bu metodumuz seçilen bir Html elementine belirtilen text yazısını ekleme görevide yapar. Örneğimizi inceleyelim.

$("#btn1").click(function(){
  $("#test1").text("merhaba");
});

Yukarıda butona tıklandığında id değeri test1 olan Html elementimize ” merhaba “ yazısını ekleyecektir.

jQuery html()

jQuery html() metodu seçtiğimiz Html elementinin içerisindeki html kodlarını bizlere döndürür. Örnekle bu metodu anlamaya çalışalım.

Yukarıda yer alan örnek ile metodumuzu daha iyi anlamış olduk.Aynı zamanda bu metodumuz seçilen bir Html elementine belirtilen html kodu ekleme görevide yapar. Örneğimizi inceleyelim.

$("#btn1").click(function(){
  $("#test1").html("<b>Merhaba</b>");
});

Yukarıda butona tıklandığında id değeri test1 olan Html elementimize “<b>Merhaba</b> “ html kodu ekleyecektir.

jQuery val()

jQuery val() metodu ise bir Html input içerisinde yer alan değeri bizlere geri döndürür. Oldukça sık kullanılır. Şimdi örnek ile daha iyi anlayalım.

Aynı zamanda bu metodumuz seçilen bir Html elementine belirtilen değer ekleme görevide yapar. Örneğimizi inceleyelim.

$("#btn1").click(function(){
  $("#test1").val("Dolly Duck");
});

Yukarıda butona tıklandığında id değeri test1 olan Html input text elementimize “Dolly Duck “ değerini ekleyecektir.

İşte bu kadar kolay dostlar. Bu metodları oldukça sık kullanacağız o yüzden iyi anlamakta fayda var. Örnekleri canlı olarak veriyorum. Eğer üzerinde değişiklikler yapmak isterseniz edit butonuna tıklayarak üzerinde çalışabilirsiniz.

Diğer bir dersimizde görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares