About UsContent List
ARTIKEL TERKINI
DIPOSTING :
0 komentar

Tentang Jquery


JavaScript memang banyak digunakan untuk memudahkan interaksi pada tampilan disebuah website. Oleh sebab itu pada tahun 2006, John Resig di BarCamp membuat sebuah kumpulan fungsi sintaks JavaScript dalam sebuah file .js yaitu JQuery. JQuery adalah sebuah library atau pustaka JavaScript yang ringkas, cepat dan sederhana. JQuery dirancang untuk memanipulasi dan menyederhanakan sebuah dokumen pada HTML dan CSS agar terlihat simple dan menarik seperti membuat animasi, menu drop down, dan masih banyak lagi.

Sesuai dengan slogannya "write less, do more", Sedikit menulis dan banyak melakukan perkerjaan. Itulah JQuery, misalkan kita ingin membuat animasi  yang nantikan ditampilkan diwebsite kita, kita hanya memanggil beberapa fungsi singkat yang sudah disediakan. Tidak perlu lagi membuat fungsi dengan JavaScript yang panjang dan terkadang bisa banyak error.

Cara penggunaannya 
kita perlu menyisipkan file JQuery didalam sintaks HTML di website kita. Untuk sekarang file JQuery update terbaru versi 2.1.1, jadi masukkan <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"> </script> didalam sintaks <head> ... </head>,contohnya:

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js">
  4. </script>
  5. </head>
  6. <body>
  7. ....
  8. </body>
  9. </html>
Adapun untuk pemanggilan fungsi, misalnya kita ingin membuat animasi sederhana seperti membuat ukuran kotak membesar dan mengecil.
  1. <html>
  2. <head>
  3. <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.1.min.js'>
  4. </script>
  5. <script> 
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $("div").animate({
  9.       height:'150px',
  10.       width:'150px'
  11.     });
  12.   });
  13. });
  14. </script> 
  15. <style>
  16. div{
  17.   background:black;
  18.   width:100px;
  19.   height:100px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <button>besarkan kotak</button>
  25. <div></div>
  26. </body>

Untuk lebih banyak lagi tentang dasar-dasar JQuery, bisa buka website ini http://www.w3schools.com/jquery/default.asp atau jquery.com . Selamat berkreasi.

Referensi : Wikipedia

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)