jQuery menyetel konten dan atribut

Menyetel konten - text(), html() dan val()

Kami akan menggunakan 3 metode yang sama seperti di bab sebelumnya untuk menyetel konten:

  • text() - Menyetel atau mengembalikan konten teks elemen yang dipilih
  • html() - Menyetel atau mengembalikan konten elemen yang dipilih (termasuk tag HTML)
  • val() - Menyetel atau mengembalikan nilai form field

Contoh di bawah ini menunjukkan bagaimana cara menyetel konten melalui metode text(), html() dan val():

Contoh

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

Coba sendiri

Fungsi kembalian text(), html() dan val()

3 metode jQuery yang ada di atas: text(), html() dan val(), juga memiliki fungsi kembalian. Fungsi kembalian memiliki 2 parameter: indeks elemen saat ini dalam daftar elemen yang dipilih, serta nilai asli (lama). Lalu kembalikan nilai string yang ingin Anda gunakan melalui fungsi.

Contoh di bawah ini menunjukkan penggunaan fungsi callback dalam text() dan html():

Contoh

$("#btn1").click(function(){
  $("#test1").text(function(i, nilaiAsli){
    kembalikan "Old text: " + nilaiAsli + " New text: Hello world!
    (indeks: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i, nilaiAsli){
    kembalikan "Old html: " + nilaiAsli + " New html: Hello <b>world!</b>
    (indeks: " + i + ")";
  });
});

Coba sendiri

Atur atribut - attr()

Metode attr() jQuery juga digunakan untuk mengatur/mengubah nilai atribut.

Contoh di bawah ini menunjukkan bagaimana cara mengubah (mengatur) nilai atribut href dalam tautan:

Contoh

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

Coba sendiri

Metode attr() juga memungkinkan Anda mengatur beberapa atribut secara bersamaan.

Contoh di bawah ini menunjukkan bagaimana cara mengatur atribut href dan title secara bersamaan:

Contoh

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

Coba sendiri

Fungsi callback attr()

Metode attr() jQuery juga menyediakan fungsi callback. Fungsi callback memiliki dua parameter: indeks elemen yang dipilih dalam daftar, serta nilai (nilai lama). kemudian kembalikan string yang baru yang Anda inginkan melalui fungsi.

Contoh di bawah ini menunjukkan penggunaan metode attr() dengan fungsi callback:

Contoh

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

Coba sendiri

Referensi HTML jQuery

Untuk informasi lengkap tentang metode HTML jQuery, silakan kunjungi referensi berikut: