PEMROGRAMAN WEB 13 jquery

Transkripsi

1 PEMROGRAMAN WEB 13 jquery Andi WRE

2 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

3 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

4 Adding the jquery Library to Web Pages 2 jenis file jquery library : 1. Minified 2. Uncompressed

5 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

6 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)

7 jquery Selectors Selectors contoh Select $( * ) $( * ) Seluruh element $(this) $(this) Current HTML element $( namatag ) $( p ) Seluruh element <p> $( namatag.namaclass ) $( p.satu ) Seluruh element <p> dengan class= satu $( namatag#namaid ) $( p#satu ) Seluruh element <p> 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_

8 [contoh] jquery Selectors

9 jquery Events Event Method $(document).ready(function) $(selector).click(function) $(selector).dblclick(function) $(selector).focus(function) $(selector).blur(function) $(selector).mouseover(function) Deskripsi Aksi dijalankan ketika dokumen HTML sudah selesai di-load Aksi dijalankan ketika element HTML diklik Aksi dijalankan ketika element HTML di-double click Aksi dijalankan ketika fokus pada sebuah element Aksi dijalankan ketika kehilangan fokus pada sebuah element Aksi dijalankan ketika pointer mouse mengarah dan berada di atas element

10 [contoh] jquery Events

11 jquery Effects Parameter : Speed : "slow", "fast", "normal", atau milliseconds Callback : kode berikutnya dijalankan setelah animasi sudah selesai 100% Function $(selector).hide(speed,callback) $(selector).show(speed,callback) $(selector).toggle(speed,callback) $(selector).slidedown(speed,callback) $(selector).slideup(speed,callback) Deskripsi Menghilangkan element HTML tertentu Menampilkan element HTML tertentu Gabungan dari method hide() dan show() Menampilkan element HTML tertentu dengan efek slide dari atas ke bawah Menghilangkan element HTML tertentu dengan efek slide dari bawah ke atas $(selector).slidetoggle(speed,callback) Gabungan dari method slidedown() dan slideup()

12 [contoh 1] jquery Effects

13 jquery Effects Function $(selector).fadein(speed,callback) $(selector).fadeout(speed,callback) $(selector).fadeto(speed,opacity,callback) $(selector).animate({params},[duration]) Deskripsi Menampilkan element HTML tertentu dengan meningkatkan nilai opacity Menghilangkan element HTML tertentu dengan menurunkan nilai opacity Mengubah nilai opacity pada element HTML dengan animasi. Parameter opacity diisi dengan nilai opacity yang diinginkan. Membuat animasi dengan menggunakan property CSS {params} {property1:value1, property2:value2, propertyn:valuen} [duration] "fast", "slow", "normal", atau milliseconds

14 [contoh 2] jquery Effects Here comes your footer Web Programming jquery

15 [contoh 3] jquery Effects Body

16 jquery CSS Manipulation CSS Properties $(selector).css( property, value ) $(selector).css({ property1 : value1, property2 : value2 }) $(selector).height(value) $(selector).width(value) Deskripsi Memberikan CSS style pada element HTML (one style property) Memberikan CSS style pada element HTML (multiple style properties) Mengatur tinggi dari element HTML Mengatur lebar dari element HTML

17 [contoh] jquery CSS Manipulation

18 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