Event - event Dasar Pada JQuery

Syntax dalam JQuery ada bebagai macam dan dibuat untuk menyeleksi elemen - elemen HTML dan menciptakan aksi / event pada satu atau beberapa halaman website agar membuat sebuah tampilan site menjadi interaktif dan dinamis. disini kita akan mempelajari macam - macam dari syantax JQuery.

1. Penulisan Syntax

Syantax dasar : $(Selector).action()

• Tanda dolar (" $ ") untuk  merumuskan JQuery
• Sebuah " ( ) " Selector untuk query atau menemukan / memilih elemen - elemen HTML yang akan di beri JQuery
• JQuery action() untuk di tamplikan di atas  elmen - elemen

Contoh penggunaan :

$(this).hide() -> Untuk Menyembunyikan elemen

$("p").hide() -> Untuk Menyembunyikan paragraf

$(".test").hide() -> Untuk menyembunyikan semua elemen dengan class  test

2.Event - Event Dasar yang sering digunakan pada JQuery

click()

Sebuah event atau animasi akan terjadi jika suatu objek yang di pilih atau selec di klik
 

$('.subjek').click(function() { $('#area').fadeOut(); });

.dblclick()

Sebuah event atau animasi akan terjadi jika suatu objek yang di pilih atau selec di klik ganda / klik dua kali.
 

$('.subjek').dblclick(function() { $('#area').fadeOut(); });

.focus()

untuk membuat suatu anmasi atau peristiwa pada subjek/pemicu (digunakan pada elemen-elemen seperti <input> dan <textarea>.

 

$('.subjek').focus(function() { $('#area').fadeOut(); });

.mouseover()

Menimbulkan kejadian atau peristiwa ketika pointer mouse berada di atas suatu subjek yang dituju.

 

$('.subjek').mouseover(function() { $('#area').fadeOut(); });

.mouseout()

Menimbulkan peristiwa jika pointer mouse meninggalkan sebuah sbjek yang di tuju.

 

$('.subjek').mouseout(function() { $('#area').fadeOut(); }); });

.mouseenter()

Sama dengan MouseOver(), menimbulkan peristiwa apabila pointer mouse berada di atas subjek/pemicu. Namun saat pointer mouse memasuki elemen induk (MouseOver()) dan pointer mendatangi anak-anak elemen di dalamnya, itu tidak masuk hitungan Mouseenter().

 

$('.subjek').mouseenter(function() { $('#area').fadeOut(); });

.mouseleave()

Sama seperti Mouseout(),menimbulkan peristiwa apabila pointer mouse pergi dari subjek/pemicu. Namun saat pointer mouse meninggalkan sebuah anak elemen (dan masih dalam elemen induk), itu tidak sudah tidak bisa dei sebut Mouseleaf(), hingga ketika pointer benar-benar telah keluar dari elemen induk baru bisa disebut mouseleve().

$('.subjek').mouseleave(function() { $('#area').fadeOut(); });

.hover()

adalah gabungan antara Mouseenter dan Mouseleave.Susunannya juga merupakan gabungan dari keduanya, coba anda lihat penulisannya di tabael ini :

 

.mouseenter() dan .mouseleave()	.hover()
$('.subjek').mouseenter(function() { $('#area').fadeOut(); }); $('.subjek').mouseleave(function() { $('#area').fadeIn(); });	$('.subjek').hover(function() { $('#area').fadeOut(); }, function() { $('#area').fadeIn(); });

.scroll()

Untuk menimbulkan suatu peristiwa ketika scroll di tarik(ini berlaku untuk semua yang memiliki scroll).

 

$('.subjek').scroll(function() { $('#area').fadeOut(); });

.select()

Untuk menimbulkan suatu peritiwa jika ada yang di select / blok biasa di gunakan pada <input> dan <textarea>.

 

$('.subjek').select(function() { $('#area').fadeOut(); });