Pemrograman Web #10 - JQuery
Jquery merupakan library atau framework javascript yang ditujukan untuk mempermudah
penggunanya. Dengan jquery, kita dapat menyederhanakan penulisan javascript yang
kompleks dan rumit. Fitur-fitur yang dimiliki Jquery:
- HTML/DOM manipulation
- CSS manipulation
- HTML event method
- Effect & animation
- ajax
Cara penggunaan Jquery:
- Download file jquery dari website jquery.com
<head> <title></title> <script src="assets/js/jquery-3.3.1.min.js" type="text/javascript"></script> </head> - Menggunakan file jquery dari CDN. Tutor lengkap ada di sini https://code.jquery.com
<head> <title></title> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </head>
JQuery Syntax
- Jquery Selector
Jquery selector
Sintak dasar nya:$(selector).action()
- Selector merupakan element html yang ingin dimanipulasi/ dikontrol tampilannya Selector bisa berupa keyword this , sebuah class , id ataupun element HTML
- Action merupakan method-method yang tersedia di jquery,misal: hide(),show(),load(),slide(), stop(), dll
- Document ready event
Sintaks dasarnya:
<script type="text/javascript"> $(document).ready(function(){ // method jquery disini }); </script><script type="text/javascript"> $(function(){ // method jquery disini }); </script>
selesai di load.
Contoh penggunaan:
$("h2").hide();
$("#contoh").hide();
$(".contoh").hide();
$("this").hide();Jquery Event
Jquery event di design untuk mengenali event yang dilakukan user saat berinteraksi denganhalaman web. Contoh event yang dilakukan user:
- Menggerakkan mouse ketika melewati suatu element
- Melakukan click pada suatu element
- Memilihi radio button,
- Dll
Contoh event yang sering digunakan:
| Mouse Event | Keyboard Event | Form Event | Doc Event |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keyup | change | resize |
| mouseenter | keydown | focus | scroll |
| mouseleave | blur | unload | |
| hover |
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="assets/js/jquery-3.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Heading1</h1>
<h2>Heading2</h2>
<p class="contoh">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="contoh">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button>Button</button>
<!-- <script type="text/javascript">
$(document).ready(function(){
$('#contoh').hide();
});
</script> -->
<script type="text/javascript">
$(document).ready(function(){
$('button').dblclick(function(){
$(this).hide();
});
});
</script>
<!-- bisa di baca di dokumentasi jquery -->
</body>
</html>