Home > Uncategorized > Menggunakan jQuery

Menggunakan jQuery

Yups, ini merupakan lanjutan dari bagian yang pertama. Mangga atuh dibaca lagi 😉

Bagaimana menggunakan jQuery?

Yups, tak enak rasanya kalau membaca tanpa praktek, boring! So, mari kita coba latihan.

– Download library jQuery langsung dari websitenya, gratis kok! Di http://jquery.com . Pilih versi jQuery yang diinginkan. Untuk pemula, direkomendasikan untuk menggunakan versi Developmentnya, misalnya kita pilih versi 1.4, maka filenya nanti akan menjadi jquery-1.4.js

– Simpan file jquery-1.4.js di folder latihan kita, misalnya di D:\latihan. Lalu buat dokumen baru (*.html) yang isinya sebagai berikut:

[html]<html>
<head><title>Latihan jQuery</title>
</head>
<body>
</body>
</html>[/html]

– Selanjutnya kita panggil library jQuery diantara tag head.

[html]<html>
<head><title>Latihan jQuery</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
</head>
<body>
</body>
</html>[/html]

– Sebagai contoh, kita akan membuat dua buah tombol yang akan mengontrol sebuah gambar, berikut contoh skripnya:

[html]<html>
<head><title>Latihan jQuery</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
</head>
<body>
<button class="semmbunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
<p><img id="foto" src="fotomu.jpg"></p>
</body>
</html>[/html]

– Kemudian buat skrip jQuery dan sesuaikan dengan id atau class yang telah kita definisikan pada langkah sebelumnya, berikut contoh skripnya:

[html]<html>
<head><title>Latihan jQuery</title>
<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="semmbunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
<p><img id="foto" src="fotomu.jpg"></p>
</body>
</html>[/html]

– Lalu simpan filenya dengan nama Pertama.html. Untuk melihat hasilnya, tinggal dobel-klik saja pada filenya, maka akan dibuka pada browser default kita.

Coba deh klak-klik tombolnya untuk melihat hasil dari latihan pertama kita. Cukup indah bukan?

Selanjutnya kita akan mempelajari bagaimana cara kerja jQuery 🙂

Categories: Uncategorized
  1. 22 December 2010 at 17:34

    bang,,makasih tutornya
    ane bookmark dlu ntar ane praktek 😀
    :sorry lagi byk kerjaan !!

  2. AaEzha
    22 December 2010 at 17:46

    iya kk ^_^

    nanti tutorial lainnya menyusul 😀

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: