Pemrograman Web Lanjut

JQuery

Apa itu jQuery?

jQuery

dirancang untuk
memperingkas kode-kode
javascript.
JQuery adalah javascript library
yang cepat dan ringan untuk
menangani dokumen HTML,
menangani event, membuat
animasi dan interakasi ajax.
JQuery dirancang untuk mengubah
cara anda menulis javascript.

Apa itu jQuery?

Library

jQuery mempunyai
kemampuan :
Kemudahan mengakses elemen-elemen
HTML
Memanipulasi elemen HTML
Memanipulasi CSS
Penanganan event HTML
Efek-efek javascript dan animasi
Modifikasi HTML DOM
AJAX
Menyederhanakan kode javascript lainnya

Apa itu jQuery?

Untuk

memulai jQuery, anda

harus mendownload jquery.js dari
situs http://www.jquery.com.
Setiap menulis kode javascript
dengan menggunakan jquery,
jangan lupa untuk memasukan
file jquery.js kedalam kode
javascript.

Sintaks
$("selector").action();

$: mendefinisikan milik Jquery

selector: elemen HTML (tag) mana saja yg
dikenakan fungsi
action: fungsi spesifik yg dijalankan
Contoh

seleksi elemen HTML:

$("*"): semua elemen dalam dokumen web

$(".intro"): semua elemen yg class="intro"
$("#intro"): elemen yg id="intro"
$("p"): semua elemen tag <p>
$("p.intro"): semua tag <p> yg class="intro"

Sintaks jQuery
Dalam

menggunakan jQuery kita

perlu memastikan bahwa event
akan dijalalankan setelah
Document Object Model (DOM)
siap.
Untuk melakukan hal ini, kita
menambahkan kode ready event
untuk dokumen.

Pemanggilan Fungsi
Contoh

1: Mengambil value dari

input teks yg id=a
JS: var x = document.getElementById("a").value;
Jquery: var x = $("#a").val();

Contoh

2: Assignment value ke
input teks yg id=a
JS: document.getElementById("a").value
Jquery: $("#a").val("halo");

= "halo";

Pemanggilan Fungsi
Contoh

3: Mengambil isi HTML

dari elemen yg id=b
JS: var x = document.getElementById("b").innerHTML;
Jquery: var x = $("#b").html();

Contoh

4: Assignment HTML ke
elemen yg id=b
JS: document.getElementById("b").innerHTML = "<b>halo</b>";
Jquery: $("#b").html("<b>halo</b>");

DHTML Visual
Contoh

1: Mengambil value
warna elemen yg id=c
JS: var x = document.getElementById("c").style.color;
Jquery: var x = $("#c").css("color");

Contoh

2: Mengubah warna
elemen yg id=c
JS: document.getElementById("c").style.color = "blue";
Jquery: $("#c").css("color","blue");

DHTML Visual
Contoh

3: Mengambil value font

style elemen yg id=d
JS: var x = document.getElementById("d").style.fontStyle;
Jquery: var x = $("#d").css("font-style");

Contoh

4: Mengubah font style

elemen yg id=d
JS: document.getElementById("d").style.fontStyle = "italic";
Jquery: $("#d").css("font-style","italic");

Event Binding
Contoh

1: Mengeset event click pada

elemen yg id=e
JS: ... onclick="alert('klik!')" ...
Jquery: $("#e").click(function() {
alert("klik!");
});

Contoh

2: Mengeset event mouseover

elemen yg id=e
JS: ... onmouseover="suatufungsi()" ...
Jquery: $("#e").mouseover(function() {
suatufungsi();
});

jQuery Events
Salah

satu kemampuan utama jquery adalah

menangani event.
Kode-kode pemograman diletakkan di dalam
penanganan event yang terjadi pada suatu atau
kelompok elemen yang dipilih.

Kode

di atas berarti apabila terjadi event mengklik

elemen yang mempunyai class=tombol1, maka
lakukan fungsi hide() terhadap semua element
<p>.

jQuery Events
Berikut

daftar event-event yang dapat

terjadi dari elemen HTML.

Efek-Efek dengan jQuery

jQuery

mempunyai fungsi-fungsi efek yang siap pakai

dengan menggunakan fungsi $(selector).fadeIn()
jQuery show() Effect
Untuk menampilkan elemen yang tersembunyi.
Sintaks :
$(selector).show(speed,callback)
Keterangan :

Speed : Opsional. Menentukan kecepatan elemen muncul dari

hidden ke visible. Defaultnya adalah 0.
Nilainya dapat berupa :
milliseconds (contoh : 1500)
"slow"
"normal"
"fast"

callback : Opsional. Suatu fungsi yang akan dijalankann apabila

efek show selesai dijalankan.

Contoh : hello world

jquery

Contoh show

Efek-Efek dengan jQuery

jQuery hide() Effect
Berfungsi untuk menyembunyikan elemen yang dipilih.
Sintaks :
$(selector).hide(speed,callback)
Keterangan :

Speed : Opsional. Menentukan kecepatan elemen dari

visible ke hidden. Defaultnya adalah 0.
Nilainya dapat berupa :
milliseconds (contoh : 1500)
"slow"
"normal"
"fast"

callback : Opsional. Suatu fungsi yang akan

dijalankann apabila efek hide selesai dijalankan.

Efek-Efek dengan jQuery

jQuery toggle() Effect
Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan
yang tersembunyi, menyembunyikan yang tampak.
Sintaks :
$(selector).toggle(speed,callback,switch)
Keterangan :

Speed : Opsional. Menentukan kecepatan elemen dari visible ke hidden.

Defaultnya adalah 0.
Nilainya dapat berupa :
milliseconds (contoh : 1500)
"slow"
"normal"
"fast"

callback : Opsional. Suatu fungsi yang akan dijalankann apabila efek hide
selesai dijalankan.
switch : Opsional. Bernilai Boolean
True, hanya untuk menampilkan semua elemen
False, hanya menyembunyikan semua elemen

Jika parameter ini diset, parameter speed dan callback parameters tidak bisa
digunakan.

Contoh toggle()

Efek-Efek dengan jQuery

jQuery slideDown() Effect
Menampilkan elemen yang tersembunyi, secara efek sliding.
Sintaks :
$(selector).slideDown(speed,callback)

jQuery slideUp() Effect

Menyembunyikan elemen secara efek sliding.
Sintaks :
$(selector).slideUp(speed,callback)

jQuery slideToggle() Effect

Gabungan antara slideDown() dan slideUp(). Menyembunyikan elemen
jika dalam keadaan visible, menampilkan elemen jika dalam kedaan
hidden.
Sintaks :
$(selector).slideToggle(speed,callback)

Contoh slideToggle()

Efek-Efek dengan jQuery

jQuery fadeIn() Effect
Menampilkan elemen yang dipilih jika
tersembunyi, secara efek memudar.
Sintaks :
$(selector).fadeIn(speed,callback)

jQuery fadeOut() Effect

Menyembunyikan elemen yang dipilih, secara
efek memudar.
Sintaks :
$(selector).fadeOut(speed,callback)

Contoh fadeOut()