JQuery merupakan suatu framework (pustaka) Javascript yang menekankan
bagaimana interaksi antara Javascript dengan HTML. Pada perkembangannya JQuery
tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan
kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web
menggunakannya. JQuery memiliki slogan“Write less, do more” yang
kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi
dengan hasil yang lebih banyak.
JQuery adalah library open source dengan lisensi GNU ( General Public
License ) dan MIT License. Dari sisi ukurannya, framework JQuery sungguh
ramping, hanya sekitar 60 KB dan hanya terdiri dari satu file, sehingga
dengan menggunakan JQuery akan jauh lebih cepat dan mudah dalam perpindahan
dokument HTML, penggunaan animasi di dalam web sehingga terlihat seperti
menggunakan flash.
Cara Penerapan JQuery...
Karna JQuery merupakan sebuah pustaka/library, tentunya saudara harus
memiliki JQuerynya terlebih dahulu. Silahkan Download library JQuery di
http://jquery.com setelah itu silahkan simpan di folder dalam drive saudara (
misal D:/jquery/ file library jquery ).
Selanjutnya saya akan berikan contoh penggunaan JQuery bagaimana
menampilkan dan menutup sebuah gambar dengan menggunakan dua buah tombol.
Contoh :
< html>
< head> < title>Contoh Penerapan JQuery< /title> < script type="text/javascript" src="jquery-1.5.2.min.js" mce_src="jquery-1.5.2.min.js">< /script> < script type="text/javascript"> $(document).ready(function(){ $(".tutup_gambar").click(function(){ $("#gambar").hide("slow"); }); $(".tampil_gambar").click(function(){ $("#gambar").show("slow"); }); }); < /script> < /head> < body> < button class="tutup_gambar">Tutup Gambar< /button> < button class="tampil_gambar">Tampil Gambar< /button> < p>< img id="gambar" src="yonand.jpg" mce_src="yonand.jpg" style="border:7px solid; padding:5px;"/>< /p> < /body> < /html> |
|
Simpan file diatas dengan index.html, di tempatkan persis sama dengan
file library JQuery yg telah didownload, kemudian tempatkan juga sebuah gambar
dengan nama yonand.jpg.
penjelasan untuk script diatas :
fungsinya
memanggil library JQuery yang didownload.
|
< script type="text/javascript"
src="jquery-1.5.2.min.js"
mce_src="jquery-1.5.2.min.js">< /script>
|
JQuery memastikan bahwa elemen yang diinginkan sudah ditampilkan dihalaman
web.
|
$(document).ready(function()
|
Setelah semua Elemen ditampilkan, kemudian jQuery akan memilih elemen
berdasarkan id, class atau tag. Atau lebih dikenal denganselector.
|
$(".tutup_gambar")
$(".tampil_gambar")
$("#gambar")
|
Setelah
elemen dipilih, berikutnya adalah memberikan aksi/operasi terhadap
elemen yang sudah dipilih. Contoh
disamping-> show.
|
$(".tampil_gambar").click(function(){
$("#gambar").show("slow"); }); |
Memahami sedikit tentang JQuery :
$ ->
merupakan simbol JQuery.
{"id/class/tag"} -> Elemen/Slector pd Jquery
.addclass("XXX") -> memberi perintah pada elemen
|
$("id/class/tag").addclass("XXX")
|
Intinya dari Fungsi JQuery akan mencari suatu elemen tertentu yang telah
didefenisikan pada bagian body, kemudian akan mengeksekusi bagian elemen
terssebut sesuai dengan perintah yang diberikan.
Sekian pengenalan Jquerynya semoga dari sedikit penjelasan diatas bisa
saudara kembangkan lagi..
0 komentar:
Post a Comment