Tutorial Jquery Dasar part2 - Dalam tutorial dasar jquery bagian kedua ini saya akan menjelaskan tentang selector, event dan jquery effect. Selector dalam jquery hampir sama dengan selector yang terdapat pada CSS
Event adalah "sebab" yang mengakibatkan sesuatu terjadi pada website, sebagai contoh ketika kita meletakkan kursor mouse pada tombol, kemudian tombol tersebut berubah warnanya seketika kita meletakkan kursor, itulah yang disebut event.
Effect adalah sesuatu yang terjadi ketika event diberlakukan, sebagai contoh ketika kursor diletakkan pada tombol dan warnanya berubah, warna yang berubah itu adalah effect pada jquery.
Event
Seperti yang sudah dijelaskan diatas event adalah sebab yang mengakibatkan sesuatu terjadi pada konten website. Dibawah ini adalah daftar event yang ada pada jquery.
1. Event mouse : click, dblclick, mouseenter, mouseleave
2. Event keyboard : keypress, keydown, keyup
3. Event form : submit, change, focus, blur
4. Event document : load, resize, scroll, unload
Pada contoh pertama penggunaan event ini kita akan buat sebuah paragrap akan menghilang (hide) pada saat sebuah tombol kita klik. Pada kasus ini paragrap berperan sebagai konten yang akan dikenakan aksi ketika event dijalankan yaitu pada tombol, hal yang paling masuk akal pada kasus ini adalah dengan menggunakan event click pada event mouse.
<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function( ){
$("p").hide( );
});
});
</script>
</head>
<body>
<h1 id="title-article">tutorial dasar jquery bagian 2</h1>
<h2 class="author">Oleh : Mhd. arif iqbal</h2>
<button>click me</button>
<p>Saat ini kita akan memulai mempelajari lebih dalam JQuery Library</p>
</body>
</html>
kode diatas adalah kode lengkap pada kasus ini, ayo kota fokuskan pada kode yang dibawah ini
$(function(){
$("button").click(function( ){
$("p").hide( );
});
});
Kode $("button").click(function( ) mendeklarasikan bahwa pada saat elemen button kita klik maka akan berakibat pada "$("p").hide();", yaitu elemen p yang akan menghilang (hide). Teman - teman bisa bereksperimen dengan menggunakan berbagai event yang tertera diatas.
Effect
Efek adalah dampak yang terjadi pada elemen setelah event dijalankan. Berikut adalah efek yang terdapat pada jquery.
1. animate()
2. clearQueue()
3. delay()
4. dequeue()
5. fadeIn()
6. fadeOut()
7. fadeTo()
8. fadeToggle()
9. finish()
10. hide()
11. queue()
12. show()
13. slideDown()
14. slideToggle()
Sekian pembahasan singkat mengenai event dan effect pada jquery, semoga dapat dipahami dan dimengerti, selalu mencoba dan berkesperimen ya teman - teman.
