- Download library jQuery langsung dari websitenya, Di http://jquery.com . Pilih versi jQuery yang diinginkan.
- Simpan file jquery, misalnya di D:\latihan. Lalu buat dokumen baru (*.html) yang isinya sebagai berikut:
<html>
<head><title>Latihan jQuerytitle>
<head>
<body>
<body>
<html>
<head><title>Latihan jQuerytitle>
<head>
<body>
<body>
<html>
- Selanjutnya kita panggil library jQuery diantara tag head.
<html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
<head>
<body>
<body>
<html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
<head>
<body>
<body>
<html>
- Sebagai contoh, kita akan membuat dua buah tombol yang akan mengontrol sebuah gambar, berikut contoh skripnya:
<html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
head>
<body>
<button class="semmbunyi">Sembunyikanbutton>
<button class="tampil">Tampilkanbutton>
<p><img id="foto" src="fotomu.jpg">p>
body>
html>
<head><title>Latihan jQuerytitle>
<script type="text/javascript" src="jquery-1.4.js">script>
head>
<body>
<button class="semmbunyi">Sembunyikanbutton>
<button class="tampil">Tampilkanbutton>
<p><img id="foto" src="fotomu.jpg">p>
body>
html>
- Kemudian buat skrip jQuery dan sesuaikan dengan id atau class yang telah kita definisikan pada langkah sebelumnya, berikut contoh skripnya:
<html>
<head><title>Latihan jQuerytitle>
<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">Sembunyikanbutton>
<button class="tampil">Tampilkanbutton>
<p><img id="foto" src="fotomu.jpg">p>
body>
html>
<head><title>Latihan jQuerytitle>
<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">Sembunyikanbutton>
<button class="tampil">Tampilkanbutton>
<p><img id="foto" src="fotomu.jpg">p>
body>
html>
Lalu simpan filenya dengan nama javascript.html. Untuk melihat hasilnya, tinggal dobel-klik saja pada filenya, maka akan dibuka pada browser default kita, Atau Klik Kanan Open with firefox
Lihat Hasil nya, Selamat Mencoba Sobat..
