JQuery
JQuery
Pengenalan
jQuery adalah javascript library, jQuery mempunyai semboyan write less, do more. jQuery dirancang untuk memperingkas kodekode javascript dan gratis. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interaksi ajax. Untuk mempelajari jQuery, harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript. STMIK Asia Malang -
Kemampuan jQuery
Kemudahan mengakses elemen-elemen HTML Memanipulasi elemen HTML Memanipulasi CSS Penanganan event HTML Efek-efek javascript dan animasi Modifikasi HTML DOM AJAX Menyederhanakan kode javascript lainnya
STMIK Asia Malang -
Menggunakan jQuery
Untuk memulai jQuery, harus mendownload jquery.js dari situs http://www.jquery.com. Setiap menulis kode javascript dengan menggunakan jquery, masukkan file jquery.js kedalam kode javascript.
<script
type="text/javascript src="jquery.js"></script>
Contoh
<html><head> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").hide(1000); });
$(".tombol2").click(function(){
$("p").show(1000); }); }); </script></head>
<body>
<p>Hello World!</p> <button class="tombol1">Sembunyikan</button> <button class="tombol2">Tampilkan</button> </body></html>
Sintaks jQuery
Sintaks jQuery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Sintaks : $(selector).action()
$()
untuk membuat objek jQuery Tanda dollar, untuk mendefinisikan jQuery (alias untuk jQuery class) (selector), untuk menunjukkan elemen yang dipilih atau dituju action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih. STMIK Asia Malang -
Contoh Sintaks
$(this).hide()
menyembunyikan
$("p").hide()
menyembunyikan
tag <p>
$(".test").hide()
menyembunyikan
class="test"
$("#test").show()
menampilkan
Ready event
Segala sesuatu yang dilakukan menggunakan jQuery membaca atau memanipulasi document object model (DOM), maka perlu dipastikan mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, perlu menambahkan kode ready event untuk dokumen.
Berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan javascript biasa:
window.onload
jQuery Selectors
Selectors memungkinkan kita untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. jQuery element selectors dan attribute selectors memungkinkan kita untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten.
memilih semua elemen <p> $("p.intro") memilih semua elemen <p> yang mempunyai class="intro". $("p#demo") memilih elemen <p> yang mempunyai id="demo".
jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada.
$("[href]")
href. $("[href='#']") memilih semua elemen dengan atribut href bernilai="#". $("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#". $("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".
STMIK Asia Malang -
jQuery Selector
jQuery Selector
jQuery Events
Salah satu kemampuan utama jQuery adalah menangani event. Dalam pemograman jQuery, biasanya kode-kode pemograman diletakkan di dalam penanganan event yang terjadi pada suatu atau kelompok elemen yang dipilih. Hampir mirip dengan Visual Basic, biasanya suatu kode dijalankan apabila ada sesuatu yang terjadi (event) pada suatu elemen. Misalnya, kalau ada tombol di klik, maka action atau kode apa yang dijalankan, apabila ada combox dipilih, kode apa yang dijalankan.
Contoh
$(".tombol1").click(function(){ $("p").hide(1000); }); Kode di atas berarti apabila terjadi event mengklik elemen yang mempunyai class=tombol1, maka lakukan fungsi hide() terhadap semua element <p>.
Daftar Event
Salah satu kemampuan jQuery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk membuat efek memudar di Javascript, kita harus membuat kode yang cukup panjang. Tapi dengan menggunakan jQuery cukup menggunakan fungsi $(selector).fadeIn()
Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang tersembunyi melalui CSS adalah display:none (bukan visibility:hidden). Sintaks :
$(selector).show(speed,callback)
Contoh
<html><head> <script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $(".tombol1").click(function(){ $("p").show(1000,tampilkanAlert); }); }); function tampilkanAlert(){ alert("Paragraf sekarang muncul"); }
</script></head>
<body> <p style=display:none>Ini adalah paragraph tersembunyi.</p> <button class="tombol1">Show</button>
</body></html>
Untuk parameter speed dan callback adalah sama dengan show() effect. Contoh :
$(".tombol1").click(function(){ $("p").hide(); });
STMIK Asia Malang -
Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan yang tersembunyi, menyembunyikan yang tampak. Sintaks :
$(selector).toggle(speed,callback,switch)
Keterangan
Contoh
<html><head> <script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $(".tombol1").click(function(){ $("p").toggle(true); }); }); </script></head> <body> <p>Ini adalah paragraf</p>
</body></html>
Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh:
$(".tombol1").click(function(){ $("p").slideDown(); });
STMIK Asia Malang -
Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh:
$(".tombol1").click(function(){ $("p").slideUp(); });
STMIK Asia Malang -
Gabungan antara slideDown() dan slideUp(). Menyembunyikan elemen jika dalam keadaan visible, menampilkan elemen jika dalam keadaan hidden. Sintaks :
$(selector).slideToggle(speed,callback)
Untuk parameter speed dan callback adalah sama dengan fungsi show().
Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#contact").click(function(){ $("#contact-box").slideToggle("slow"); }); }); </script></head> <body> <p><span id="contact" style="cursor:hand;backgroundcolor:# ababab;padding:3;font family:Verdana">Contact</span></p> <div id="contact-box style="background:#98bf21;height:200px;width:300px;position:relative;disp lay:none;padding:10"> <form> Nama : <input type=text><p> Email : <input type=text><p> Komentar :<textarea rows=5></textarea><p><input type=submit value=kirim> </div> <p>jQuery adalah javascript library, jQuery mempunyai semboyan "write less, do more". jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah Javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. <p>Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.
Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar. Sintaks :
$(selector).fadeIn(speed,callback)
Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh:
$(".tombol1").click(function(){ $("p"). fadeIn(); });
STMIK Asia Malang -
Untuk parameter speed dan callback adalah sama dengan fungsi show().
Contoh
<html><head> <style> #box { background-color:#96BC43; border:solid 3px #333333; height:160px; margin-top:30px; } </style> <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){ $('.fadeOut_box').click(function(){ $('#box').fadeOut("slow"); }); $('.fadeIn_box').click(function(){ $('#box').fadeIn("slow"); }); }); </script> <body> <a href="#" class="fadeOut_box">fadeOut()</a> <a href="#" class="fadeIn_box">fadeIn()</a>
Mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan. Sintaks :
$(selector).fadeTo(speed,opacity,callback)
Untuk parameter speed dan callback adalah sama dengan fungsi show(). Untuk parameter opacity bisa bernilai 0 sampai 1. Contoh :
$(".tombol1").click(function(){ $("p"). fadeTo(1000,0.6);
STMIK Asia Malang -
Mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya. Keadaan yang diubah ini berdasarkan CSS. Nilai properti CSS yang berubah secara berangsur-angsur, hal ini untuk menciptakan efek animasi. Nilai properti CSS yang bisa diubah adalah nilai bertipe angka, baik satuannya pixel atau persen Untuk tipe string tidak bisa dianimasikan. Sintaks :
$(selector).animate(styles,speed,easing,callback) STMIK Asia Malang
Keterangan
Keterangan
Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".tombol1").click(function(){ $("#box").animate({height:"300px"}); });
$(".tombol2").click(function(){
$("#box").animate({height:"100px"}); }); }); </script></head> <body> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> <button class="tombol1">Animasi</button> <button class="tombol2">Reset</button>
</body></html>
Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow");
});
$("#stop").click(function(){ $("#box").stop(false,true); }); }); </script></head> <body> <p><button id="start">Start Animasi</button><button id="stop">Stop Animasi</button></p> <div id="box" style="background:#ababab;height:100px;width:100px;position:relative"></div> </body></html>
$(selector).delay()
Berguna untuk men-set delay untuk semua fungsi yang masih antri untuk elemen yang dipilih. Sintaks :
$(selector).delay()
$(selector).dequeue()
Menjalankan fungsi berikutnya yang lagi antri untuk elemen yang dipilih. Sintaks :
$(selector).dequeue()
$(selector).queue()
Menghentikan semua fungsi yang lagi ngantri dan belum dijalankan. Sintaks :
$(selector).stop(queueName)
jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau menambah konten, dan sebagainya terhadap HTML.
STMIK Asia Malang -
html()
Untuk me-set konten (biasanya kita sebut innerHTML) dari elemen HTML yang dipilih kita gunakan $(selector).html(content). Apabila parameter content tidak kita tentukan maka fungsi html() berguna untuk mendapatkan konten dari HTML.
Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("#lihat").click(function(){ var isinya = $("#paragraf").html(); alert(isinya); }); $("#isikan").click(function(){
</body></html>
val()
Pada contoh di atas kita lihat ada kode var isilagi = $("#isi").val(); Kode ini berarti kita mengambil nilai dari <input type=text id=isi> dan memasukkannya ke variabel isilagi. Sama dengan fungsi html(), apabila kita masukkan nilai dari val(), maka artinya kita me-set nilai dari elemen yang dipilih. Biasanya val() digunakan pada elemen-elemen HTML <input>, contoh :
Kode di atas berarti kita me-set nilai <input type=text id=isi> dengan hallo apa kabar. STMIK Asia Malang -
attr()
Dengan menggunakan fungsi attr(), memudahkan untuk mendapatkan nilai dari suatu properti elemen HTML yang kita pilih. Sintaks :
$(selector).attr(properties,nilai);
Parameter
properties adalah nama properti yang ingin kita ambil atau set. Contoh properti misalnya : id, class, title, src, href dan sebagainya. Parameter nilai, apabila kita isi artinya kita me-set nilai properti yang kita tetukan, apabila kosong artinya kita mengambil nilai properti yang kita tentukan. STMIK Asia Malang -
Contoh
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('.link').click(function(){ var id=$(this).attr("id"); var class=$(this).attr("class"); var href=$(this).attr("href"); alert(id); alert(class); alert(href);
});
}); </script> <a href="http://www.desrizal.com" class="link" id="13">link</a> </body>
</html>
addClass()
Berguna untuk menambahkan atau mengubah class untuk elemen yang dipilih. Sintaks :
$(selector).addClass(namakelas)
Contoh
<html><head> <style> .besar
{font-size:106px; }
.kecil { font-size:12px; } </style>
</body></html>
Daftar Fungsi
Daftar Fungsi
jQuery juga mempunyai kemampuan dalam memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi
Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih untuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties} Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.
Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("#tombol1").click(function(){
$(".p1").css("color","red"); $(".p2").css({"color":"white","backgroundcolor":"# ff8954","font-family":"Arial","fontsize":" 20px","padding":"5px"}); }); $("#tombol2").click(function(){ var nilai = $(".p1").css("color"); alert(nilai); }); }); </script></head> <body> <p class="p1">Paragraf ini cuma berubah satu properti CSS</p> <p class="p2">Paragraf ini cuma berubah banyak properti CSS</p> <button id="tombol1">ubah CSS paragraf</button> <button id="tombol2">Ambil nilai CSS paragraf 1</button>
</body></html>
Untuk memanipulasi ukuran dari elemen yang dipilih (tinggi dan lebar), maka ada dua fungsi untuk hal ini, yaitu :
$(selector).height(value) $(selector).width(value)
Jika parameter value diisi, maka artinya kita meset nilai height atau width dari elemen yang dipilih. Tetapi jika tidak diisi, maka artinya kita mengambil nilai height atau width dari elemen yang dipilih.
Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tombol1").click(function(){ $("#kotak").width("300px"); $("#kotak").height("300px"); }); $("#tombol2").click(function(){ var nilai = $("#kotak").width(); alert(nilai); }); });
</script></head>
<body><div id=kotak style="background-color:pink;width:100px;height:100px;"> Hello</div> <p> <button id="tombol1">ubah ukuran kotak</button> <button id="tombol2">Ambil nilai ukuran kotak</button>
</body></html>
Manipulasi Posisi
offset()
Untuk
mendapatkan atau me-set offset dari elemen yang dipilih. Relatif terhadap dokumen. Sintaks :
$(selector).offset(coordinates)
Parameter
Jika
kita mengosongkan parameter coordinates, artinya kita mengambil nilai offset dari elemen yang kita pilih. Fungsi offset() akan menghasil objek yang STMIK Asia Malang -
Contoh
<html> <head> <style> #div1{background-color : yellow;width : 100px;height : 100px;position : relative;left : 300;}
</style>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tombol").click(function(){ posisi=new Object(); posisi.left=$("#x").val(); posisi.top=$("#y").val(); $("#div1").offset(posisi); pos = $("#div1").offset(); alert("x="+pos.left+",y="+pos.top); }); }); </script></head> <body><div id=div1>Hello World!</div> x = <input type=text size=4 id=x><br> y = <input type=text size=4 id=y><br> <button id=tombol>Set Offset</button>
</body></html>
Manipulasi Posisi
offsetParent()
Untuk
mendapatkan element parent terdekat dengan posisi yag telah ditentukan. Sintaks.
$(selector).offset()
Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").offsetParent().css("background-color","green"); }); }); </script></head> <body><div style="width:70%;position:absolute;left:100px;top:100px"> <div style="margin:50px;background-color:yellow"> <p>Klik tombol untuk set background color untuk elemen parent terdekat dari paragraf ini</p> <div> </div> <button>ubah warna latar</button> </body></html>
Manipulasi Posisi
position()
Hampir sama dengan offset(), yaitu untuk mendapatkan atau menentukan posisi dari elemen, tetapi relatif terhadap parent. Fungsi position() akan menghasil objek yang mempunyai 2 properti yaitu top dan left.
Manipulasi Posisi
scrollLeft() Untuk mendapatkan atau menentukan scroll left offset dari elemen yang dipilih. Sintaks : $(selector).scrollLeft(offset) Parameter offset adalah nilai dalam pixel elemen akan di scroll dari posisi kiri elemen tersebut. Jika parameter offset dikosongkan, maka artinya kita mengambil nilai offset dari scroll left elemen tersebut. Contoh : $(".tombol").click(function(){ $("div").scrollLeft(300); }); STMIK Asia Malang -
Manipulasi Posisi
scrollTop() Untuk mendapatkan atau menentukan scroll top offset dari elemen yang dipilih. Sintaks : $(selector).scrollTop(offset) Parameter offset adalah nilai dalam pixel elemen akan di scroll dari posisi atas elemen tersebut. Jika parameter offset dikosongkan, maka artinya kita mengambil nilai offset dari scroll Top elemen tersebut. Contoh : $(".tombol").click(function(){ $("div").scrollTop(300); }); STMIK Asia Malang -
Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){ $("#home").click(function(){ $("#konten").animate({ scrollTop: 0},"slow");
});
$("#about").click(function(){ $("#konten").animate({ scrollTop: 500},"slow"); });
$("#contact").click(function(){
$("#konten").animate({ scrollTop: 1000},"slow"); }); });
</script>
Lanjutan Contoh
<style> #konten{
height : 500px;
overflow: hidden; background-color : yellow; } .box{ height : 500px; margin:0; padding : 0; } .link{ cursor : pointer; background-color : lightyellow; padding : 3;
Lanjutan Contoh
body{ overflow:hidden; } #home{ background-color : green; } #about{ background-color : red; } #contact{ background-color : blue; }
.aboutme{
background-color : black; color : white; font-size : 26pt; font-family : garamond;
}</style></head>
Lanjutan Contoh
<body> <span class=link id=home>Home</span> <span class=link id=about>About</span> <span class=link id=contact>Contact</span> <div id=konten> <div id=home class=box><br><b>Home</b><p> <center><font size=7>Selamat Datang</font></center></div> <div id=about class=box><br><b>About Me</b> <p><span class=aboutme>Hi,namaku Desrizal</span></p> <p><span class=aboutme>Lahir di Pekanbaru tahun 1981</span></p>
</form></div></div></body></html>
Untuk menghilangkan scroll di <div id=kontent> kita menggunakan CSS overflow:hidden; Ketika kita mengklik salah satu tab, maka kita membuat animasi scrolling menggunakan kode :
$("#konten").animate({
scrollTop: 500},"slow");
Latihan
Sebuah tabel memiliki beberapa baris, dimana baris pertama adalah header. Struktur tabel sbb:
<table> <tr><td>Ternak</td><td>Jumlah</td></tr> <tr><td>Ayam</td><td>204</td></tr> <tr><td>Sapi</td><td>131</td></tr> <tr><td>Kambing</td><td>54</td></tr> </table>
STMIK Asia Malang -
Latihan
Berilah warna salmon untuk background header, dan warna khaki untuk kolom ternak, warna ivory untuk kolom jumlah Berikan event bagi onmouseover dan onmouseout agar saat kursor melewati mereka:
Warna
background kolom ternak berganti warna menjadi yellow Warna kolom jumlah menjadi warna goldenrod