Hai sobat blogger, ketemu lagi dengan saya hehe. Eh sebelumnya saya mengucapkan Taqobbalallahu minna wa minkum, minal aidzin wal faidzin, mohon maaf klo saya ada salah ya :D nggak telat kan ngucapin sekarang ? itung2 minggu ini kan masih minggu2 lebaran hehe. Udah ya, lanjutt..
Pada kesempatan kali ini, saya akan kembali memposting bab tentang jQuery lagi, yaitu tentang bab Events. Nggak usah basa basi lagi, yuk simak penjelasan tentang bab ini ya...
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.
Event click()
Event click() dijalankan setelah terjadi klik pada suatu elemen yang telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :
Source Code:
<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('a').click(function(){
alert("Ini adalah Fungsi Event Click()")
});
});
</script>
</head>
<body>
<a href="latihan1.html">Klik disini untuk menuju halaman Latihan 1</a>
</body>
</html>
Hasilnya :
Event dblclick()
Event dblclick() akan dijalankan setelah terjadi klik 2x pada suatu elemen yang telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :
<title>Event dblclick()</title>
</head>
<body>
<p>Klik 2 kali pada setiap kotak untuk mengubah warna</p>
<div></div>
<div></div>
<div></div>
</body>
</html>
Hasilnya :
Sebelum di klik 2x
Setelah di klik 2x
Event mouseover()
Event mouseover akan dijalankan ketika kursor mouse melewati elemen yang ditentukan.
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 :
<title>Event mouseover() dan mouseleave()</title>
</head>
<body>
<p>Arahkan kursor anda pada kotak untuk mengetahui fungsi mouseover()</p>
<p>Arahkan kursor anda keluar kotak untuk mengetahui fungsi mouseleave()</p>
<div></div>
<div></div>
<div></div>
</body>
</html>
Hasilnya :
Gambar tersebut menunjukkan saat mouseover()
Gambar tersebut menunjukkan saat mouseleave()
Terima Kasih Sudah Membaca ! Semoga Bermanfaat Untuk Anda :D
0 comments:
Posting Komentar
Jika ada Komentar , Tulis Di Sini