Saturday, May 28, 2016

jQuery : Events

Events

Sebelumnya kita telah belajar Selector yang mencari elemen-elemen apa saja yang akan dilakukan operasi terhadapnya, maka Event memutuskan kapan dilakukan operasi tersebut, misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya setelah diklik (click) atau setelah klik 2x (dblclik), setelah mouse berada diatas objek (hover), dan sebagainya.

 A. Event Click()

Event click dijalankan setelah terjadi klik pada suatu elemen yang telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('a').click(function(){
alert("Selamat datang di website Fajar Yusuf")
});
});
</script>
</head>
<body>
<a href="www.fajarmyusuf.blogspot.co.id">Klik disini untuk
menuju halaman web Fajar Yusuf</a>
</body>
</html>



B. Event dblclick()

Event dblclick akan dijalankan setelah terjadi klik 2x pada suatu elemen yang telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("div").dblclick(function(){
$(this).css({background:"red"});
});
});
</script>
<style type="text/css">
div {
background:yellow;
width: 60px;
height:60px;
float:left;
margin:10px;
cursor:pointer;
}

</style>
<title>Latihan double klik</title>
</head>
<body>
<p>klik dua kali pada setiap kotak untuk mengubah
warnanya</p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>


C. Event mouseover()

Event mouseover akan dijalankan ketika kursor mouse melewati elemen yang ditentukan.

 

D. Event mouseleave()

Event mouseleave akan dijalankan ketika kursor mouse meninggalkan elemen yang ditentukan.

Untuk lebih jelasnya penggunaan event mouseover dan mouseleave, perhatikan skrip berikut ini :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("div").mouseover(function(){
$(this).css({background:"red"});
});

$("div").mouseleave(function(){
$(this).css({background:"yellow"});
});
});
</script>
<style type="text/css">
div {
background:yellow;
width: 60px;
height:60px;
float:left;
margin:10px;
cursor:pointer;
}
</style>
<title>Latihan double klik</title>
</head>
<body>
<p>Letakan Kursor pada setiap kotak untuk mengubah
warnya</p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>










Reviewer: FajarYusuf.Com
ItemReviewed: jQuery : Events

Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.