Tutorial Website :: Bagaimana Menggunakan JQuery ?

Lanjut lagi gan .. Atas permintaan seorang teman , saya akan memberikan penjelasan lanjutan mengenai bagaimana menggunakan JQuery .. Bila anda belum memiliki librarynya , silahkan download di JQuery.com .. Masalahnya untuk para pengguna blogger

, mereka tidak memiliki space untuk menghosting file library tersebut .. Kecuali kalau anda memiliki tempat hosting baik yang berbayar atau gratisan . Namun inilah indahnya open source .. Mbah google selain sebagai search engine , juga menyediakan repository online yang bisa di akses oleh siapa saja .. Caranya ? Kita cukup menambahkan direct url ke tempat penyimpanan repository tersebut .. Ketikan kode berikut pada edit html dari template blogger anda setelah kode </b:skin> ..

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

Perhatikan baik-baik kode diatas , http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js adalah url dari file tersebut .. 1.4.2 adalah versi library yang digunakan .. jquery.min.js adalah file library yang anda butuhkan .. Sebenarnya ada dua type jenis library , compressed dan normal .. Namun fungsi keduanya sama saja , tidak ada perbedaan kecuali pada besarnya file compressed yang lebih kecil .. Setelah anda menyertakan url tersebut pada template blogger anda , maka anda telah siap berkreasi menggunakan JQuery pada blog anda ..

JQuery pun mengklasifikasikan file librarynya lebih spesifik .. JQuery.ui misalnya , adalah library yang khusus menangani masalah user interface ..  Dan masih banyak sub-library dari JQuery yang anda bisa gunakan .. Nanti ya , dasarnya dulu sekarang ..

Okey , setelah anda menyertakan librarynya , bagaimana menggunakan JQuery tersebut ?

Back to history , html dan css .. Web memang tak bisa dipisahkan dari hal tersebut ..

Karena fungsi JQuery salah satunya adalah memodifikasi elemen yang terdapat pada website , maka elemen tersebut harus diperkenalkan terlebih dahulu kepada JQuery ..

Saya contohkan dengan pembuatan sebuah tombol .. Untuk membuat tombol pada halaman html , ketikan kode berikut ..

<input type="button" id="tombolAnda" value="tekan" />

Maksud dari kode tersebut adalah kita meminta halaman html untuk memasukan komponen input berupa tombol , dengan ID(identitas) tombolAnda dan teks yang tampil adalah tekan .. Contohnya seperti tombol di bawah ini ..

 

Coba anda tekan , apa yang terjadi ? Tentu saja tidak ada , wong belum di kasih event listener tuh tombol !! hehe ..

Untuk menambahkan perintah bila kode tersebut di tekan , saatnya JQuery beraksi , ketikan kode berikut dibawah kode tombol tadi ..

<script type="text/javascript">
$(document).ready(function(){
    $('#tombolAnda').click(function(){
        alert('hello JQuery!!');
     });
});
</script>

Penjelasan kode diatas adalah , bahwa bila document (html) siap , maka ketika tombolAnda ditekan akan menampilak alert berisi pesan Hello Jquery ..

Hati-hati dalam penulisan syntax anda .. Bila anda menamai ID anda sendiri (contohnya : tombolAnda) , maka anda harus memanggilnya dengan menambahkan tanda hash(kres :#) sebelum nama id anda .. seperti kode berikut $('#tombolAnda') , kenapa ? Tanya sama John Resig yang bikin tuh library :D ..

Okey , setelah menambahkan kode tersebut , lalu apa yang terjadi bila tombol ditekan ?

Coba saja tekan tombol dibawah ini ..

 

Muncul alert ? Tentu saja .. Kira-kira begitulah dasar penggunaan JQuery ..Banyak hal yang lebih kompleks dari sekedar memunculkan alert menggunakan JQuery .. Kita bisa memodifikasi elemen website kita menjadi lebih cantik dan atraktif ..

Hosh , sekian tutorial kali ini .. Semoga anda lebih paham mengenai JQuery .. Pada dasarnya , JQuery lebih mudah dari javascript , berterimakasihlah kepada John Resig . Cheers Brothers!!

Simak Juga Tutorial Lainnya: