Mengenal jQuery - Apa itu jQuery?

Mengenal jQuery - Apa itu jQuery?

BRITO.ID, BERITA JAMBI - jQuery, mungkin sudah tidak asing lagi bagi orang yang sering membuat sebuah website yang dinamis, dengan desain web yang hidup. Bagi yang belum tahu, jQuery adalah sebuah Library Javascript yang cepat dan ringkas yang mana dapat menyederhakan document traversing, event handling, animating, dan AJAX interactions untuk pengembangan web secara cepat.

Kali ini saya akan ngebahas ringkas mengenai jQuery. Untuk yang belum pernah, akan saya kenalkan jQuery itu apa, hehe..

Untuk Memulai JQuery

Supaya temen2 bisa menggunakan Jquery, silakan download Jquery (saat ini versi terakhir adalah v.1.3.2).

DOWNLOAD jQuery

Lalu simpan file jquery-1.7.2.min.js yang udah didownload ke folder javascript web punya kita.. misalnya di folder /js, maka nanti kita tinggal tambahkan script ini di dalam tag header:

<head>
...
<script src="js/jquery-1.7.2.min.js"></script>
...
</head>

Cara Menggunakan JQuery

<script>
$().ready(function(){
    $("#gambarku").hide();
});
</script>

Apa arti script di atas? 
Mungkin buat sahabat yang belum tau JQuery bakal terasa asing dan berkata “Bahasa apakah itu?”… tapi setidaknya pasti tau maksud script di atas. Ya, script di atas memerintahkan sebuah fungsi hide() untuk menyembunyikan sebuah elemen yang mempunyai ID = "gambar"..

Nah, itulah JQuery..
Menurut saya, enaknya memakai Jquery adalah perintah Javascript untuk berbagai elemen HTML bisa dideklarasikan terlebih dahulu, ID atau class apa yang ingin ‘dimainkan’… jadi nantinya kode tidak seperti ini,,,

<button class="tombol" onclick="hide('gambarku')">Sembunyikan Gambar</button>
<img id="gambarku" src="foto.jpg" />

Jika bentuk kodenya seperti itu, bagaimana jika si buttonnya ada 1000? tentu capek kan kita menambahkan atribut onclick=”hide()” di setiap button?  Selain itu, jika tidak menggunakan Jquery, kita harus membuat fungsi hide() terlebih dahulu, untuk menyembunyikan element…

Nah, dengan menggunakan Jquery, kita cuma buat suatu deklarasi yang mana “memerintahkan” bahwa semua elemen yang mempunyai class “tombol” jika diklik akan memanggil fungsi hide(). Selain itu, kita tidak usah bikin fungsi hide() lagi, karena semua fungsi untuk manipulasi elemen html sudah ada dalam JQuery, script Jquery-nya seperti ini:

<script>
$().ready(function(){
    $(".tombol").click(function(){
        $("#gambarku").hide();
    });
});
</script>

Lalu diikuti html yang sederhana seperti berikut:

<button class="tombol">Sembunyikan</button>
<img id="gambarku" src="foto.jpg" />

Jika tadi elemen dinyatakan dengan tanda “#”, script untuk class dinyatakan dengan tanda “.”. Jadi, .tombol berarti class=”tombol”, sedangkan #gambar berarti id=”gambar”, sama seperti deklarasi pada CSS, bagi yang sudah biasa CSS tentu saja lebih mudah menggunakan selector jQuery. (w2n)