Days
Hours
Minutes
Seconds
Pada tutorial sebelumnya, kita sudah belajar tentang Callback Function untuk menjalankan kode secara berurutan setelah suatu aksi selesai. Kali ini, kita akan mempelajari teknik yang tidak kalah penting dan sering digunakan dalam jQuery untuk menulis kode yang lebih ringkas dan mudah dibaca: Chaining Function.
Chaining Function (atau metode chaining) adalah kemampuan jQuery untuk memanggil beberapa metode (fungsi) secara berurutan pada objek yang sama dalam satu baris kode tunggal. Ini dimungkinkan karena sebagian besar metode jQuery mengembalikan objek jQuery itu sendiri, sehingga kamu bisa langsung memanggil metode lain setelahnya.
Bayangkan kamu ingin menyembunyikan sebuah elemen, lalu memudarkannya, dan kemudian menampilkan pesan. Tanpa chaining, kamu mungkin akan menulisnya seperti ini:
$("#elementSaya").slideUp("slow");
$("#elementSaya").fadeOut("fast");
$("#elementSaya").text("Elemen sudah pergi!");
Dengan chaining, kamu bisa melakukannya jauh lebih rapi:
$("#elementSaya").slideUp("slow").fadeOut("fast").text("Elemen sudah pergi!");
Terlihat lebih bersih dan efisien, bukan?
Konsep dasarnya adalah setiap metode jQuery yang berpartisipasi dalam chain mengembalikan objek jQuery yang sama setelah operasi yang diminta selesai. Ini memungkinkan metode berikutnya untuk beroperasi pada elemen yang sama.
Analogi: Bayangkan kamu sedang memancing di pantai Malang. Kamu melempar kail (selector), menangkap ikan (elemen), lalu kamu bisa langsung membersihkan ikan itu, memotongnya, dan menggorengnya dalam satu “rantai” aksi pada ikan yang sama, tanpa harus mengambil ikan itu lagi dan lagi. 🎣
Mari kita buat sebuah div yang akan disembunyikan, lalu dipudarkan, dan kemudian digeser ke bawah.
<!DOCTYPE html>
<html>
<head>
<title>Chaining Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#kotakAksi {
width: 150px;
height: 150px;
background-color: #FFC107; /* Kuning */
border: 2px solid #FFA000;
margin: 20px;
text-align: center;
line-height: 150px;
font-family: sans-serif;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<button id="mulaiChaining">Mulai Chaining</button>
<div id="kotakAksi">Ini Kotak</div>
<p id="pesanStatus"></p>
<script>
$(document).ready(function(){
$("#mulaiChaining").click(function(){
$("#kotakAksi")
.slideUp(1000) // Geser ke atas (sembunyi) dalam 1 detik
.fadeOut(500) // Lalu memudar (sembunyi lebih lanjut) dalam 0.5 detik
.slideDown(1000, function(){ // Lalu geser ke bawah (tampil) dalam 1 detik
// Ini adalah callback untuk efek terakhir
$("#pesanStatus").text("Semua efek chaining selesai!");
});
});
});
</script>
</body>
</html>
Penjelasan:
#kotakAksi..slideUp(1000) akan menyembunyikannya.$("#kotakAksi") lagi, kita langsung memanggil .fadeOut(500)..slideDown(1000).slideDown() akan dijalankan setelah semua efek dalam chain ini selesai (yaitu, setelah slideUp, fadeOut, dan slideDown semuanya berakhir). Ini penting: callback hanya berlaku untuk metode di mana ia didefinisikan.
Chaining juga sangat efektif untuk menggabungkan efek dengan manipulasi CSS atau HTML.
<!DOCTYPE html>
<html>
<head>
<title>Chaining CSS & HTML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#myBox {
width: 100px;
height: 100px;
background-color: #673AB7; /* Ungu */
margin: 20px;
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<button id="ubahBtn">Ubah Kotak</button>
<div id="myBox">Original</div>
<script>
$(document).ready(function(){
$("#ubahBtn").click(function(){
$("#myBox")
.css("background-color", "red") // Ubah warna latar
.slideUp(500) // Geser ke atas
.slideDown(500) // Geser ke bawah
.html("Teks Baru!") // Ganti konten HTML
.delay(1000) // Jeda 1 detik (hanya untuk efek)
.animate({width: "200px", height: "50px"}, "slow"); // Animasi properti CSS
});
});
</script>
</body>
</html>
Penjelasan Tambahan:
.css("background-color", "red"): Mengubah properti CSS..html("Teks Baru!"): Mengubah konten HTML di dalam div..delay(1000): Ini adalah metode khusus chaining yang hanya berlaku untuk antrean animasi. Ia akan menunda eksekusi animasi berikutnya dalam chain selama 1000 milidetik (1 detik). Metode lain seperti css() atau html() tidak akan tertunda oleh delay()..animate(): Metode ini memungkinkan animasi properti CSS kustom, yang akan kita bahas lebih detail di tutorial mendatang.
Namun, penting untuk diingat bahwa chaining yang terlalu panjang bisa jadi sulit dibaca juga. Gunakan secara bijak untuk menjaga keterbacaan kode.
Dengan menguasai chaining, kamu akan menulis kode jQuery yang lebih elegan dan efisien. Ini adalah salah satu fitur paling disukai dari jQuery. Pada tutorial berikutnya, kita akan membahas cara memanipulasi HTML/DOM secara lebih mendalam. Sampai jumpa di tutorial selanjutnya!
Berikut adalah gambar sampul yang saya buat untuk artikel tutorial tentang chaining function jQuery.
Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek
