Secara umum, prinsip jQuery adalah menargetkan elemen HTML dan memodifikasi elemen tersebut. Event yaitu ketika user melakukan sesuatu dengan elemen html, effect adalah modifikasi yang dilakukan terhadap elemen tersebut.
Contoh event : click, dblclick, mouseenter, mouseleave
Contoh effects : show(), hide(), toggle(), slideDown(), slideUp(), fadeIn(), fadeOut(), fadeTo(), slideToggle(), fadeToggle().
Salah satu referensi lengkapnya ada di w3schools.com :
http://w3schools.com/jquery/jquery_ref_events.asp
http://w3schools.com/jquery/jquery_ref_effects.asp
Contoh ketika tombol ditekan, akan muncul segi empat secara perlahan (1000 milliseconds) atau satu detik.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> </head> <body> <title>Learn Event Handling</title> <input type="button" value="submit" id="firstBtn"> <br> <br> <div id="box" style="width:500px; height: 100px; border: 1px solid #000; background-color: yellow; display: none;"> This is a rectangle </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/clickEvent.js"></script> </body> </html> |
clickEvent.js
|
1 2 3 4 5 6 |
$(document).ready(function(){ $('#firstBtn').on('click',function(){ $('#box').fadeIn(1000); }); }); |
