jQuery - Tetapkan Konten dan Atribut
Atur Konten - teks(), html(), dan val()
Kami akan menggunakan tiga metode yang sama dari halaman sebelumnya untuk mengatur konten :
text()- Mengatur atau mengembalikan konten teks dari elemen yang dipilihhtml()- Mengatur atau mengembalikan konten elemen yang dipilih (termasuk markup HTML)val()- Menetapkan atau mengembalikan nilai bidang formulir
Contoh berikut menunjukkan cara mengatur konten dengan jQuery text(), html(), dan val()metode:
Contoh
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Fungsi Panggilan Balik untuk text(), html(), dan val()
Ketiga metode jQuery di atas: text(), html(), dan val(), juga dilengkapi dengan fungsi panggilan balik. Fungsi panggilan balik memiliki dua parameter: indeks elemen saat ini dalam daftar elemen yang dipilih dan nilai asli (lama). Anda kemudian mengembalikan string yang ingin Anda gunakan sebagai nilai baru dari fungsi tersebut.
Contoh berikut menunjukkan text()dan html()dengan fungsi panggilan balik:
Contoh
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
Setel Atribut - attr()
Metode jQuery attr()juga digunakan untuk mengatur/mengubah nilai atribut.
Contoh berikut menunjukkan cara mengubah (mengatur) nilai atribut href di tautan:
Contoh
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
Metode attr()ini juga memungkinkan Anda untuk mengatur beberapa atribut secara bersamaan.
Contoh berikut menunjukkan cara menyetel atribut href dan title secara bersamaan:
Contoh
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
Fungsi Panggilan Balik untuk attr()
Metode jQuery attr(), juga dilengkapi dengan fungsi panggilan balik. Fungsi panggilan balik memiliki dua parameter: indeks elemen saat ini dalam daftar elemen yang dipilih dan nilai atribut asli (lama). Anda kemudian mengembalikan string yang ingin Anda gunakan sebagai nilai atribut baru dari fungsi.
Contoh berikut menunjukkan attr()dengan fungsi panggilan balik:
Contoh
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
Latihan jQuery
Referensi HTML jQuery
Untuk gambaran lengkap tentang semua metode HTML jQuery, silakan kunjungi Referensi HTML/CSS jQuery kami .