JQUERY
JQUERY
A.
Pengenalan JQuery
JQuery adalah salah satu framework dan sebuah cara
untuk menuliskan kode JavaScript. JQuery sangat ringan dan cepat dalam
menuliskan kode untuk menyelesaikan berbagai masalah. Jika hanya menggunakan
JavaScript maka kode menjadi sangat panjang, dengan JQuery akan lebih ringkas. JQuery
pertama dirilis di tahun 2006 oleh pembuatnya yaitu John Resig.
Sebelum memulai untuk menggunakan JQuery, akan lebih
baik jika mengenal lebih dulu tentang HTML, CSS dan JavaScript. JQuery juga
memiliki lisensi dibawah GNU yang artinya adalah aplikasi bersifat open source
/ bebas dipublikasikan oleh siapa pun. Ukuran filenya juga cukup kecil sebesar
56 Kb (compressed).
Banyak perusahaan-perusahaan web besar didunia
menggunakan JQuery, seperti Google, Microsoft, IBM dan Netflix.
B.
Fitur yang ada di JQuery
JQuery memiliki fitur-fitur didalamnya sebagai
pendukung atau pelengkap, yaitu antara lain :
1.
Menggunakan
element DOM (Document Object Model), sehingga tampilan website lebih interaktif
dan dinamis.
2.
Memanipulasi
Class pada CSS serta mendukung untuk CSS 3.
3.
AJAX.
4.
Event-event.
5.
Animasi beserta
efek-efek didalamnya.
6.
Plugins dan
ekstensinya.
7.
Cocok digunakan
disemua browser.
C. Keunggulan JQuery
C. Keunggulan JQuery
1. Dapat mengakses/membuka
bagian halaman tertentu dari web dengan mudah tanpa ada library JavaScript
secara khusus. JQuery akan mempunyai cara yang mudah untuk mengakses bagian
tertentu dari halaman web. Tidak harus mengikuti aturan DOM (Document Object
Model) dan tidak perlu bergantung dengan struktur HTML.
2. Dapat mengubah
tampilan halaman tertentu dengan mengatasi permasalahan antara browser dan CSS.
Karena terkadang semua browser tidak mendukung perintah CSS. Sehingga menjadi
kesulitan saat harus mendesign ulang lagi halaman web.
3. Dapat mengubah
isi halaman dengan beberapa baris perintah. Seperti mengganti teks, mengurutkan
daftar/list, menghapus tabel, menambah teks ataupun gambar, dll.
4. Ada respon dari
interaksi pengguna dalam halaman melalui kemudahan untuk mengatur tampilan
website itu sendiri. Event handling pada JavaScript pun terbatas pada
object-object tertentu, namun lewat JQuery dapat melengkapi penanganan event
handling menjadi lebih mudah.
5. Dapat menambah
animasi ke dalam halaman web. Animasi berbentuk video, GIF, flash, dll.
6. Mudah mengambil
informasi dari server tanpa refresh seluruh halaman. Jika menggunakan AJAX
penerapannya cukup rumit. JQuery menawarkan kemudahan untuk hal tersebut.
7.
Menyederhanakan kode
JavaScript yang panjang dalam penulisannya.
D. Event yang dapat ditangani oleh JQuery adalah sebagai berikut :
D. Event yang dapat ditangani oleh JQuery adalah sebagai berikut :
a)
click() : saat
tombol mouse ditekan sekali
b)
dbclick() : saat
tombol mouse ditekan ganda
c)
mousedown() :
saat tombol mouse ditekan
d)
mouseenter() :
saat penunjuk mouse menunjuk ke elemen
e)
mouseleave() :
ketika penunjuk mouse meninggalkan elemen
f)
mousemove() :
ketika penunjuk mouse digerakkan
g)
mouseover() :
saat mouse menunjuk ke elemen atau anak-anaknya
h)
mouseout() : saat
mouse meninggalkan elemen
i)
mouseup() : ketika
mouse dilepas
j)
hover() :
menangani saat mouseenter dan mouseleave
E.
Tutorial Membuat Event Click
Event click saat mouse ditekan. Jadi sebelum membuatnya kita harus mendownload lebih dulu JQuerynya. Beberapa event sudah dijelaskan sebelumnya, jadi silakan mencobanya.
Berikut ini contoh codingnya.
<html>
<head>
<tittle>Event
Click</tittle>
<script src=”jquery-2.1.1.min.js”>
</script>
<script
type=”text/javascript”>
$(document).ready(function() {
$(“#tombol”).click(function() {
alert( “Hallo!!”);
});
});
</script>
</head>
<body>
<button id=”tombol”>Click
me!</button>
</body>
</html>
Keterangan
coding :
Saat tombol
ditekan mouse maka akan muncul alert yang menyatakan “Hallo!!”.
Hasil coding saat dijalankan di localhost.
Komentar
Posting Komentar