Penggunaan jQuery Event

Assalamualaikum Wr. Wb.

Hai sobat,postingan kali ini saya membahas tentang penggunaan jquery. Yuk simak

Apasih jQuery Event itu?
 

Pengertian:
Didalam javascript, Event adalah suatu hal yang bisa dilakukan user ke sebuah element HTML, misalnya di click,mouseover (cursor mouse berada diatas element), mouseout (cursor mouse sudah keluar dari atas element),dll.
Latar Belakang:
Perkembangan dunia informasi dan tekhnologi sangat cepat, termasuk dengan tekhnologi baru-baru ini dimunculkan yaitu jQuery.

Dalam pembuatan dan pengembangan web atau blog para web developer memerlukan pengetahuan tentang yang cukup mendalam tentang JQUERYoleh sebab itu besar harapan penulis agar makalah ini dapat digunakan para pemula dalam membangun sebuah web.
 
Alat dan Bahan:
  • Komputer/Laptop.
  • LAMPP.
  • Sublime Text.
Maksud dan Tujuan:
Untuk menambah wawasan ilmu pengetahuan bagi semua pembaca termasuk saya sendiri yang telah mencari infomasi perkembangan teknologi dan referensi mengenai teknologi tentang JQuery.

Penjelasan:
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 Duniailkom</title>
<style>
#paragraf {
   width:600px;
   height:80px;
   background-color:yellow;
   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", "green" );
     });
  
     $( "#paragraf" ).mouseover(function() {    
       $( "#paragraf" ).css( "background-color", "silver" );
     });
  
     $( "#paragraf" ).mouseout(function() {    
       $( "#paragraf" ).css( "background-color", "pink" );
     });
  
     $( "#paragraf" ).dblclick(function() {    
       $( "#paragraf" ).css( "border", "solid 2px black" );
     });
  
   });
   </script>
</head>
<body>
<p id="paragraf">
   Belajar jQuery Event
</p>
</body>
</html>

Dan ini hasil jadinya:

Hasil dan Kesimpulan:
JQuery merupakan library javascript yang akan membuat aplikasi web yang kita buat jadi lebih menarik, baik dari sisi user interface, proses maupun interaktivitas.
Dengan menggunakan jQuery tentu kita telah menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang ada, Mempercepat coding javascript dalam sebuah website.

Referensi:
http://www.duniailkom.com/tutorial-belajar-jquery-pengertian-jquery-event-dan-cara-penggunaannya/

Penutup:
Sekian postingan saya, semoga bermanfaat.

Wassalamualaikum Wr. Wb. 




Share this

Related Posts

Previous
Next Post »