Cara Menggunakan Jquery

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:
1
2
3
4
5
<head>
...
<script src="js/jquery-1.7.2.min.js"></script>
...
</head>

Cara Menggunakan JQuery

1
2
3
4
5
<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,,,
1
2
<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:
1
2
3
4
5
6
7
<script>
$().ready(function(){
    $(".tombol").click(function(){
        $("#gambarku").hide();
    });
});
</script>
Lalu diikuti html yang sederhana seperti berikut:
1
2
<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 

0 Response to "Cara Menggunakan Jquery"

Post a Comment

Berkomentarlah dengan bijak

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel