JQuery merupakan library Javascript yang populer saat ini. Dengan jQuery, kita dapat melakukan hal yang sama dengan javascript namun dengan baris kode yang lebih sedikit sesuai dengan slogannya Write Less Do More, dan lebih mudah dipelajari.
Mengapa menggunakan jQuery? Kita menggunakan jQuery beberapa alasannya adalah untuk mencari elemen di dalam dokumen HTML, mengganti HTML di dalam halaman website, membuat elemen HTML bereaksi sesuai dengan yang dilakukan oleh user, membuat animasi, dan juga berkomunikasi dengan server.
Komponen dasar jQuery secara umum adalah seperti ini :
|
1 2 3 |
$("img").hide(); .fadeOut(); .addClass("large"); |
Tanda dolar($) adalah kode bahwa ini adalah syntax jQuery, kemudian selector diikuti tanda titik dan methodnya. Kita akan banyak menemukannya nanti, tidak perlu dipikir sulit-sulit dulu untuk saat ini.
Langkah Pertama : Download jQuery
Langkah pertama yang perlu kita lakukan untuk menggunakan jquery adalah mendownload dari websitenya : jquery.com . Pilih saja versi yang terbaru dengan mengklik tombol Download jQuery dan pilih yang versi production : https://code.jquery.com/jquery-3.2.1.min.js.
Program jQuery Pertama
Sekarang kita akan membuat program jQuery pertama kita. Di server local, buat folder untuk latihan jquery kita. Misalnya jquery. Di dalam folder ini, buat folder js dan paste jQuery yang baru saja kita download tadi.
Langkah selanjutnya, buat index.html di dalam folder jquery kita.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <p>Click me and I'll fade away</p> <p>Fade me out too!</p> <p>And also me!</p> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/fade.js"> </script> </body> </html> |
Di bagian bawah sebelum tag </body> adalah tempat yang untuk meletakkan kode jQuery kita untuk menghindari error dan proses yang lambat. Kita buat file fade.js yang berada di dalam folder js :
|
1 2 3 4 5 |
$(document).ready(function(){ $("p").on('click',function(){ $(this).fadeOut(1000); }) }); |
Kode jQuery ini artinya: ketika elemen paragraf (<p>) di klik, maka tulisan yang ada di paragraf tersebut akan fadeOut atau menghilang dalam waktu 1000 millisecond atau sama dengan satu detik.
Buka browser kemudian masukkan url nya : http://localhost/jquery/
Ketika baris paragraf tersebut di klik, maka akan menghilang. Silahkan dicoba!