Pada artikel sebelumnya : Belajar jQuery : Pengertian, Fungsi Kegunaan Dan Kemampuan jQuery disebutkan bahwa jQuery adalah Javascript Library kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Secara sederhana fungsi JQuery adalah menyederhanakan kode Javascript.

Mengapa kita lebih memilih jQuery dibandingkan Javascript Library pendahulunya seperti Prototype, Mootools, YUI (Yahoo User Interface), dan Dojo? Dan Apa kemampuan yang dimiliki oleh jQuery? Anda akan menemukan jawabannya setelah mempelajari artikel dibawah ini, Lets begin Para calon programer Handal….

Contents show

Bagaimana Menggunakan jQuery?

Berikut akan saya jabarkan langkah-langkahnya sebagai berikut:

1. Download library jQuery di http://jquery.com. silahkan pilih versi jQuery yang diinginkan, misalnya PRODUCTION, kemudian klik tombol Download, nanti nama file yang terdownload adalah jquery-l.S.O.min. js.

2. Simpan file jquery-1.8.0.min.js pada folder latihan Anda, misalnya di C:\latih. Kemudian buat dokumen baru yang isinya seperti berikut:

</body>
</html>

Tips:
Sebaiknya gunakan editor seperti Pspad atau Dreamweaver, karena ketika Anda membuat dokumen HTML yang baru, kode-kode diatas akan terbentuk secara otomatis, jadi tidak perlu mengetiknya secara manual.

3.Selanjutnya panggil library jQuery diantara tag <head> … </head>, maka sekarang skripnya menjadi seperti berikut, perhatikan teks yang ditebalkan:

</body>
</html>

4. Sebagai contoh, kita akan membuat dua buah tombol yang akan mengontrol sebuah foto, contoh skripnya, perhatikan teks yang ditebalkan:

<html>
<head>
<script src=” jquery-1.8.0 .min. js”></script>
</head>
<body>
<button class=”sembunyi”>Sembunyikan</button>
<button class=”tampil”>Tampilkan</button>
<p><img id=”foto” src=”wa jah. jpg” /></p>
</body>
</html>

5. Selanjutnya, buat skrip jQuery dan sesuaikan dengan id atau class yang telah kita definisikan pada langkah 4. Skripnya sebagai berikut, perhatikan teks yang ditebalkan:

<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=”wajah.jpg” /></p>
</body>
</html>

Simpan filenya, misalnya dengan nama pertama.html. Untuk menjalankannya, 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.

Catatan:
jquery selalu merilis dua versi untuk library-nya, yaitu Production dan Development. Perbedaannya, ukuran file untuk versi Production lebih kecil dibandingkan Development. Karena, versi Production telah ‘dimanpatkan’, sehingga kodenya agak sulit dibaca, karena memang diperuntukkan bagi yang pengguna awam yang langsung ingin menggunakan library jQuery. Sedangkan versi Development, isi filenya lebih mudah dibaca, sehingga versi ini diperuntukkan bagi developer yang tertarik mempelajari/memanipulasi fungsi-fungsi yang dimiliki oleh jQuery.

Secara ringkas, sebenarnya hanya ada tiga langkah pokok dalam menggunakan jQuery, yaitu:

1. Panggil/load library jQuery.
2. Buat objek beserta elemennya berupa id atau class di bagian body.
3. Buat skrip jQuery di bagian head untuk mengontrol objek berdasarkan elemennya.

Untuk lebih jelasnya, secara visual dapat dilihat pada gambar Source Code Dibawah ini

<html>
<head>
<script type= “text/javascript” src=”1query-1.8.0.min.js”
</script> <script type=”text/javascript”>
$ (document). ready (function () {
$ . sembunyi”). click (function () (
$(”#foto”).hide(“alow”);
$(“.tampil”).click(function(){
$(“#foto”).show(“normal”);
}>;
});
</script> </head><body>
<button class=”sembunyi”>Sembunyikan</button>
<button c1ass= ” tampil ” >Tampilkan</button >
<p><img id=”foto” src=”wajah. jpg” /></p> </body>
</html>

Bagaimana Cara Kerja jQuery

Cara kerja jQuery dapat dijabarkan sebagai berikut, masih menggunakan contoh sebelumnya, yaitu pertama.html:

1. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua di halaman web, fungsi yang digunakan adalah:

$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
}

2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi Selector. Contoh skripnya:

$ (#foto”)
$ (” . sembunyi”)
$ (” . tampil”)

4. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya, operasi klik dan hide, dimana apabila tombol diklik, maka akan menyembunyikan elemen foto. Contoh skripnya:

$(“.sembunyi”).click(function(){
$ (“#foto”).hide(“slow”);
});

Dengan memahami cara kerja jQuery, akan mempermudah Anda mempelajari jQuery.

Apa yang Perlu Dipersiapkan?

Sebelum mempelajari jQuery, sebaiknya Anda sudah mengenal empat pengetahuan berikut:

Javascript, karena jQuery merupakan library Javascript, jadi bahasa dasamya imslilah mengacu kepada Javascript.
CSS, karena hampir secara keseluruhan nantinya jQuery akan mengontrol/ mrmanipulasi DOM dari CSS.
PHP dan MySQL, karena dalam buku ini akan dibahas bagaimana cara iiiengkolaborasikan jQuery dengan PHP dan MySQL.
Ajax, seperti halnya Javascript, jQuery mampu menyederhanakan perintah-perintah ajax yang cukup njelimet dan panjang.

Dari ke empat pengetahuan tersebut, hal yang paling mendasar yang haras Anda ketahui adalah CSS. mengenai DOM (Document Object Model). DOM itu layaknya seperti variabel (identitas/pengenal, elemen DOM didefinmikun menggunakan id dan class:

<button class=”sembunyi”>
<button class=”tampil”>
<img id=”foto” src=”wajah.jpg” />

Pada contoh tersebut, ada dua class, yaitu tampil dan sembunyi serta terdapat satu id, yaitu foto. Jadi, skrip jQuery yang kita buat harus sesuai dengan class dan id yang telah kita definisikan pada bagian body, misalnya untuk menampilkan foto yang disembunyikan, klik tombol Tampilkan, maka skrip jQuery yang dibuat harus sesuai dengan class tampil dan id foto, ilustrasinya dapat dilihat dibawah ini.

<html>
<head>
<script type= “text/javascript” src=”jquery-1.8.0min.js>
</script>
<sript type=“text/javascript”>
$(document), ready(function()f $(”.sembunyi”).click(function{){
$r#fotQ’) .hide (“alow”);
});
${”.tampil”) click(function(){
$(“#foto”) show (“normal”);
});
</script>

</head>
<body>
<button class =”sembunyi”>Sembunyikan </button>
<button class =”tampil”> Tampilkan </button>
<p> <img id=”foto” src=”wajah.jpg”/></p>
</body>
</html>

Disamping itu, jQuery juga bisa langsung memanipulasi tag-tag (X)HTML dan membuat sebuah komunikasi antar data yang biasanya dilakukan oleh Ajax.

Demikianlah beberapa kemampuan yang ditawarkan jQuery, tentang cara kerja dan cara menggunakan jQuery. Semoga artikel ini bisa menambah pengetahuan anda tentang dunia pemograman dan ilmu yang dibagikan dapat bermanfaat bagi pembaca. Sampai bertemu di postingan-postingan selanjutnya…

baca artikel lainnya..