jQuery merupakan sebuah framework dan cara baru dalam menuliskan kode JavaScript. JavaScript sendiri adalah bahasa pemrograman yang dapat bekerja di sebagian besar browser terbesar seperti Google Chrome, Mozilla Firefox, Safari, Internet Explorer (IE), Opera dan lainnya. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
jQuery disini hadir untuk mengoptimisasi dan meringkaskan cara penulisan library JavaScript sehingga dengan menggunakan jQuery kita dapat mempercepat perpindahan dokumen HTML, penanganan event (event handling), pembuatan animasi didalam web sehingga web kita tampak seperti flash, sampai dengan interaksi AJAX untuk pengembangan web yang modern dan cepat.
jQuery mempunyai lisensi dibawah GNU artinya jQuery merupakan aplikasi yang Open Source dan bebas di publikasikan oleh siapapun. Ukurannya juga cukup kecil yaitu sebesar 56 KB (compressed) sehingga menggunakan jQuery menjadi jauh lebih cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript Konvensional.
Bagaimana Cara jQuery bekerja?!
Apabila sebelumnya ada yang membaca blog saya tentang penggunaan ajax dengan metode javascript biasa,
disitu bisa dilihat untuk menuliskan fungsi ajax yang sederhana yaitu mengganti halaman tanpa merefresh browser kita bisa
menghabiskan 25 baris kode... WTF, cape deh!! nah dengan jQuery kita hanya perlu menuliskan bebarapa baris kode pendek
saja untuk membuat fungsi yang sama, makanya dengan jQuery we can Write Less and Do More.
Ok, sekarang kita akan mencoba membuat sebuah contoh implementasi jQuery pada HTML. Silahkan KLIK DISINI (klik kiri ya jangan kanan :p ) untuk melihat demo jQuery, sekaligus menampilkan halaman penjelasan demo
Bagaimana caranya ?!
Pertama anda harus menyertakan framework jQuery di file HTML anda silahkan download framework jQuery di sini jQuery Latest. Apabila link jquery lates ditampilkan di browser berupa kode bukan berupa file download-an langsung aja save file tersebut dan simpan di folder percobaan, kode tersebut adalah framework jQuery. Anda bisa juga mendownload framework nya langsung di www.jquery.com
Sementara anda menunggu file di download, Saya terangkan salah satu fungsi di jQuery untuk mempermudah penggunaan ajax adalah fungsi load(), fungsi load sendiri memiliki tiga parameter yaitu load(url, params, callback).
url (string), merupakan URL dari file html yang akan di loadparams (object), merupakan pilihan optional yang digunakan untuk mengirim Data ke servercallback (function), merupakan pilihan optional tentang Fungsi yang akan dijalankan ketika data berhasil di load
Untuk mengimplementasikan fungsi load tersebut, langsung saja praktek dan buat tag HTML seperti dibawah
<html>
<head>
<title>JQuery Load Function</title>
</head>
<body>
<div>
<p><a href="commentshow.php" class="link"> Click Disini </a</p>
<p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>
</div>
<div id="HasilJQ"></div>
</body>
</html>
Apabila anda sudah mendownload framework sekarang mari kita hubungkan file jQuery dengan file HTML
<html>
<head>
<title>JQuery Load Function</title>
<script type="text/javascript" src="NamaFileJquery.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a.link").click(function() {
var url = $(this).attr("href");
$("#loadingimg").fadeIn();
$('#HasilJQ').load(url, function (){
$('#loadingimg').fadeOut();
});
return false;
});
});
</script>
</head>
<body>
<div>
<p><a href="fileyangdipanggil.php" class="link"> Click Disini </a</p>
<p><img id="loadingimg" src="../images/loader.gif" style="display:none"><p>
</div>
<div id="HasilJQ"></div>
</body>
</html>
Hanya itu saja sript yang digunakan untuk memanggil halaman tanpa merefresh content, sangat simple berkat jQuery. dibawah ini akan saya bahas satu persatu bagaimana cara kerja fungsi diatas
sebelum memulai membuat fungsi dalam jQuery maka kita harus terlebih dahulu membuat code sebagai berikut
$(document).ready(function() {
//tuliskan fungsi disini
$("a.link").click(function() {
var url = $(this).attr("href");
$("#loadingimg").fadeIn();
$('#HasilJQ').load(url, function (){
$('#loadingimg').fadeOut();
});
return false;
});
});
$(document).ready(function() berarti kita akan memulai script jQuery dan }); berarti mengakhiri script jQuery, jQuery kemudian akan membaca element html dan attribut yang diberikan, selanjutnya jQuery akan mengeksekusi setiap element dan atrribut bila kita memasukan element dan atribut tersebut kedalam fungsi yang kita buat
("a.link").click(function(); berarti kita memerintahkan jQuery untuk mengeksekusi element a dengan nama atribut class "link" (<a class="link"...) pada saat di klik.
var url = $(this).attr("href"); berarti kita mendefinisikan variable url dimana nilai variable didapatkan dari attribut a.link yaitu href ( <a href="fileyangdipanggil.php" class="link"> )
$("#loadingimg").fadeIn(); berarti kita memerintahkan jQuery untuk mengeksekusi element dengan nama attribut id "loadingimg" .fadeIn(); berarti memunculkan sedangkan .fadeOut(); sebaliknya.
('#HasilJQ').load(url); berarti kita memerintahkan jQuery untuk mengeksekusi element dengan nama attribut id "HasilJQ" dimana div dengan id tersebut akan dimanipulasi untuk menampilkan data URL yang telah kita definisikan variabelnya terlebih dahulu
return false; akhiri setiap fungsi dengan return false hal ini untuk mencegah data di refresh oleh browser pada saat element di eksekusi
OK ini merupakan awal dan pengantar jQuery, semoga bermanfaat. Untuk lebih lanjut tentang jQuery silahkan buka situs resminya http://www.jQuery.com
jquery-latest di save as aja setelah di click apabila yang muncul malah kode JavaScript. kode itulah jquery-latest simpan dengan ekstensi .js di directory percobaan kamu
jquery latest gak bisa di download
thanks omm tutornya..
@ficelo bisa aja
nanya donk..
saya pernah liat ada banyak fungsi jquery, semisalnya dalam satu halaman apakah bisa terdapat beberapa macam fungsi jquery, semcam "slider","fade","animation"??