Dengan jQuery, kita bisa menyatukan tindakan / metode.
Chaining memungkinkan kita menjalankan beberapa metode jQuery (pada elemen yang sama) dalam satu pernyataan.
Metode jQuery Chaining
Sampai sekarang kita telah menulis pernyataan jQuery satu per satu (satu demi satu).
Namun, ada teknik yang disebut chaining, yang memungkinkan kita menjalankan beberapa perintah jQuery, satu demi satu, pada elemen yang sama.
Tip: Dengan cara ini, browser tidak harus menemukan elemen yang sama lebih dari sekali.
Untuk merangkai suatu tindakan, kita cukup menambahkan tindakan tersebut ke tindakan sebelumnya.
Contoh berikut merangkai metode css(), slideUp(), dan slideDown(). Elemen “p1” pertama-tama berubah menjadi merah, kemudian bergeser ke atas dan kemudian bergeser ke bawah:
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(){ $("#p1").css("color", "red").slideUp(2000).slideDown(2000); }); }); </script> </head> <body> <p id="p1">jQuery itu menyenangkan!!</p> <button>Klik</button> </body> </html>
Kita akan dapat menambahkan lebih banyak panggilan metode jika diperlukan.
Tip: Saat merangkai, baris kode bisa menjadi sangat panjang. Namun, jQuery tidak terlalu ketat pada sintaksnya; kita bisa memformatnya seperti yang kita inginkan, termasuk jeda baris dan lekukan.
Hal ini juga bisa berfungsi dengan baik:
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(){
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery menyenangkan!!</p>
<button>Klik</button>
</body>
</html>
jQuery membuang spasi ekstra dan mengeksekusi baris di atas sebagai satu baris kode yang panjang.
