Tentang JQuery

 
 

JQuery

jQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai,
sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya
jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “Write less, do
more”.
 
 
Keuntungan
Beberapa keuntungan yang dimiliki JQuery :
- Mempermudah akses dan manipulasi elemen tertentu pada dokumen.
- Mempermudah modifikasi/perubahan tampilan halaman web.
- Mempersingkat Ajax (Asynchronous Javacsript and XML).
- Memiliki API (Application Programming Interface).
- Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
- Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.
 
Cara Kerja
Cara kerja jQuery dapat dijabarkan sebagai berikut :
a. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua di halaman web, fungsi yang digunakan adalah:

$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});

b. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi Selector.

$("#foto")
$(".sembunyi")
$(".tampil") 

c. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan memunculkan kembali gambar.

$(".sembunyi").click(function(){
$("#foto").hide("slow");
)};

Selector
Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan
operasi terhadap elemen tersebut atau manipulas terhadap elemen-elemn tersebut.
Adapun elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :
a. Selector Tag
Cara menggunakan selector tag adalah dengan langsung menyebut nama tag elemennya.
b. Selector Id
Cara menggunakan Selector id adalah dengan menyertakan tanda kres (#) sebelum nama
elemennya.
c. Selector Class
Cara menggunakan Selector class ini adalah dengan menyertakan tanda titik (.) sebelum
nama elemennya.
Contoh : 

<script type="text/javascript">
$("document").ready(function(){
$("#p1").css("color","red");
});
</script>

EVENTS
Sebelumnya kita telah belajar Selector yang mencari elemen-elemen apa saja yang akan dilakukan operasi terhadapnya, maka Event memutuskan kapan dilakukan operasi tersebut, misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya setelah diklik (click) atau setelah klik 2x (dblclik), setelah mouse berada diatas objek (hover), dan sebagainya.
A. Event Click()
Event click dijalankan setelah terjadi klik pada suatu elemen yang telah ditentukan.
Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('a').click(function(){
alert("Selamat datang di website STMIK AMIKOM Purwokerto")
});
});
</script>

B. Event dblclick()
Event dblclick akan dijalankan setelah terjadi klik 2x pada suatu elemen yang telah
ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("div").dblclick(function(){
$(this).css({background:"red"});
});
});
</script>

C. Event mouseover()
Event mouseover akan dijalankan ketika kursor mouse melewati elemen yang
ditentukan.
D. Event mouseleave()
Event mouseleave akan dijalankan ketika kursor mouse meninggalkan elemen yang
ditentukan.
 
EFFECTS
Effects adalah sesuatu mengenai menampilkan dan menyembunyikan suatu elemen, menggerakan elemen, dan menganimasikan elemen tersebut.
A. Efek Fade()
Efek fade digunakan untuk menghilangkan atau menampilkan elemen secara perlahanlahan, biasanya digunakan untuk transisi/pergantian suatu objek dengan objek yang
lain, sehingga transisinya terlihat lebih halus. Ada 3jenis efek fade, yaitu fadeln, fadeOut, dan fadeTo. Untuk lebih jelasnya, lihat contoh sederhana pada skrip berikut :

<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".fadeout").click(function(){
$("#kotak").fadeOut("slow");
});
$(".fadein").click(function(){
$("#kotak").fadeIn("slow");
});
 
$(".fadeto3").click(function(){
$("#kotak").fadeTo("slow",0.3);
});
 
});

</script>

B. Efek slide()
Efek slide digunakan untuk menghilangkan atau menampilkan elemen seperti membuka/menutup sesuatu. Ada tiga jenis slide, yaitu SlideUp, SlideDown, dan SlideToggle. Untuk lebih jelasnya, lihat contoh pada skrip berikut:

<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".flip").click(function(){
$(".pesan").slideToggle("slow");
});
});
</script>

C. efek animate()
Efek animate digunakan untuk menggerakkan/menganimasikan suatu elemen.
Adapun sintaksnya:
$(selector).animate({params},[duration],[easing],[callback])
Keterangan
- Paramsyang mendefinisikan properti dari elemen yang akan dianimasikan dan banyak properti yang bisa dianimasikan dalam waktu yang sama.
- Durationyang mendefinisikan berapa waktu yang digunakan untuk menjalankan animasi, contohnya fast, slow, normal, atau bisa juga dalam bentuk milisecond, contohnya 5000 = 5 detik.
 
Plugin Jquery UI
jQuery UI (user interface merupakan plugin yang paling populer di kalangan programmer
jQuery. Karena sampai-sampai dijadikan satu manual dengan manual jQuery di website resminya. jQuery UI dibuat oelh Paul Bakaus yang bekerja sama dengan stefan Petre untuk menciptakan efek-efek yang canggih dan komponen librari pelengkap jQuery, diantaranya :
- Accordion
- Datepicker
- Tabs
- Dialog
- Progressbar
- Slider
- Effect/animasi
- Drag and Drop
- Dan lain-lain
 
Instalasi jQuery UI
1). Download jQuery UI di http://jquery.com/ maka akan tampil halaman downloadnya, klik aja langsung link current (stable), maka file jQuery UI (jquery-ui-1.7.2.custom.rar) akan tersimpan di komputer anda.
2). Filenya masih berbentuk kompresi (jquery-ui-1.7.2.custom.rar), oleh karena itu gunakan program winzip/winrar untuk mengekstraknya, nanti semua fule jquery-ui akan ditemukan pada folder jquery-ui-1.7.2.custom
3). Untuk mencobanya, silahkan klik versi demonya yang ada di folder jquery-ui-1.7.2.custom/development-bundle/demis, nanti klik 2x file index.html pada folder tersebut, maka akan tampil halaman demo dari jQuery UI, misalnya coba library Tabs pada bagian widget, maka demonya akan tampil dibagian tengah.
Silahkan dicoba beberapa demo library jQuery UI lainnya, seperti draggable, accordion, progressbar, Dialog, Effect, dan lain-lain.