Halo teman-teman semuanya, di artikel ketujuh ini, kita akan belajar tentang cara memanipulasi attribute dan class pada elemen HTML menggunakan jQuery.
Manipulasi attribute dan class ini sangat penting ketika kita ingin mengubah tampilan atau perilaku elemen secara dinamis, seperti menambahkan class untuk styling, mengganti src gambar, atau mengatur nilai atribut tertentu seperti href, alt, dan lainnya.
1. Manipulasi Attribute
-
.attr() - mengambil atau mengubah nilai atribut
Contoh: Mengambil atribut
var link = $("#tautan").attr("href");
console.log(link);
Contoh: Mengubah atribut
$("#tautan").attr("href", "https://santrikoding.com");
-
.removeAttr() - menghapus atribut
$("#tautan").removeAttr("target");
2. Manipulasi Class
-
.addClass() - menambahkan class
$("#box").addClass("highlight");
-
.removeClass() - menghapus class
$("#box").removeClass("highlight");
-
.toggleClass() - menambah atau menghapus class secara bergantian
$("#box").toggleClass("highlight");
-
.hasClass() - mengecek apakah elemen memiliki class tertentu
if ($("#box").hasClass("highlight")) {
alert("Box memiliki class highlight");
}
3. Contoh Lengkap HTML + jQuery
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Manipulasi Attribute dan Class</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
border: 2px solid orange;
}
</style>
</head>
<body>
<a id="tautan" href="https://example.com" target="_blank">Kunjungi Website</a>
<br><br>
<button id="ubahHref">Ubah Link</button>
<button id="hapusTarget">Hapus Target</button>
<br><br>
<div id="box">Ini adalah kotak</div>
<button id="tambahClass">Tambah Class</button>
<button id="hapusClass">Hapus Class</button>
<button id="toggleClass">Toggle Class</button>
<script>
$(document).ready(function() {
$("#ubahHref").click(function() {
$("#tautan").attr("href", "https://santrikoding.com");
});
$("#hapusTarget").click(function() {
$("#tautan").removeAttr("target");
});
$("#tambahClass").click(function() {
$("#box").addClass("highlight");
});
$("#hapusClass").click(function() {
$("#box").removeClass("highlight");
});
$("#toggleClass").click(function() {
$("#box").toggleClass("highlight");
});
});
</script>
</body>
</html>
Kesimpulan
Di artikel ini, kita telah belajar bagaimana cara mengambil, mengubah, dan menghapus attribute HTML, serta menambahkan, menghapus, dan mengganti class CSS menggunakan jQuery.
Di seri berikutnya, kita akan belajar tentang Traversal DOM di jQuery, yaitu cara berpindah dari satu elemen ke elemen lain di dalam struktur HTML.
Terima Kasih