Metode Chaining pada jQuery

JQuery menyediakan fitur lain yang disebut dengan metode Chaining - yang dapat kita gunakan untuk melakukan beberapa tindakan pada aturan elemen yang sama hanya dalam satu baris kode.

Hal tersebut dapat terjadi karena sebagian besar metode pada jQuery dapat mengembalikan suatu objek yang selanjutnya dapat digunakan untuk memanggil metode lain. Contoh:

<script>
    $(document).ready(function(){
        $(".start").click(function(){
            $("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
        });
        $(".reset").click(function(){
            $("p").removeAttr("style");
        });
    });  
</script>

Lihat kode di Github | Lihat Live Demo

Contoh di atas akan menunjukkan Chaining dengan tiga metode animate(). Ketika terdapat pengguna yang mengklik tombol, maka elemen <p> lebarnya akan menjadi 100%. Setelah perubahan lebar selesai, ukuran font mulai dianimasikan dan terakhir, animasi border akan dimulai.

Tips: Metode Chaining tidak hanya dapat membantu kita untuk menjaga agar kode jQuery tetap ringkas, tetapi juga dapat meningkatkan kinerja Script karena browser tidak harus menemukan elemen yang sama beberapa kali untuk melakukan suatu hal kedalamnya.

Kalian juga dapat memecah satu baris kode menjadi beberapa baris agar lebih mudah dibaca. Sebagai contoh, urutan metode dalam contoh di atas juga dapat ditulis seperti berikut:

<script>
    $(document).ready(function(){
        $(".start").click(function(){
            $("p")
                .animate({width: "100%"})
                .animate({fontSize: "46px"})
                .animate({borderWidth: 30});
        });
        $(".reset").click(function(){
            $("p").removeAttr("style");
        });
    });
</script>


Beberapa metode pada jQuery juga ada yang tidak mengembalikan objek. Umumnya, Setter - yaitu metode yang menetapkan beberapa nilai pada seleksi untuk mengembalikan objek  yang dapat kita gunakan untuk terus memanggil metode jQuery. Sedangkan Getter - yaitu mengembalikan nilai yang diminta, jadi kita tidak bisa terus memanggil metode pada nilai yang dikembalikan oleh Getter.

Contoh khas dalam skenario ini adalah metode html(). Jika tidak ada parameter yang diteruskan ke sana, konten HTML dari elemen yang dipilih akan dikembalikan sebagai pengganti objek. Contoh:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            // Kode ini akan bekerja
            $("h1").html("Hello World!").addClass("test");

            // Kode ini TIDAK akan bekerja
            $("p").html().addClass("test");
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

0 Komentar