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

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

blur

unload

mouseleave

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 <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function( ){ });

Latihan JQuery Bagian 5

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

Untuk contoh kali ini misalkan ketika paragraph

nya di klik maka dia akan disembunyikan. Koding lengkapnya adalah sebagai berikut :

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){ $("p").click(function( ){ $(this).hide( ); }); });

3

Latihan JQuery Bagian 5

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

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 : $(function(){ $("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

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){ $("p").dblclick(function(){ $(this).hide(); }); });

Latihan JQuery Bagian 5

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

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 :

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){ $("p").hover(function(){ $(this).hide();

5

}); });

Latihan JQuery Bagian 5

<em class="author">Oleh : Loka Dwiartara

Saat ini kita akan memulai mempelajari lebih dalam JQuery Library

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 :

<script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){ $("input").focus(function(){ $(this).css("background-color","lightblue"); }); });

Form Login

Silahkan login disini...

Username :
Password :



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. <script type="text/javascript" src="jquery-1.11.1.min.js"> <script type="text/javascript"> $(function(){ $("input").focus(function(){ $(this).css("background-color","lightblue"); }); $("input").blur(function(){ $(this).css("background","none"); });

});

Form Login

Silahkan login disini...

Username :
Password :

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

blur

unload

mouseleave

8