Mengenal jQuery

Apa itu jQuery? jQuery adalah semacam library untuk javascript, library ini menyimpan banyak sekali fungsi-fungsi dasar javascript untuk memanipulasi elemen HTML, membuat event, animasi, dan transfer data dengan AJAX. lebih jelasnya lihat di website jquery.com.

Untuk menggunakan library ini, cukup download library berupa file .js nya, download saja di websitenya jquery.com, pilih yang versi minimum-nya. Setelah punya filenya tempatkan file tadi satu folder dengan file html, di contoh nama filenya jquery-1.6.1.min.js dan sisipkan pada tag script di html kamu, lihat contoh

<html>
<head>
 <title>Belajar jQuery</title>
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head> 
<body>
 
</body>
</html>

Fungsi jquery selalu menggunakan $. Misal untuk element html pada semua tag $lt;P> maka kita dapat meggunakan selektor

$("p");

Untuk mengganti semua isi dalam tag <P> dengan sesuatu dapat kita gunakan.

$("p").html("Semua tag P akan diganti tulisannya dengan ini");

Contoh dibawah ini akan mengubah isi semua tag <P> pada dokument

<html>
<head>
 <title>Belajar jQuery</title>
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head> 
<body>
 <p>Isi tag P pertama</p>
 <p>Isi tag P kedua</p>
 <p>Isi tag P kedua</p>
 
 <script type="text/javascript">
  $("p").html("Semua tag P akan diganti tulisannya dengan ini");
 </script>
</body>
</html>

Hasilnya :

Untuk yang tanpa script tampilannya adalah

Selektor lain selain tag yaitu untuk elemen dengan id tertentu atau elemen dengan class tertentu, untuk yang dengan id tertentu menggunakan.

$("#nama_id");

dan untuk yang kelas tertentu gunakan

$(".nama_kelas");

Contoh penerapannya:

<html>
<head>
 <title>Belajar jQuery</title>
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head> 
<body>
 <p>Isi tag P pertama</p>
 <p id="betmen">Isi tag P dengan id=betmen</p>
 <p class="robin">Isi tag P dengan class=robin</p>
 <p>Isi tag P keempat</p>
 <div class="robin">Isi div dengan class=robin</div>
 
 <script type="text/javascript">
  $("#betmen").html("Elemen dengan id='betmen' isinya aku ganti ini");
  $(".robin").html("Semua elemen dengan class='robin' isinya aku ganti ini");
 </script>
</body>
</html>

Hasilnya :

Selain mengubah isi element masih banyak lagi fungsi yang bisa dilakukan.. Lanjut posting selanjutnya saja ^^