Set Content - text(), html() , dan val()
Kami akan menggunakan tiga metode yang sama dari halaman sebelumnya untukmengatur konten:
- text() - Mengatur atau mengembalikan konten teks elemen yang dipilih
- html() - Mengatur atau mengembalikan isi dari elemen yang dipilih (termasuk markup HTML)
- val() - Mengatur atau mengembalikan nilai kolom 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");
});
Cobalah sendiri " Sebuah Fungsi Callback untuk text(), html() , dan val()
Semua dari tiga metode jQuery di atas: text(), html() , dan val() , juga datang dengan fungsi callback. Fungsi callback memiliki dua parameter: indeks dari elemen saat ini dalam daftar elemen yang dipilih dan yang asli (lama) nilai. Anda kemudian kembali string yang ingin Anda gunakan sebagai nilai baru dari fungsi.
Contoh berikut menunjukkan text() dan html() dengan fungsi callback:
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 + ")";
});
});
Cobalah sendiri " Set Atribut - attr()
JQuery attr() metode ini juga digunakan untuk menetapkan / mengubah nilai atribut.
Contoh berikut menunjukkan bagaimana mengubah (set) nilai href atribut dalam link:
Contoh
$("button").click(function(){
$("#w3s").attr("href", "http://www.w3ii.com/jquery");
});
Cobalah sendiri " The attr() metode juga memungkinkan Anda untuk mengatur beberapa atribut pada waktu yang sama.
Contoh berikut menunjukkan cara mengatur kedua href dan title atribut pada saat yang sama:
Contoh
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3ii.com/jquery",
"title" : "w3ii jQuery Tutorial"
});
});
Cobalah sendiri " Sebuah Fungsi Callback untuk attr()
JQuery Metode attr() , juga datang dengan fungsi callback. Fungsi callback memiliki dua parameter: indeks dari elemen saat ini dalam daftar elemen yang dipilih dan yang asli (lama) nilai atribut. Anda kemudian kembali string yang ingin Anda gunakan sebagai nilai atribut baru dari fungsi.
Contoh berikut menunjukkan attr() dengan fungsi callback:
Contoh
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
jQuery HTML Referensi
Untuk gambaran lengkap dari semua metode jQuery HTML, silahkan ke kami Referensi / CSS jQuery HTML .