Harapan Putra Blogspot - Artikel sebelumnya yaitu
Apa Kemampuan yang Dimiliki jQuery, dan kali ini kita akan belajar bagaimana menggunakan jQuery. Saya akan menjabarkan langkah-langkah detailnya sebagai berikut :
- Download library jQuery di http://jquery.com, silahkan pilih versi jQuery yang diinginkan, misalnya Development, kemudian klik tombol Download, nanti nama file yang terdownload adalah jquery-1.4.js.
- Simpan file jquery-1.4.js pada folder latihan anda, misalnya di C:\latih. Kemudian buat dokumen baru yang isinya berikut:
<html>
<head>
</head>
<body>
</body>
</html>
- Selanjutnya panggil library jQuery diantara tag <head>...</head>, maka sekarang skripnya menjadi (perhatikan teks yang ditebalkan):
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
</head>
<body>
</body>
</html>
- Sebagai contoh, kita akan membuat dua buah tombol yang akan mengontrol sebuah foto, contoh skripnya adalah (perhatikan teks yang ditebalkan) :
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js">
</script>
</head>
<body>
<button class="sembunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
<p><img id="foto" src="peluk.jpg" /></p>
</body>
</html>
- Selanjutnya, buat jQuery dan sesuaikan dengan id atau class yang telah kita definisikan pada langkah 4. Skripnya sebagai berikut (perhatikan teks yang ditebalkan) :
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".sembunyi").click(function(){
$("#foto").hide("slow);
});
$(".tampil").click(function(){
$("#foto").show("slow");
});
});
</script>
</head>
<body>
<button class="sembunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
<p><img id="foto" src="peluk.jpg" /></p>
</body>
</html>
Simpan filenya, misalnya dengan nama
pertama.html. untuk menjalankanya, Anda bisa langsung mengklik 2x pada nama filenya melalui Windows Explorer, maka hasilnya akan langsung tampil di browser. Untuk mencobanya, silahkan klik tombol
Sembunyikan dan
Tampilkan |
| Contoh |
O iya, mungkin Anda kurang paham dengan skrip-skrip jQuery yang telah kita buat pada latihan pertama.html, tapi nggak usah khawatir, karena pada artikel berikutnya akan dibahas mengenai dasar-dasar jQuery.
Catatan :
jQuery selalau merilis dua versi untuk librarynya, yaitu
Production dan
Development. Perbedaanya, ukuran file untuk versi Production lebih kecil dibandingkan Development. Karena, versi Production telah 'dimanpatkan', sehingga kodenya agak sulit dibaca. Sedangkang versi Development, isi filenya lebih mudah dibaca, sehingga versi ini diperuntukkan bagi developer yang tertarik mempelajari/memanipulasi fungsi-fungsi yang dimiliki oleh jQuery.
Saat artikel Bagaimana Menggunakan jQuery ini saya tulis, versi terbaru dari jQuery adalah
jQuery 1.5. jadi, nama file untuk versi production adalah
jquery-1.5.min.js. Sedangkan nama file untuk versi Development adalah
jquery-1.5.js.
Kalau boleh saya ringkas, sebenarnya hanya ada
tiga langkah pokok dalam menggunakan jQuery,
yaitu :
1. Panggil/load library jQuery
Buat objek beserta elemenya berupa id atau class di bagian body.
2. Buat skrip jQuery di bagian head untuk mengontrol objek berdasarkan elemenya.
Tulisan Terkait