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
Adding the jquery Library to Web Pages 2 jenis file jquery library : 1. Minified 2. Uncompressed http://docs.jquery.com/downloading_jquery#download_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
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)
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_
[contoh] jquery Selectors
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
[contoh] jquery Events
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()
[contoh 1] jquery Effects
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
[contoh 2] jquery Effects Here comes your footer Web Programming jquery
[contoh 3] jquery Effects Body
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
[contoh] jquery CSS Manipulation
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