jQuery adalah Library atau kumpulan kode JavaScript siap pakai. Keunggulan menggunakan jquery dibandingkan dengan javascript standar, yaitu menyederhanakan kode javascript dengan cara memanggil fungsi - fungsi yang disediakan oleh jquery. Javascript sendiri merupakan bahasa scripting yang bekerja di sisi client/browser sehingga website bisa lebih interaktif.
Jquery pertama kali dirilis tahun 2006 oleh john resig. Jquery menjadi sangat populer hingga telah digunakan pada banyak website termasuk website kelas dunia seperti Google, Amazon, Twitter, ESPN, dan lain-lain.
Ada banyak sebab jquery menjadi sangat populer, diantaranya :
- Jquery kompatible dengan banyak browser.
- Jquery mendukung semua versi CSS.
- Ukuran jquery sangat kecil, sekitar 20kb.
- Dokumentasi jquery yang lengkap.
- Dukungan komunitas terhadap jquery.
- Tersedianya plugin jquery yang sangat beragam.
Sebab terakhir di atas merupakan salah satu alasan utama mengapa banyak pengembang website menggunakan jquery. Dengan tersedianya beragam plugin jquery ini, semakin memudahkan pengembang website menggunakan jquery untuk berbagai keperluan.
Kalau fungsi dari jquery adalah menyerdehanakan kode javascript, plugin jquery berfungsi menyederhanakan kode jquery itu sendiri. Karena itu, dengan plugin jquery, akan jauh lebih simpel dan ringkas dalam penulisan kode javascript.
Cara menggunakan plugin jquery hampir sama dengan cara menggunakan jquery biasa. Misalnya, pada jquery cycle plugin untuk membuat sebuah image slideshow seperti di bawah ini :
1. Panggil library jquery dan jquery plugin di antara tag <head> pada file html.
.<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
</head>
<body>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
</head>
<body>
</body>
</html>
2. Buat content-nya.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
</head>
<body>
<div id="slideshow">
<img src="beach1.jpg" width="250" height="250" />
<img src="beach2.jpg" width="250" height="250" />
<img src="beach3.jpg" width="250" height="250" />
<img src="beach4.jpg" width="250" height="250" />
<img src="beach5.jpg" width="250" height="250" />
</div>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
</head>
<body>
<div id="slideshow">
<img src="beach1.jpg" width="250" height="250" />
<img src="beach2.jpg" width="250" height="250" />
<img src="beach3.jpg" width="250" height="250" />
<img src="beach4.jpg" width="250" height="250" />
<img src="beach5.jpg" width="250" height="250" />
</div>
</body>
</html>
3. Panggil method jquery plugin-nya dan atur parameternya jika ada.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow')..cycle({
fx: 'fade',
});
});
</script>
</head>
<body>
<div id="slideshow">
<img src="beach1.jpg" width="250" height="250" />
<img src="beach2.jpg" width="250" height="250" />
<img src="beach3.jpg" width="250" height="250" />
<img src="beach4.jpg" width="250" height="250" />
<img src="beach5.jpg" width="250" height="250" />
</div>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow')..cycle({
fx: 'fade',
});
});
</script>
</head>
<body>
<div id="slideshow">
<img src="beach1.jpg" width="250" height="250" />
<img src="beach2.jpg" width="250" height="250" />
<img src="beach3.jpg" width="250" height="250" />
<img src="beach4.jpg" width="250" height="250" />
<img src="beach5.jpg" width="250" height="250" />
</div>
</body>
</html>
Begitu sederhana kita bisa membuat sebuah image slideshow dengan plugin jquery. Jika kita hanya menggunakan jquery biasa tanpa plugin, pasti jauh lebih rumit kode-nya. Apalagi jika kita menggunakan javascript standar. Dengan plugin jquery, kita tidak perlu pusing memikirkan kerumitan kode jquery tersebut, cukup kita tahu method apa yang harus dipanggil beserta parameternya.
Comment Now
0 komentar