Sudah banyak postingan dari berbagai macam Blog yang menjelaskan mengenai apa itu JQuery, bahkan sangat lengkap sekali. Mulai dari siapa yang mengembangkan, pada tahun berapa, sampai pada tanggal release-nya. Jadi kalau bicara masalah sejarahnya maka bisa anda jumpai banyak Blog di dunia ini. Di sini saya ingin membuat perbedaan, maksudnya saya akan menggunakan penjelasan yang mudah-mudahan bisa diterima oleh para pemula atau yang lagi baru belajar mengenai JQuery (bagi yang mahir mending jangan baca he ... ).
JQuery merupakan salah satu library dari JS yang berfungsi untuk membuat sebuh tampilan halaman HTML menjadi cantik dan dinamis dengan kode yang mudah dan sederhana tetapi tidak "lemot" karena tidak melakukan load sebuah halaman.
Tahapan pertama adalah pelajari dulu yang namanya tag HTML dan JavaScript (mahir lebih bagus) karena cikal-bakalnya ya dari sini.
Gimana udah dipelajari belum .................... ???
Kalau sudah berikutnya usahakan untuk mengetahui konsep DOM (Document Object Model). Saya akan mencoba menjelaskan konsep DOM secara dasar agar mudah diterima (mudah-mudahan tidak menjadi salah arti). Konsep DOM adalah sebuah konsep dimana setiap komponen yang terdapat dalam halaman HTML mempunyai ciri khusus seperti atribut ID yang akan dikenali oleh semua interface browser sebagai sebuah object dengan sifat Hierarki.
Contoh penggunaan DOM :
<html> <head><title>Contoh Penggunaan DOM</title></head> <body> <div id="lblJudul">Hallo Friend</div> <script type="text/javascript"> alert(document.getElementById("lblJudul").innerHTML); </script> </body>
</html>
Kalau sudah maka sekarang sebagai Latihan pertama akan saya beri contoh perbandingan code dengan JavaScript dan JQuery seperti di bawah ini :
<html> <head>
<title>JQuery Lesson 1</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
function pakejava() {
var judul="Dirubah pake JavaScript";
document.getElementById("lbljudul").innerHTML=judul;
var nama="JavaScript";
document.getElementById("txtnama").value=nama;
}
function pakejquery() {
var judul="Dirubah pake JQuery";
$("#lbljudul").text(judul);
var nama="JQuery";
$("input#txtnama").val(nama);
}
</script>
</head> <body> <div id="lbljudul">Isikan secara lengkap</div>
<input type="text" id="txtnama">
<p>
<input type="button" value="Pake JavaScript" onClick="pakejava();">
<input type="button" value="Pake JQuery" onClick="pakejquery();">
</p>
</body>
</html>
Gimana sekarang, apakah anda sudah memahami apa itu JQuery ???
OK untuk selanjutnya silahkan kembangkan sendiri latihan sesuai dengan keinginan anda.
Terima kasih,
