1.
Download JQuery dari JQuery.com
2.
Biasanya nama filenya akan terlihat seperti
berikut :
Jquery-1.11.2.min
3.
Simpan file JQuery tersebut dalam folder yang
sama dengan file projek yang kita buat.
4.
Hubungkan file JQuery dengan html dengan
menggunakkan script berikut :
<script
src=”js/JQuery-1.11.2.min.js”><script>
Didalam area <head> dan </head>
Keterangan :
<script> : menghubungkan script
javascript atau jquery dengan halaman yang kita buat src : untuk menunjukkan
lokasi file jquery. Jika kita lihat pada contoh diatas file jquery terdapat
pada folder bernama “js”
5.
Memanggil kode persipan JQuery pada bagian
sebelum </body>
$(document).ready(function){
//////////////
});
Keterangan
:
Kode diatas untuk memastikan
bahwa kode program akan dijalankan saat halama web sudah di download sepenunya
(100% loaded) . akan jadi tidak logis ketika kode sudah dijalankan sedangkan
elemen yang akan ditambahkan JQuery belum ada.
Catatan :
Sebenernya penempatan kode JQuery
bisa dimana saja pada bagian body, akan tetapi akan lebih memudahkan jika kita
menempatkan semuanya sebelum penutup </body> tujuannya agar loading
halaman tidak terhalang loading file JQuery.
6.
Memilih elemen html yang akan digunakkan (ingat
selector pada css)
$(“.img”) clik (function(){
$(this).hide();
});
Ini
adalah kode utama dari JQuery, dengan syntax dasar
$(“.selector”).action()
Perhatikan
contoh yang diberikan untuk memahami penggunaan JQuery.
1.
Simpan file proyek html :
-
Img
-
JS
-
Index
-
Style
2.
Letakkan file JQuery dalam folder “JS”
3.
Dalam index.html buat koneksi antara html dan
JQuery
<head>
<meta charset=”utf-8”>
<title> bermula JQuery
kelas X </title>
<link rel=”style sheet”
type=”text/css” href=”style.css”>
<script
src=”JS/JQuery-1.11.2.min.js”></script>
4.
Persiapkan elemen html, pada contoh berikut ini
kita gunakkan elemen <p>
<div id=”container”>
<p> kalimat
pertama </p>
<p> kedua klik
dong! </p>
<p> ketiga
klik dan hilang </p>
</div>
5.
Tambahkan kode JQuery pada baris sebelum
</body>
<script>
$(document).ready
(function(){
$(“p”). clik
(function(){
$(this).hide();
});
});
</script>
</body>
6.
Coba jalankan
-
Coba ganti elemen yang digunakkan, misalnya
menggunakkan gambar.
1 komentar:
Write komentarTengkiww kak sudah membuat blog ini,blognya bgus sekli sngat mempermudah saya dalam belajar, blognya juga mudah sekli di pahami,saya harap kedepannya lebih banyak yaa kak krna saya ingin sekli blajar dan memperdalam ilmu ilmunyaaa. Trimaksih ya kak.
ReplyPerknalkan saya GITA LESTARI. kunjungi website kmpus kmi di https://www.atmaluhur.ac.id/
EmoticonEmoticon