jQuery memungkinkan pengembang web untuk mengubah atribut dan nilai elemen HTML melalui metode-metode seperti “.attr()”, “.val()”, dan “.text()”.
Berikut adalah beberapa contoh penggunaan metode-metode tersebut:
- Mengubah nilai atribut dari elemen yang dipilih:
$("img").attr("src", "new-image.jpg");
- Mengambil nilai atribut dari elemen yang dipilih:
var srcValue = $("img").attr("src");
- Mengubah nilai dari elemen input:
$("input").val("Hello World");
- Mengambil nilai dari elemen input:
var inputValue = $("input").val();
- Mengubah isi teks dari elemen yang dipilih:
$("p").text("Hello World");
- Mengambil isi teks dari elemen yang dipilih:
var textValue = $("p").text();
Dalam contoh di atas, metode “.attr()”, “.val()”, dan “.text()” digunakan untuk mengubah atribut dan nilai elemen HTML pada halaman web.
Ini hanya beberapa contoh dari banyak metode yang tersedia dalam jQuery untuk mengubah atribut dan nilai elemen HTML. Pengembang web dapat memilih metode yang sesuai dengan kebutuhan dan memanfaatkan metode-metode tersebut untuk membuat halaman web yang interaktif dan dinamis.
Contoh Full Kode
Berikut adalah contoh full kode mengubah atribut dan nilai elemen HTML menggunakan JQuery:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button#change-src").click(function(){
$("img").attr("src", "new-image.jpg");
});
$("button#change-input").click(function(){
$("input").val("Hello World");
});
$("button#change-text").click(function(){
$("p").text("Hello World");
});
});
</script>
</head>
<body>
<button id="change-src">Change Image Src</button>
<img src="old-image.jpg">
<br><br>
<button id="change-input">Change Input Value</button>
<input type="text" value="Old Value">
<br><br>
<button id="change-text">Change Text</button>
<p>Old Text</p>
</body>
</html>
Dalam contoh di atas, kode JQuery menunggu halaman selesai dimuat menggunakan metode “.ready()”, lalu menangkap event “click” pada tombol-tombol dan mengubah atribut dan nilai elemen HTML sesuai dengan tugas masing-masing tombol. Misalnya, tombol “Change Image Src” akan mengubah src atribut dari elemen <img>; tombol “Change Input Value” akan mengubah nilai dari elemen <input>; dan tombol “Change Text” akan mengubah isi teks dari elemen <p>.
