jQuery, I Love You Full!

- Agustus 26, 2009

Di postingan sebelumnya saya membahas Prototype, sebuah framework Javascript ciamik untuk manipulasi DOM dan AJAX. Kali ini saya iseng-iseng coba sebuah framework Javascript yang sudah kesohor juga yaitu jQuery. kalau menurut hemat saya, jQuery punya model syntax yang lebih elegan dibandingkan dengan Prototype, hal ini bisa kita lihat dalam model object jQuery yang lebih simple, terutama dalam penanganan event. Penanganan event di jQuery nemungkinkan kita benar-benar memisahkan antara layer tampilan dengan layer logic pemrograman javascript.

Perbedaan mendasar antara jQuery dengan Prototype adalah, fungsi $ pada jQuery menerima argumen string Selector CSS atau XPath dan selalu mengembalikan objek jQuery dalam bentuk Array atau List, sedang pada Prototype fungsi $ hanya menerima string ID dari element yang akan kita manipulasi dan mengembalikan object DOM yang sudah di-extend oleh metode-metode Prototype (walaupun sebenarnya Prototype punya fungsi yang serupa dengan $-nya jQuery, yaitu fungsi $$ dan juga metode class Element, select, yang juga menerima argument string Selector CSS atau XPath). IMHO hal ini membuat jQuery menjadi lebih efisien, karena semua metode jQuery (dan juga semua metode plugins-nya) sudah pasti mengolah Array atau List objek DOM jQuery.

Contohnya, untuk me-register event memunculkan box alert apabila ada link dengan id 'klikSaya' di-klik, kita cukup menulis kode seperti ini pada bagian HEAD dokumen HTML kita atau bisa juga pada bagian awal BODY dokumen HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
$(document).ready(function() {
    $('#klikSaya').click(function(evt) {
        alert('Hallooowww anda telah meng-klik saya!');
    });
});
</script>
</head>

Dan pada BODY dokumen HTML, kita cukup menuliskan kode seperti ini :

<body>
<a id="klikSaya" href="#">Klik Saya Donk Ahhh!</a>
</body>
</html>

Apalah artinya aplikasi Web 2.0 tanpa AJAX, rasanya kurang lengkap tanpa metode nyang satu ini. jQuery menyediakan API AJAX yang cukup lengkap untuk AJAX. Contoh di BODY dokumen HTML kita punya seperti ini:

<body>
<a id="klikAJAX" href="#">Klik Saya Buat Munculin Konten dari AJAX di bawah ini :</a>
<div id="ajaxContainer">&nbsp;</div>
</body>
</html>

Maka di bagian HEAD kita bisa menuliskan kode Javascript seperti ini :

$(document).ready(function() {
    $('#klikAJAX').click(function(evt) {
        var content = $.ajax({ url: "kontenAJAX.php", async: false }).responseText;
        // perhatikan opsi 'async', apabila diset false, maka semua event lain di browser di-block
        // sehingga tidak ada proses AJAX dilakukan bersamaan
        $('#ajaxContainer').html(content);
    });
});

Sangat mudah bukan?

jQuery juga sudah menyediakan metode-metode untuk animasi dasar, seperti fadeIn, FadeOut, pullDown, pullUp, hide, show dan animate. Contohnya bisa dilihat sebagai berikut :

Klik Saya Donk!

Makkkk!!! gampang kali!! kode untuk efek animasi di atas hanya begini saja :

$(document).ready(function() {
    $('a.show-hidden').click(function(evt) {
        evt.preventDefault();
        $('.hidden-object').slideDown("normal");
    });
 
 
    $('a.hide-hidden').click(function(evt) {
        evt.preventDefault();
        $('.hidden-object').slideUp("normal");
    });
});

Seperti halnya Prototype, jQuery didesain agar penulisan kode semakin ringkas dan elegan, yang pada akhirnya bisa memperkecil ukuran file kode Javascript kita. Hal ini didapat dengan penerapan Command Chaining. Setiap hasil fungsi $ bisa di-chaing atau digabung dengan fungsi-fungsi jQuery lain. Misalnya bisa kita lihat pada contoh kode berikut :

// temukan semua tag 'A' dibawah element DOM dengan ID 'menu'
// dan daftarkan event 'click' sekaligus event 'mouseover'
// dan juga sekaligus set style CSS dari setiap tag 'A' yang ditemukan
// dengan display = block
$('#menu').find('a').click(function(evt) {
    // lakukan sesuatu untuk setiap tag 'A' disini
    // ketika di-klik
}).mouseover(function(evt) {
    // lakukan sesuatu untuk setiap tag 'A' disini
    // ketika cursor melewati tag 'A'
}).css('display', 'block');