7991f pertemuan ke 7

PENGANTAR
JQUERY

STMIK PPKIA PRADNYA PARAMITA MALANG / 2016

“Apa itu Jquery?”

Library JavaScript yang memungkinkan programmer untuk membuat
web tanpa harus secara eksplisit menambahkan event ataupun
properti pada halaman web

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)


Memul a i denga 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 ….
4. Kemudian buat skrip untuk mengeksekusi program yang kita inginkan
5. Terakhir buatlah skrip jQuery dan sesuaikan dengan class atau id yang
telah didefinisikan

1.
2.

3.

Cara Kerja
JQuery

jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan
semua dihalaman web.
Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan
class atau id yang telah didefinisikan.
Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen
yang sudah dipilih.




$(document).ready(function(){
$(".sembunyi").click(function(){
$("#foto").hide("slow");
});
3

$(".tampil").click(function(){
$("#foto").show("normal");
});
});



Sembunyikan
Tampilkan
2




1

Memahami jQuery

jQuery Function
Struktur jQuery :

Element/expression

$ (“div”).addClass(“xyz”);
jQuery method

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
(#)
3. Selector class  cara penggunaannya dengan menyertakan titik (.)

Selector tag

$(document).ready(function(){
$("div").addClass("merah");
});

.merah {
color: red;
font-weight: bold;
}



paragraf pertama

item 1 item 2item 3



Selector id

$(document).ready(function(){
$("#daftar").addClass("merahkuning");
});


.merahkuning {
color: red;
font-weight: bold;
background : yellow;
padding : 3px;
}


paragraf pertama

item 1item 2item 3


Selector class




$(document).ready(function(){
$("#daftar").addClass("merahkuning");
$(".subdaftar").addClass("kuninghitam");
});


.merahkuning {
color: red;
font-weight: bold;
background-color:yellow;
padding: 3px;
}

.kuninghitam{
color : yellow;
background-color: black;
}


paragraf pertama


item 1
item 2item 3


Memahami
event

Selectors yang mencari elemen – elemen apa saja yang akan dilakukan operasi
terhadapnya, maka Event memutuskan kapan yang dilakukan operasi

$(document).ready(function(){
$("a").click(function(){
alert("selamat datang di website facebook");
}); });




klik disini untuk membuka website facebook



Memahami Effect

Efek
mengenai
menampilkan,
menyembunyikan

suatu
elemen,
menggerakkan
elemen
dan
menganimasi elemen





$(document).ready(function(){
setTimeout(function(){
$("#kotak").fadeOut("slow",function(){
$("#kotak").remove();
});
}, 3000);
});

#kotak {

width : 300px;
height : 50px;
background: lightyellow;
border : 1px solid black;
padding : 5px;
}

Perhatikan baik -baik teks ini, karena
teks akan hilang dalam hitungan 3 detik