jQuery berisi metode yang ampuh untuk mengubah dan memanipulasi elemen dan atribut HTML.
Section Artikel
Manipulasi DOM jQuery
Salah satu bagian yang sangat penting dari jQuery adalah kemungkinan untuk memanipulasi DOM.
jQuery hadir dengan sekumpulan metode terkait DOM yang membuatnya mudah untuk mengakses dan memanipulasi elemen dan atribut.
DOM = Model Objek Dokumen
DOM mendefinisikan standar untuk mengakses dokumen HTML dan XML:
“Model Objek Dokumen (DOM) W3C adalah platform dan antarmuka tanpa bahasa yang memungkinkan program dan skrip untuk mengakses dan memperbarui konten, struktur, dan gaya dokumen secara dinamis.”
Get Konten – text (), html (), dan val ()
Tiga metode jQuery yang sederhana, namun berguna untuk manipulasi DOM adalah:
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 mendapatkan konten dengan metode jQuery text() dan html():
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(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); </script> </head> <body> <p id="test">Ini adalah <b>bold</b> teks di sebuah paragrap.</p> <button id="btn1">Show Text</button> <button id="btn2">Show HTML</button> </body> </html>
Contoh berikut menunjukkan cara mendapatkan nilai kolom input dengan metode jQuery 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(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
<button>Show Value</button>
</body>
</html>
Get Atribut – attr()
Metode jQuery attr() digunakan untuk mendapatkan nilai atribut.
Contoh berikut menunjukkan cara mendapatkan nilai atribut href dalam sebuah 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(){
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="https://www.dosenit.com" id="w3s">DosenIT</a></p>
<button>Show href Value</button>
</body>
</html>
