Halo teman-teman semuanya, di artikel kesembilan ini, kita akan belajar tentang Method Chaining di jQuery. Ini adalah salah satu fitur keren yang membuat kode jQuery jadi lebih singkat, rapi, dan mudah dibaca.
Dengan method chaining, kita bisa memanggil beberapa method jQuery secara berurutan pada elemen yang sama tanpa harus menuliskannya berulang-ulang.
Apa Itu Method Chaining?
Secara sederhana, method chaining memungkinkan kita menulis kode seperti ini:
$("#box").css("color", "white").css("background", "blue").slideUp(1000).slideDown(1000);
Bandingkan dengan cara tanpa chaining:
$("#box").css("color", "white");
$("#box").css("background", "blue");
$("#box").slideUp(1000);
$("#box").slideDown(1000);
Dengan chaining, kode kita jadi lebih ringkas dan efisien.
Contoh Sederhana Method Chaining
$("#pesan")
.text("Selamat datang!")
.css("color", "green")
.fadeIn(500)
.delay(1000)
.fadeOut(500);
Dalam contoh di atas:
.text() mengubah teks elemen.css() mengatur warna teks.fadeIn() menampilkan elemen.delay() memberi jeda.fadeOut() menyembunyikan elemen
Semua dijalankan berurutan pada elemen yang sama.
Studi Kasus: Chaining pada Button Click
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Method Chaining</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#kotak {
width: 200px;
height: 200px;
background-color: red;
color: white;
line-height: 200px;
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="kotak">Box</div>
<button id="animasi">Jalankan Animasi</button>
<script>
$(document).ready(function() {
$("#animasi").click(function() {
$("#kotak")
.slideUp(500)
.slideDown(500)
.css("background-color", "green")
.text("Sudah berubah!");
});
});
</script>
</body>
</html>
Kesimpulan
Dengan method chaining, kita bisa menulis kode jQuery yang lebih efisien dan enak dibaca. Ini sangat berguna saat kita ingin menjalankan banyak aksi berurutan pada elemen yang sama.
Di artikel berikutnya, kita akan mulai membahas AJAX di jQuery, yang memungkinkan kita mengirim dan mengambil data dari server dengan mudah.
Terima Kasih