Metode Chaining
JQuery menyediakan fitur kuat lain yang disebut metode chaining yang memungkinkan kita untuk melakukan beberapa tindakan pada set elemen yang sama, semua dalam satu baris kode.
Ini dimungkinkan karena sebagian besar metode jQuery mengembalikan objek jQuery yang selanjutnya dapat digunakan untuk memanggil metode lain. Berikut contohnya.
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30}); }); }); </script>
Contoh di atas menunjukkan metode chaining three animate(). Ketika seorang pengguna mengklik tombol pemicu, hal itu akan memperluas <p> ke 100% width. Setelah perubahan width selesai, font-size mulai dianimasikan dan setelah selesai, border animation akan dimulai.
Kalian juga dapat memecah satu baris kode menjadi beberapa baris agar lebih mudah dibaca. Misalnya, urutan metode dalam contoh di atas juga dapat ditulis sebagai:
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p") .animate({width: "100%"}) .animate({fontSize: "46px"}) .animate({borderWidth: 30}); }); }); </script>
Beberapa metode jQuery tidak mengembalikan objek jQuery. Secara umum, setter yaitu metode yang menetapkan beberapa nilai pada pemilihan yang mengembalikan objek jQuery, yang memungkinkan kalian untuk dapat terus memanggil metode jQuery pada pilihan kalian. Sedangkan getter mengembalikan nilai yang diminta, jadi kalian tidak bisa terus memanggil metode jQuery pada nilai yang dikembalikan oleh getter.
Contoh yang sering terjadi pada skenario ini adalah metode html(). Jika tidak ada parameter yang diteruskan ke sana, konten HTML dari elemen yang dipilih dikembalikan sebagai pengganti objek jQuery.
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ // This will work $("h1").html("Hello World!").addClass("test"); // This will NOT work $("p").html().addClass("test"); }); }); </script>