Mengenal JQuery

Sebuah website agar terlihat dinamis ( interaktif perubahan konten / datanya ) membutuhkan bahasa pemrograman, baik program di sisi server maupun di sisi client. JavaScript adalah program di sisi Client, anda bisa baca artikel mengenal javascript dan document object model untuk lebih memahami tentang JavaScript.

JQuery adalah kumpulan program JavaScript atau lebih dikenal library / pustaka JavaScript. Ada banyak library JavaScript yang tersedia di internet saat ini, sebagain besar adalah telah menggunakan teknologi AJAX ( ASynchronous JavaScript XML) dan dikenal dengan framework AJAX seperti YUI, ExtJS, Prototype , Script.aculo.us dan tentunya JQuery.

JQuery lebih populer karena telah banyak digunakan di beberapa website dan aplikasi web konten manajemen seperti Joomla, atau WordPress, dan banyak tersedia tutorial di internet yang dapat di pelajari.

Library JQuery dapat di download di websitenya jquery.com atau langsung di sini.

File JQuery adalah file skrip JavaScript, jika ingin menggunakan jquery pada dokumen web anda tambahkan skrip berikut pada tag<head>

 <head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
//  kode javascript yang menggunakan jquery ada disini
 </script>
 </head>
 <body>
<!-- isi kontent web ditambahkan disini -->
 </body>

Library JQuery akan dieksekusi pada sebuah dokumen web pada saat (event) setelah proses akses dokumen web melalui DOM telah sempurna diakses,
yaitu dengan menjalankan skrip javascript berikut ini :

$(document).ready(function() {
   // kode JQuery dilakukan disini ketika DOM telah siap ( dokumen telah diakses secara sempurna )
})

Berikut contoh menampilkan pesan alert menggunakan JQuery, pada saat menclick sebuah hyperlink.
1. Tambahkan dulu skrip berikut pada body dokumen

<a href="#">klik saya</a>

2. Dan berikut kode JavaScriptnya

$(document).ready(function() {
   $("a").click(function() {
     alert("Assalamulaikum, Selamat Belajar JQuery ");
   });
 });

3. Berikut skrip lengkapnya

<head>
 <title>Selamat Belajar JQuery</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">

$(document).ready(function() {
 $("a").click(function() {
 alert("Assalamulaikum, Selamat Belajar JQuery ");
 });
 });

 </script>
</head>
<body>
<a href="#">klik saya</a>
</body>

Post a Response