Section Artikel
Set Konten- teks (), html (), dan val ()
Kita akan gunakan tiga metode yang sama seperti get untuk mengatur konten:
teks() – Mengatur atau mengembalikan konten teks dari elemen yang dipilihhtml() – Mengatur atau mengembalikan konten elemen yang dipilih (termasuk markup HTML)val() – Mengatur atau mengembalikan nilai bidang formulir
Contoh berikut menunjukkan cara menyetel konten dengan metode jQuery text(), html() dan val():
Contoh :
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Donald Duck"); }); }); </script> </head> <body> <p id="test1">Ini paragraph 1.</p> <p id="test2">Ini paragraph 2.</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1">Set Text</button> <button id="btn2">Set HTML</button> <button id="btn3">Set Value</button> </body> </html>
Fungsi Callback untuk text(), html() dan val()
Ketiga metode jQuery di atas: text (), html () dan val (), juga hadir dengan fungsi callback. Fungsi callback memiliki dua parameter, yaitu : indeks elemen saat ini dalam daftar elemen yang dipilih dan nilai asli (lama). Kemudian kita dapat mengembalikan string yang ingin digunakan sebagai nilai baru dari fungsi tersebut.
Contoh berikut menunjukkan text() dan html() dengan fungsi callback:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#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 + ")";
});
});
});
</script>
</head>
<body>
<p id="test1">Ini <b>bold</b> paragraph.</p>
<p id="test2">Ini paragtap <b>bold</b> lain.</p>
<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>
</body>
</html>
Set Atribut – attr ()
Metode jQuery attr() juga digunakan untuk mengatur / mengubah nilai atribut.
Contoh berikut menunjukkan cara mengubah (mengatur) nilai atribut href di tautan:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
});
</script>
</head>
<body>
<p><a href="https://www.dosenit.com" id="dosen">dosenIT.com</a></p>
<button>Ubah value href</button>
<p>Arahkan mouse ke tautan (atau klik di atasnya) untuk melihat bahwa nilai atribut href telah berubah.</p>
</body>
</html>
Metode attr() berguna juga untuk menyetel beberapa atribut pada waktu yang sama.
Contoh berikut menunjukkan cara menyetel atribut href dan judul secara bersamaan:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
});
</script>
</head>
<body>
<p><a href="https://www.dosenit.com" title="some title" id="dosen">DosenIT.com</a></p>
<button>Ubah href dan title</button>
<p> Arahkan mouse ke tautan untuk melihat bahwa atribut href telah berubah dan atribut judul sudah disetel. </p>
</body>
</html>
Fungsi Callback untuk attr()
Metode jQuery attr(), juga dilengkapi dengan fungsi callback. Fungsi callback memiliki dua parameter,yaitu : indeks elemen saat ini dalam daftar elemen yang dipilih dan nilai atribut asli (lama). Kemudian kita dapat mengembalikan string yang ingin digunakan sebagai nilai baru dari fungsi tersebut.
Contoh berikut menunjukkan attr() dengan fungsi callback:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
});
</script>
</head>
<body>
<p><a href="https://www.dosenit.com" id="dosen">DosenIT.com</a></p>
<button>Ubah Nilai Href</button>
<p> Arahkan mouse ke atas tautan (atau klik di atasnya) untuk melihat bahwa nilai atribut href telah berubah. </p>
</body>
</html>
