P E N G A N T A R
J Q U E R Y
“Apa itu Jquery?”
Library JavaScript yang memungkinkan programmer untuk membuat
web tanpa harus secara eksplisit menambahkan event ataupun
Aturan
Jquery
1. Dapat diakses ketika dokumen sudah siap
$(document).ready(function() {
//skrip jquery ditulis disini
};
2. Terdiri dari $(selector).action()
S : mendefinisikan jQuery
(selector) : object/elemen yang dituju
action : jQuery action yang dipilih kepada object yang dituju
3. Menambahkan script (memanggil library jQuery)
M e m u l a i d e n g a n
J Q u e r y
1. Download library jQuery di http : //jquery.com
2. Simpan file hasil download dalam folder tersendiri, kemudian buat
dokumen baru yang berisi struktur HTML
3. Selanjutnya panggil library jQuery diantara tag <head>….</head>
4. Kemudian buat skrip untuk mengeksekusi program yang kita inginkan
5. Terakhir buatlah skrip jQuery dan sesuaikan dengan class atau id yang
Cara Kerja
JQuery
1. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua dihalaman web.
2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan.
3. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih.
<html> <head>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".sembunyi").click(function(){ $("#foto").hide("slow"); }); $(".tampil").click(function(){ $("#foto").show("normal"); }); }); </script> </head> <body> <button class="sembunyi">Sembunyikan</button> <button class="tampil">Tampilkan</button>
<p><img id="foto" src="Penguins.jpg" /></p> </body>
</html>
1
3
Memahami jQuery
Struktur jQuery
: $ (“div”).addClass(“xyz”);
jQuery Function
Memahami selector
Selector berfungsi untuk memilih/mengambil elemen – elemen tertentu
yang ingin dilakukan operasi terhadap elemen tersebut atau memanipulasi
elemen – elemen tersebut.
Selector berdasarkan elemennya dapat dibagi 3 yaitu
1. Selector tag
cara penggunaannya dengan langsung nama tag
2. Selector id
cara penggunaannya dengan menyertakan tanda kres
(#)
Selector tag
<html> <head><script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){
$("div").addClass("merah"); }); </script>
<style type="text/css"> .merah {
color: red;
font-weight: bold; } </style>
</head> <body> <div>
<p>paragraf pertama</p> </div> <div>
<ul><li>item 1</li> <li>item 2</li><li>item 3</li></ul></div> </body>
Selector id
<html> <head>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script> <script type="text/javascript">
$(document).ready(function(){
$("#daftar").addClass("merahkuning"); });
</script>
<style type="text/css"> .merahkuning {
color: red;
font-weight: bold; background : yellow; padding : 3px;
} </style></head> <body>
<div>
<p>paragraf pertama</p></div> <div>
<ul id="daftar">
Selector class
<html> <head>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#daftar").addClass("merahkuning"); $(".subdaftar").addClass("kuninghitam"); }); </script> <style type="text/css"> .merahkuning { color: red; font-weight: bold; background-color:yellow; padding: 3px; } .kuninghitam{ color : yellow;
background-color: black; } </style></head> <body> <div> <p>paragraf pertama</p></div> <div> <ul id="daftar"> <li>item 1</li>
Memahami
event
Selectors
yang mencari elemen – elemen apa saja yang akan dilakukan operasi
terhadapnya, maka
Event
memutuskan kapan yang dilakukan operasi
<html> <head>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){
alert("selamat datang di website facebook"); }); });
</script> </head> <body>
<a href="http://facebook.com">
klik disini untuk membuka website facebook</a> </body>
Memahami Effect
Efek
mengenai
menampilkan,
menyembunyikan
suatu
elemen,
menggerakkan
elemen
dan
menganimasi elemen
<html> <head>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ setTimeout(function(){ $("#kotak").fadeOut("slow",function(){ $("#kotak").remove(); }); }, 3000); }); </script> <style type="text/css"> #kotak {
width : 300px; height : 50px;
background: lightyellow; border : 1px solid black; padding : 5px;
} </style> </head> <body> <h3 id="kotak">
Perhatikan baik -baik teks ini, karena
