PEMROGRAMAN WEB 13 jquery

PEMROGRAMAN WEB 13 – jQuery

Andi WRE

jQuery
Library yang berisi fungsi-fungsi javaScript
“Write Less, Do More”
Library jQuery berisi fitur : -

HTML element selections HTML element manipulation CSS manipulation HTML event functions JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities

Here comes your footer Web Programming – jQuery

Adding the jQuery Library to Web Pages
2 cara menambahkan jQuery Library : 1. Simpan jQuery library pada direktori yang diinginkan Tambahkan kode berikut pada halaman web yang akan menggunakan jQuery :

2. Menggunakan jQuery library dari Google atau Microsoft •

Google

•

Microsoft

Here comes your footer Web Programming – jQuery

Adding the jQuery Library to Web Pages
2 jenis file jQuery library : 1.

Minified

2.

Uncompressed

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Here comes your footer Web Programming – jQuery

Sintaks jQuery
Sintaks : $(selector).action()


$  mendefinisikan jQuery
Selector  mendefinisikan element HTML yang terkena aksi
Action()  aksi yang dijalankan pada element HTML

Note : element yang berbeda tidak diperbolehkan menggunakan id yang sama

Here comes your footer Web Programming – jQuery

The Document Ready Function
Seluruh jQuery method berada pada function document.ready()
Sintaks : $(document).ready(function(){ // jQuery functions go here... });


Mencegah kode jQuery dikerjakan sebelum dokumen selesai di-load (is ready)

Here comes your footer Web Programming – jQuery

jQuery Selectors Selectors

contoh

Select

$(“*”)

$(“*”)

Seluruh element

$(this)

$(this)

Current HTML element

$(“namaTag”)

$(“p”)

Seluruh element

$(“namaTag.namaClass”)

$(“p.satu”)

Seluruh element

dengan class=“satu”

$(“namaTag#namaId”)

$(“p#satu”)

Seluruh element

dengan id=“satu”

$(“.namaClass”)

$(“.satu”)

Seluruh element dengan class=“satu”

$(“#namaId”)

$(“#satu”)

Seluruh element dengan id=“satu”

$(“[atribut]”)

$(“[href]”)

Seluruh element dengan atribut href

$(“[atribut=‘value’]”)

$(“[href=‘#’]”)

Seluruh element dengan isi atribut href=“#”

$(“[atribut!=‘value’]”)

$(“[href!=‘#’]”)

Seluruh element dengan isi atribut href!=“#”

$(“[atribut$=‘value’]”)

$(“[href$=‘.jpg’]”)

Seluruh element dengan isi atribut href diakhiri dengan .jpg

$(“[atribut^=‘value’]”)

$(“[href^=‘jquery_’]”)

Seluruh element dengan isi atribut href diawali dengan ‘jquery_’

Here comes your footer Web Programming – jQuery

[contoh] jQuery Selectors

Here comes your footer Web Programming – jQuery

jQuery Events Event Method

Deskripsi

$(document).ready(function)

Aksi dijalankan ketika dokumen HTML sudah selesai di-load

$(selector).click(function)

Aksi dijalankan ketika element HTML diklik

$(selector).dblclick(function)

Aksi dijalankan ketika element HTML di-double click

$(selector).focus(function)

Aksi dijalankan ketika fokus pada sebuah element

$(selector).blur(function)

Aksi dijalankan ketika kehilangan fokus pada sebuah element

$(selector).mouseover(function)

Aksi dijalankan ketika pointer mouse mengarah dan berada di atas element

Here comes your footer Web Programming – jQuery

[contoh] jQuery Events

Here comes your footer Web Programming – jQuery

jQuery Effects Parameter :
Speed : "slow", "fast", "normal", atau milliseconds
Callback : kode berikutnya dijalankan setelah animasi sudah selesai 100% Function

Deskripsi

$(selector).hide(speed,callback)

Menghilangkan element HTML tertentu

$(selector).show(speed,callback)

Menampilkan element HTML tertentu

$(selector).toggle(speed,callback)

Gabungan dari method hide() dan show()

$(selector).slideDown(speed,callback)

Menampilkan element HTML tertentu dengan efek slide dari atas ke bawah

$(selector).slideUp(speed,callback)

Menghilangkan element HTML tertentu dengan efek slide dari bawah ke atas

$(selector).slideToggle(speed,callback)

Gabungan dari method slideDown() dan slideUp()

Here comes your footer Web Programming – jQuery

[contoh 1] jQuery Effects

Here comes your footer Web Programming – jQuery

jQuery Effects Function

Deskripsi

$(selector).fadeIn(speed,callback)

Menampilkan element HTML tertentu dengan meningkatkan nilai opacity

$(selector).fadeOut(speed,callback)

Menghilangkan element HTML tertentu dengan menurunkan nilai opacity

$(selector).fadeTo(speed,opacity,callback)

Mengubah nilai opacity pada element HTML dengan animasi. Parameter opacity diisi dengan nilai opacity yang diinginkan.

$(selector).animate({params},[duration])

Membuat animasi dengan menggunakan property CSS {params}  {property1:value1, property2:value2, … propertyN:valueN} [duration]  "fast", "slow", "normal", atau milliseconds

Here comes your footer Web Programming – jQuery

[contoh 2] jQuery Effects

Here comes your footer Web Programming – jQuery

[contoh 3] jQuery Effects

Body Here comes your footer Web Programming – jQuery

jQuery CSS Manipulation CSS Properties

Deskripsi

$(selector).css(“property”,”value”)

Memberikan CSS style pada element HTML (one style property)

$(selector).css({“property1”:”value1” , “property2”:”value2”})

Memberikan CSS style pada element HTML (multiple style properties)

$(selector).height(value)

Mengatur tinggi dari element HTML

$(selector).width(value)

Mengatur lebar dari element HTML

Here comes your footer Web Programming – jQuery

[contoh] jQuery CSS Manipulation

Here comes your footer Web Programming – jQuery

Latihan
Buatlah tampilan untuk daftar menu seperti dibawah ini. Ketika menu ditunjuk maka cursor berubah menjadi bentuk pointer (

) dan warna baris menu

menjadi biru tua

Tampilan awal menu

Tampilan ketika salah satu menu dipilih

Here comes your footer Web Programming – jQuery