Home / jQuery / Tutorial / Bagian 5. Menggunakan JQuery Event

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 :

Baca Juga



 Menggunakan JQuery Click

Sebagai contohnya kita persiapkan terlebih dahulu dokumen HTML nya, lengkap dengan penggunaan library javascript dan area jquery yang kosong tinggal digunakan




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

Untuk contoh kali ini misalkan ketika paragraph <p> nya di klik maka dia akan
disembunyikan.
Koding lengkapnya adalah sebagai berikut:





<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("p").click(function( ){
$(this).hide( );
});
});
</script>
</head>
<body>
<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>
</body>
</html>
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(){
});
Untuk penjelasan Menggunakan  JQuery Event selengkapnya silahkan download disini
Bagian 5. Menggunakan JQuery Event Bagian 5. Menggunakan JQuery Event Reviewed by Akief Takaful on 7:47 AM Rating: 5

You May Also Like

Subscribe to: Post Comments ( Atom )

Post Comments

No comments:

Powered by Blogger.