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 🙂
Free Daily Nerd Tutorials 
bang,,makasih tutornya
ane bookmark dlu ntar ane praktek 😀
:sorry lagi byk kerjaan !!
iya kk ^_^
nanti tutorial lainnya menyusul 😀