TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

Please download to get full document.

View again

of 8
0 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 5. Menggunakan JQuery Event 1 Bagian
Document Share
Document Transcript
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif Bagian 5. Menggunakan JQuery Event 1 Bagian 5. Menggunakan JQuery Event Apa sih yang di maksud dengan event atau event handling pada jquery? Saya akan berikan penggambaran. Ketika user datang mengunjungi sebuah website, halaman website. Banyak aksi dan interaksi yang dilakukan oleh user tersebut. Dan halaman tersebut memberikan respon terkait aksi yang dilakukan oleh user tersebut. Sebagai contohnya misalkan : 1. Ketika kursor mouse user berpindah dari satu elemen html ke elemen html lain di halaman tersebut 2. Ketika user mengklik radio button pada halaman tersebut 3. Atau ketika user mengklik suatu elemen pada halaman tersebut. Keadaan-keadaan seperti inilah yang di ambil alih oleh Jquery event. Event yang didukung oleh Jquery adalah sebagai berikut. Biasanya dikenal dengan nama DOM (Document Object Model) event. Daftar Event yang didukung oleh JQuery : Event Mouse Event Keyboard Events Form Document Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 2 Menggunakan JQuery Click Sebagai contohnya kita persiapkan terlebih dahulu dokumen HTML nya, lengkap dengan penggunaan library javascript dan area jquery yang kosong tinggal digunakan $(function( ){ h1 id= title-article latihan JQuery Bagian 5 /h1 em class= author oleh : Loka Dwiartara /em p saat ini kita akan memulai mempelajari lebih dalam JQuery Library /p Untuk contoh kali ini misalkan ketika paragraph p nya di klik maka dia akan disembunyikan. Koding lengkapnya adalah sebagai berikut : $( p ).click(function( ){ $(this).hide( ); 3 h1 id= title-article latihan JQuery Bagian 5 /h1 em class= author oleh : Loka Dwiartara /em p saat ini kita akan memulai mempelajari lebih dalam JQuery Library /p Kode tersebut akan menghasilkan Ketika paragraph berisi Saat ini kita mulai... di klik maka secara otomatis akan menghilang atau di sembunyikan. Bagaimana bisa? Kita lihat barisan kode berikut : $( p ).click(function( ){ $(this).hide( ); Ketika tag p di klik maka $(this) itu mengacu kepada dirinya sendiri selama $(this) itu berada di dalam naungan $( p ).click(function(){ Menggunakan JQuery DoubleClick Jika sebelumnya kita telah menggunakan JQuery Event yang berjenis Click, kali ini kita akan menggunakan JQuery Double Click yang cara penggunaannya itu sama dengan click, tapi keadaan di browser berbeda. Misalkan jika click terjadi pada p, maka dirinya langsung menghilang. Untuk Double Click jika terjadi double click (klik dua kali) maka si tag p akan menghilang juga. Contoh lengkapnya seperti ini. 4 $( p ).dblclick(function(){ $(this).hide(); h1 id= title-article latihan JQuery Bagian 5 /h1 em class= author oleh : Loka Dwiartara /em p saat ini kita akan memulai mempelajari lebih dalam JQuery Library /p Menggunakan JQuery Hover Jika sebelumnya elemen p itu di kenai effect hide (disembunyikan) setelah elemen tersebut di klik maupun double klik, di sini kita akan belajar elemen p (paragraph) itu di hide (disembunyikan) ketika mouse itu bergerak di atas atau menyorot paragraph. Berikut kode lengkapnya : $( p ).hover(function(){ $(this).hide(); 5 h1 id= title-article latihan JQuery Bagian 5 /h1 em class= author oleh : Loka Dwiartara /em p saat ini kita akan memulai mempelajari lebih dalam JQuery Library /p Menggunakan JQuery Focus Biasanya jquery focus itu digunakan untuk memberikan event handling kepada form inputan. Misalkan ketika input text di klik maka apa yang akan terjadi. Sebagai contohnya : $( input ).focus(function(){ $(this).css( background-color , lightblue ); h1 id= title-article form Login /h1 p silahkan login disini... /p label username : /label input type= text name= username / br / label password : /label input type= password name= password / br / br / input type= submit name= login value= login! / 6 Menggunakan JQuery Blur Jika JQuery focus itu terjadi ketika mouse di arahkan dan di klikan ke form inputan, dan menghasilkan status focus. Maka blur itu terjadi jika mouse tidak focus lagi kepada inputan. Melainkan diluar area itu, misalkan mengklik selain dari inputan. Misalkan mengklik heading H1, atau mengklik bagian halaman yang putih kosong. $( input ).focus(function(){ $(this).css( background-color , lightblue ); $( input ).blur(function(){ $(this).css( background , none ); h1 id= title-article form Login /h1 p silahkan login disini... /p label username : /label input type= text name= username / br / label password : /label input type= password name= password / br / br / input type= submit name= login value= login! / Buka script tersebut, ada di file latihan bagian5. Kemudian klik dibagian inputan text username, langsung berubah warnanya menjadi biru muda. Kemudian klik lagi di bagian kosong dari background halaman, atau klik heading yang ada tulisan Form Login, maka inputan text secara otomatis berubah menjadi putih. Anda bisa bereksplorasi untuk event yang lainnya 7 Event Mouse Event Keyboard Events Form Document Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 8
Similar documents
View more...
Search Related
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks