Mengenal JQuery | Harian Cheyuz

Mengenal JQuery – Tutorial JQuery Dasar

Posted on 10. Dec, 2009 by Cheyuz in Tutorial, _other, jquery

OK, karena postinganku kemaren yang bertema Web Developing yang berjudul “Menggunakan AJAX yang Baik” ternyata mendapat respon yang baik juga dari temen2ku, khususnya temen2ku yang minat untuk belajar Web Developing… maka nanti Cheyuz bakal ngebahas tentang teknik AJAX itu sendiri, dan kita akan memakai Framework Jquery untuk Javascriptnya…

Tetapi, alangkah baiknya kita memulai untuk mengenal JQuery dasar dulu, soalnya lebih baik kita tau dasarnya dulu, sebelum lanjut ke AJAX dengan Jquery…

Sebelumnya ada yang tahu Jquery itu apa?

Yup, Jquery adalah sebuah Library Javascript yang cepat dan ringkas yang mana dapat menyederhakan document traversing, event handling, animating, dan Ajax interactions untuk pengembangan web secara cepat.

Nah, kali ini, Cheyuz bakal ngebahas tentang Jquery dari sangat sangat sangat dasar hingga mahir…..

Untuk Memulai JQuery

Supaya temen2 bisa menggunakan Jquery, silakan download Jquery (saat ini versi terakhir adalah v.1.3.2).

Download JQuery 1.3.2

Lalu simpan file jquery-1.3.2.min.js yang udah didownload ke folder javascript web punya temen2.. misalnya di folder javascripts, maka nanti temen2 tinggal tambahkan script ini di dalam tag header:

<head>
...
<script src="javascripts/jquery-1.3.2.min.js"></script>
...
</head>

Contoh penggunaan JQuery

<script>
$().ready(function(){
    $("#gambarku").hide();
});
</script>

Apa arti script di atas?
Mungkin buat temen2 yang belum tau JQuery bakal terasa asing dan berkata “WEW, BAHASA ANEH APA ITU?”… tapi setidaknya pasti tau maksud script di atas. Ya, script di atas memerintahkan sebuah fungsi hide() untuk menyembunyikan sebuah elemen yang mempunyai ID = “gambar”..

Nah, itulah JQuery..
Menurutku, enaknya memakai Jquery adalah perintah Javascript untuk berbagai elemen HTML bisa dideklarasikan terlebih dahulu, ID atau class apa yang ingin ‘dimainkan’… jadi nantinya script ga kayak gini,,,

1 2	<button class="tombol" onclick="hide('gambarku')">Sembunyikan Gambar</button> <img id="gambarku" src="foto.jpg" />

Klo scriptnya seperti itu, gimana kalo si buttonnya ada 1000? tentu capek kan temen2 ngasi atribut onclick=”hide()” di setiap button? PASTI! Selain itu, klo ga menggunakan Jquery, kita harus membuat fungsi hide() terlebih dahulu, untuk menyembunyikan element…

Nah, dengan menggunakan Jquery, temen2 cuman bikin suatu deklarasi yang mana “memerintahkan” bahwa semua elemen yang mempunyai class “tombol” jika diklik akan memanggil fungsi hide(). Selain itu, temen2 ga usah bikin fungsi hide() lagi, karena semua fungsi untuk manipulasi elemen html sudah ada dalam JQuery, jadi temen2 tinggal pake… maka script Jquery-nya kayak gini:

<script>
$().ready(function(){
    $(".tombol").click(function(){
        $("#gambarku").hide();
    });
});
</script>

Lalu diikuti html yang sederhana seperti berikut:

8 9	<button class="tombol">Sembunyikan</button> <img id="gambarku" src="foto.jpg" />

Jika tadi elemen dinyatakan dengan tanda “#”, script untuk class dinyatakan dengan tanda “.”. Jadi, .tombol berarti class=”tombol”, sedangkan #gambar berarti id=”gambar”

Huuuaaahh.. Cheyuz-nya udah ngantuk nih, mau tidur dulu…. malem bsok kita sambung tutorial Jquery berikutnya… kali ini kita perkenalan aja dulu… nanti “coming soon” kita langsung praktik ke materi ttg fade in dan fade out elemen… (masih dasar).. ok, selamat malam… hwaaah :ngantuk:

Tags: jquery, Tutorial, Web Developing