Benefit, dan Cara Menggunakan JQuery Method Chaining ~ Nyintak

Method chaining adalah suatu teknik yang dapat digunakan untuk menyederhanakan kode dalam sebuah skenario yang melibatkan pemanggilan beberapa fungsi pada objek yang sama berturut-turut. Berikut adalah contoh bagaimana Anda dapat menggunakan metode chaining ketika menggunakan jQuery.

Contoh penggunaannya :

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#btnClick').click(function(){
                    $('li').css('color','blue').slideUp(1000).slideDown(1000).attr('title', 'Textarea Title');
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li>Indonesian</li>
            <li>Malaysian</li>
            <li>Thailand</li>
            <li>Myanmar</li>
            <li>Singapore</li>
        </ul>
        <input type="button" id="btnClick" value="Click to Execute!"/>
    </body>
</html>

Bagaimana Cara Kerjanya?

$('li') mengembalikan sebuah JQuery Collection object
Ketika method .css() dipanggil, method ini mengaplikasikan warna ke semua elemen yang ada dalam JQuery Collection Object dan mengembalikannya ke JQuery Collection Object lagi.
Kemudian method .SlideUp() dijalankan saat method .css() selesai mengembalikan elemen ke dalam JQuery Collection Object
Proses seperti di atas akan terus dijalankan hingga mencapai method final(terakhir)

Catatan :

method text()

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#btnClick').click(function(){
                    $('li').css('color','blue').text().slideUp(1000).slideDown(1000).attr('title', 'Textarea Title');
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li>Indonesian</li>
            <li>Malaysian</li>
            <li>Thailand</li>
            <li>Myanmar</li>
            <li>Singapore</li>
        </ul>
        <input type="button" id="btnClick" value="Click to Execute!"/>
    </body>
</html>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Sunday, 5 June 2016

Benefit, dan Cara Menggunakan JQuery Method Chaining

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels