jQuery içerik ve özellik ayarlamak

İçeriği ayarlamak - text(), html() ve val()

Önceki bölümdeki üç aynı yöntemi kullanarak içeriği ayarlayacağız:

  • text() - Seçilen elementin metin içeriğini ayarlamak veya döndürmek
  • html() - Seçilen elementin içeriğini ayarlamak veya döndürmek (HTML işaretleri de dahil)
  • val() - Form alanlarının değerini ayarlamak veya döndürmek

Aşağıdaki örnek, text(), html() ve val() yöntemlerini kullanarak içeriği nasıl ayarladığınızı gösterir:

Örnek

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

Kişisel olarak deneyin

text(), html() ve val() geri çağrı fonksiyonları

Üstteki üç jQuery yöntemi: text(), html() ve val(), aynı zamanda geri çağrı fonksiyonlarına sahiptir. Geri çağrı fonksiyonu iki parametre içerir: seçilen element listesindeki mevcut elementin alt indeksi ve eski (eski) değer. Sonra fonksiyon yeni değer olarak döndürebilirsiniz.

Aşağıdaki örnek, geri çağrı fonksiyonunu içeren text() ve html() yöntemlerini gösterir:

Örnek

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Eski metin: " + origText + " Yeni metin: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Eski html: " + origText + " Yeni html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Kişisel olarak deneyin

Özellik Ayarlama - attr()

jQuery attr() yöntemi, özellik değerlerini ayarlamak ve değiştirmek için de kullanılır.

Aşağıdaki örnek, bağlantıdaki href özelliğinin değerini nasıl değiştirdiğini gösterir:

Örnek

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

Kişisel olarak deneyin

attr() yöntemi, aynı anda birden fazla özellik ayarlamanıza da izin verir.

Aşağıdaki örnek, href ve title özelliklerini aynı anda nasıl ayarladığını gösterir:

Örnek

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com jQuery Eğitimi"
  });
});

Kişisel olarak deneyin

attr() geri çağrı fonksiyonu

attr() yöntemi, geri çağrı fonksiyonunu da sağlar. Geri çağrı fonksiyonu iki parametre içerir: seçilen eleman listesindeki mevcut elemanın dizin numarası ve orijinal (eski) değer. Sonra fonksiyonun yeni değeri olarak döndüreceğiniz bir dize döndürür.

Aşağıdaki örnek, attr() yönteminin geri çağrı fonksiyonunu içeren bir gösterimdir:

Örnek

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

Kişisel olarak deneyin

jQuery HTML Referans El Kitabı

jQuery HTML yöntemlerinin tam içeriği hakkında bilgi almak için aşağıdaki referans el kitabına gidin: