Kamis, 26 Mei 2011

Latihan Menggunakan jQuery

Bagaimana menggunakan jQuery?

- 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>

- 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>

- 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>

- 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>

- Lalu simpan filenya dengan nama japarus.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 Menoba ..

Tidak ada komentar:

Posting Komentar