Penggunaan jQuery Event
Assalamualaikum wr.wb
Pagi kawan, pada hari ini saya akan sharing cara Penggunaan jQuery Event
A. Pengertian
Di dalam JavaScript, Event adalah suatu hal yang bisa dilakukan user ke sebuah element HTML, misalnya di click, double click, mouseover (cursor mouse berada diatas element), mouseout(cursor mouse sudah keluar dari atas element), dll.
B. Latar Belakang
Untuk mengoptimisasi dan meringkas penulisan library JavaScript, jQuery merupakan jawaban yang tepat dalam hal tersebut. jQuery merupakan sebuahframework dan cara baru dalam menuliskan kode JavaScript. Denganmenggunakan jQuery, kita dapat mempercepat perpindahan dokumen HTML, penanganan event(event-handling), dan pembuatan animasi didalam web untukmemperindah website yang kita buat.
C. Maksud dan Tujuan
Agar pengguna(user) dapat berinteraksi dengan website dan dapatmengatur tampilan pada penggunaan jQuery, diperlukan sebuah penanganan eventdengan menambahkan perintah-perintah seperti click() untuk menangani eventsaat terjadi click, focus(), hover(), mouseout(), mouseleave(), dan lain-lainnya
D. Alat dan Bahan
- Komputer / Laptop
- Text Editor
E. Materi
Cara Penggunaan jQuery Event
Sebagai alternatif, jQuery menyediakan jQuery Event dengan penulisan yang lebih praktis, berikut contohnya:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Belajar jQuery </title> <script src="jquery-2.1.4.js"></script> <script> $(document).ready(function() { $("#paragraf").click(function() { alert('Saya sudah di klik!'); }); }); </script> </head> <body> <p id="paragraf"> Silahkan klik saya </p> </body> </html>
Perhatikan bagaimana jQuery memudahkan penulisan event ini, sangat sederhana. Format penulisannya adalah:
$("jQuery_Selector").jQuery_Event(function() { ...isi event disini... })
Selain event click, juga tersedia berbagai event lain, seperti dblclick, mouseenter, mouseover,mouseleave, dll.
Berikut contoh “aksi” dari berbagai event javascipt yang dibuat dengan jQuery:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Belajar jQuery Event</title><style>
#paragraf {
width:750px;
height:180px;
background-color:blue;
line-height:80px;
text-align:center;
font-size:30px;
}
</style><script src="jquery-2.1.4.js"></script><script>
$( document ).ready(function() {
$( "#paragraf" ).click(function() {
$( "#paragraf" ).css( "color", "red" );
});
$( "#paragraf" ).mouseover(function() {
$( "#paragraf" ).css( "background-color", "yellow" );
});
$( "#paragraf" ).mouseout(function() {
$( "#paragraf" ).css( "background-color", "aqua" );
});
$( "#paragraf" ).dblclick(function() {
$( "#paragraf" ).css( "border", "solid 5px black" );
});
});
</script></head><body>
<p id="paragraf">
Belajar jQuery Event</br>
silahkan klik,click, dblclick, mouseover, dan mouseleave</br>
</p>
</body></html>
Dalam contoh diatas, saya membuat 4 jQuery event, yakni click, dblclick, mouseover, dan mouseleave. Pada setiap event ini saya mengubah property CSS dari paragraf. Silahkan anda coba sendiri dengan men-klik, double klik, dan mouseover ke atas kotak Biru:
F. Referensi
G. Hasil dan Kesimpulan
Event pada jQuery berfungsi untuk memperindah halaman web padaevent-event tertentu dan melakukan interaksi antara user dengan halaman web.Dalam makalah ini, event yang kami bahas yaitu tentang pointer yang berfungsiapabila object tersebut mendapat event tertentu, semisal click(), hover(), dan lain-lainnya
Yak, itu tadi penjelasan singkat tentang cara Penggunaan jQuery Event, jangan lupa untuk kunjungi terus blog saya untuk mengetahui kelanjutan materi ini Sekian Termiakasih
Wassalamu'alaikum Wr.Wb