Scribd Logo

Bahasa

Unggah

Selamat datang di Scribd!

Materi 5 JQuery

Diunggah oleh

Ryan
6 tayangan19 halaman

Judul Asli

materi 5 JQuery

Hak Cipta

© © All Rights Reserved

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
6 tayangan19 halaman

Materi 5 JQuery

Diunggah oleh

Ryan

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
dari 19

PEMROGRAMAN WEB

JQuery

PEMROGRAMAN WEB
Pendahuluan JQuery
• JQuery adalah library JavaScript yang berfungsi memudahkan
pembuatan program pada browser internet.
• JQuery untuk memudahkan penulisan kode JavaScript,
sehingga kode javascript menjadi lebih sederhana(kode
menjadi ringkas)
• JQuery dilengkapi beragam fitur untuk memanipulasi event
dan elemen pada dokumen HTML

PEMROGRAMAN WEB
Struktur Kode JQuery
• Sintaks dasar dari Jquery adalah :
• $(selector).action();
• Dari struktur penulisan kode dasar di atas, yaitu :
1. Tanda dolar ($) digunakan untuk mendefinisikan atau mengakses
Jquery
2. selector digunakan untuk meng-query atau mencari elemen
HTML yang diinginkan.
3. .action() adalah prosedur tindakan yang akan diterapkan pada
elemen yang dipilih pada bagian selector

PEMROGRAMAN WEB
Contoh penggunaan JQuery
$(this).hide() => menyembunyikan elemen terpilih
$(“p”).hide() => menyembunyikan semua elemen <p>
$(“.kotak”).hide() => menyembunyikan semua elemen dengan
class=“kotak”
$(“#kotak”).hide() => menyembunyikan elemen dengan
id=“kotak”

PEMROGRAMAN WEB
Contoh :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Contoh Penggunaan JQuery</title>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

PEMROGRAMAN WEB
Lanjut Contoh :

<body>
<h2>Klik untuk mengaktifkan fungsi Hide</h2>
<p>Satu</p>
<p>Dua</p>
<button>Klik</button>
</body>
</html>

PEMROGRAMAN WEB
Seleksi :odd dan :even
• Metode seleksi :odd dan :even ini digunakan untuk
menyeleksi elemen anak berdasarkan perhitungan
ganjil dan genap.
• Fungsi ini biasa digunakan pada elemen <tr> pada
tabel.
• Penggunaaan pada bagian selector dengan cara
penulisan :
• $(“tr:odd”).action()
• $(“tr:even”).action()
PEMROGRAMAN WEB
Contoh :odd & :even :
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Contoh penggunaan :odd dan :even</title>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#genap").click(function(){
$('tr').removeClass('style');
$('table tbody tr:even').addClass('style');
});
$("#ganjil").click(function(){
$('tr').removeClass('style');
$('table tbody tr:odd').addClass('style');
});
});
</script>

PEMROGRAMAN WEB
Lanjut Contoh :odd & :even :
<style type="text/css">
table{
width: 620px;
font-family: Arial;
background-color: #F6F5F4;
border: 1px solid #c5c5c5;
}
table th{
padding: 10px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-shadow: 1px 1px 0 #6e6964;
background: -moz-linear-gradient(center top, #c8bfb2 0%, #a49d92 100%)
repeat scroll 0 0 transparent;
}

PEMROGRAMAN WEB
Lanjut Contoh :odd & :even :
table tr td{
padding: 7px;
font-size: 13px;
color: #666;
background: #f8f8f8;
border-top: 1px solid #ddd;
}
table tr.style td{
background: #f1ece2;
}
</style>
</head>

PEMROGRAMAN WEB
Lanjut Contoh :odd & :even :
<body>
<button id="genap">Style Genap</button>
<button id="ganjil">Style Ganjil</button>
<br><br>
<table cellpadding="0" cellspacing="0" style="">
<thead>
<tr>
<th>Nama Barang</th>
<th>Keterangan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semen</td>
<td>Paket Pasir</td>
<td>Rp. 100.000,-/pcs</td>
</tr>
PEMROGRAMAN WEB
Lanjut Contoh :odd & :even :
<tr>
<td>Oli</td>
<td>Pelumas Mesin</td>
<td>Rp. 23.000,-/kaleng</td>
</tr>
<tr>
<td>Batu Belah</td>
<td>Bahan Pondasi</td>
<td>Rp. 2.100.000,-/coll</td>
</tr>
<tr>
<td>Paku Beton</td>
<td>Wall piercing</td>
<td>Rp. 42.000,-/kg</td>
</tr>
</tbody>
</table>
</body>
</html>

PEMROGRAMAN WEB
Fungsi Event
• Semua Bahasa pemrograman termasuk Jquery adalah
Bahasa pemrograman berbasis event-driven
• Artinya programmer menentukan action yang dipicu oleh
suatu kejadian atau event.
• Suatu action oleh pengunjung yang dapat memicu respon
dari program disebut event.
• Sebuah event dapat terjadi atau terpicu ketika ada suatu
aktivitas yang dilakukan oleh pengguna.

PEMROGRAMAN WEB
Fungsi dblclick()
• Pada contoh dibawah ini, fungsi dblclick() digunakan
untuk menyembunyikan elemen <p> ketika pengguna
mengklik ganda pada dokumen.

PEMROGRAMAN WEB
Contoh fungsi dblclick()
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Contoh Penggunaan Fungsi dblclick()</title>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("p").dblclick(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p>Contoh Handling Event Untuk Klik Ganda.</p>
<p>Satu</p>
<p>Dua</p>
<p>Tiga</p>
</body>
</html>

PEMROGRAMAN WEB
Manipulasi DOM
• DOM adalah Document Object Model
• Salah satu penggunaan Jquery yang paling lazim adalah untuk
mengubah dan manipulasi dokumen HTML beserta atributnya.
• Jquery menyediakan 3 fungsi utama untuk mengambil konten :
1. text() : berfungsi membaca atau mengambil isi teks dari elemen terpilih
2. html() : berfungsi membaca atau mengembalikan konten dari elemen
terpilih, termasuk elemen HTML-nya
3. val() : berfungsi membaca atau mengembalikan nilai dari kotak isian pada
form

PEMROGRAMAN WEB
Contoh fungsi DOM
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Mengambil Konten</title>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function () {
alert("Teksnya = "+$("#kalimat").text());
});
$("#btn2").click(function () {
alert("HTML-nya = "+$("#kalimat").html());
});
});
</script>
</head>

PEMROGRAMAN WEB
Lanjut Contoh fungsi DOM

<body>
<p id="kalimat">Ini adalah teks <b>tebal</b> dan <i>miring</i>
di paragraf.</p>
<button id="btn1">Tampilkan Teks</button>
<button id="btn2">Kode HTML-nya</button>
</body>
</html>

PEMROGRAMAN WEB
TERIMA KASIH
SAMPAI JUMPA
MINGGU DEPAN

PEMROGRAMAN WEB

Anda mungkin juga menyukai