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).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.
0 komentar:
Posting Komentar
Komentar Spam / Link aktif tidak akan muncul di kotak komentar.