Substansi:
- Apa itu JQuery?
- Apa Kegunaan JQuery?
- Teknik eksekusi dengan element
- Manipulasi HTML dengan DOM
- Customize event browser
Teknologi jQuery pada HTML5
1. Apa itu JQuery?
jQuery adalah javascript library, jQuery mempunyai semboyan "write less, do more". jQuery dirancang untuk memperingkas kode-kode javascript.
2. Apa Kegunaan JQuery?
- Mengakses bagian halaman tertentu dengan mudah.
- Mengubah tampilan bagian halaman tertentu
- Mengubah isi dari halaman
- Merespon interaksi user dalam halaman
- Menambahkan animasi ke halaman
- Mengambil informasi dari server tanpa me-refresh seluruh halaman
- Menyederhanakan penulisan Javascript biasa.
3. Teknik eksekusi dengan element
Langkah-langkah belajar JQuery:
1. Download jquery dari situs http://www.jquery.com
2. Masukkan kode script jquery dibawah tag <head>
<script type="text/javascript" src="jquery-1.3.min.js"></script>
3. Coba praktekan latihan pertama berikut ini:
Pada latihan pertama ini, saya ingatkan supaya simpan terlebih dahulu pertanyaan-pertanyaan Anda tentang sintak jQuery, karena akan kami jelaskan setelah praktek pertama ini, selamat mencoba!
Latihan1
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.show').click(function(){
$('p.jquery').show(1000);
});
$('a.hide').click(function(){
$('p.jquery').hide(1000);
});
});
</script>
</head>
<body>
<h1>Hello World With jQuery</h1>
<p><a href="#" class="show">Show</a>
<a href="#" class="hide">Hide</a></p>
<p class='jquery' style="display:none">Semboyan jQuery adalah
"write less, do more" dengan kata lain
"kesederhanaan dalam penulisan code,
tapi menampilkan banyak kelebihan</p>
</body>
</html>
Hasilnya:
jQuert show-hide
Sintaks jQuery
Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.
$(selector).action()
Penjelasan:
- $, untuk mendefinisikan jQuery
- (selector), untuk menunjukkan elemen yang dipilih atau dituju
- action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.
Contoh:
- $(this).hide() -- menyembunyikan elemen saat ini
- $("p").hide() -- menyembunyikan semua paragraf atau konten dari tag
- $(".test").hide() -- menyembunyikan elemen yang mempunya class="test"
- $("#test").show() -- menampilkan elemen yang mempunyai id="test"
Efek-Efek dengan jQuery
Berikut adalah efek-efek siap pakai yang disediakan oleh jquery.
jQuery show() Effect
Berfungsi untuk menampilkan elemen yang tersembunyi.
$(selector).show(speed,callback)
| Parameter | Deskripsi |
|-----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| speed | (Optional). Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa : ->miliseconds (contoh : 1500) ->"slow" ->"normal" ->"fast" |
| callback | (Optional). Suatu fungsi yang akan dijalankan apabila efek show selesai dijalankan. |
Latihan2:
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.tombol').click(function(){
$('p').show(1000,tampilkanAlert);
});
});
function tampilkanAlert(){
alert("Awas, paragraph mucul!!!");
}
</script>
</head>
<body>
<h1>Latihan2</h1>
<p style="display:none">Kadang ini bisa menjadi paragraph
tersembunyi!</p>
<button class="tombol">Show</button>
</body>
</html>
Hasilnya:
jQuery alert
Query hide() Effect
Berfungsi untuk menyembunyikan elemen yang dipilih.
$(selector).hide(speed,callback)
Untuk parameter speed dan callback adalah sama dengan show() effect.
jQuery toggle() Effect
Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan yang tersembunyi,menyembunyikan yang tampak.
$(selector).toggle(speed,callback,switch)
Penjelasan:
switch: boolean
- True, hanya untuk menampilkan semua elemen
- False, hanya menyembunyikan semua elemen
Latihan3:
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.tombol').click(function(){
$('p').toggle(true);
});
});
</script>
</head>
<body>
<h1>Latihan3</h1>
<p style="display:none">Kadang ini bisa menjadi paragraph
tersembunyi, karena pengaruh toggle!!</p>
<button class="tombol">Show All Elements</button>
</body>
</html>
Hasilnya:
jQuery toggle
4. Manipulasi HTML dengan jQuery
jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau menambah konten, dan sebagainya terhadap HTML.
html()
Untuk me-set konten (biasanya kita sebut innerHTML) dari elemen HTML yang dipilih kita gunakan.
$(selector).html(content).
Latihan4:
<html>
<head>
<title>Belajar jQuery</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#lihat').click(function(){
var isinya = $('#paragraf').html();
alert(isinya);
});
$('#isikan').click(function(){
var isilagi = $('#isi').val();
alert(isilagi);
$('#paragraf').html(isilagi);
});
});
</script>
</head>
<body>
<h1>Latihan4</h1>
<button id="lihat">Lihat</button>
<p id="paragraf">
jQuery mempunyai kemampuan yang powerfull dalam hal manipulasi,
mengambil atau menambahkan konten, dan sebagainya
terhadap HTML
</p>
Teks : <input type="text" id="isi">
<button id="isikan">Isikan</button>
</body>
</html>
Hasilnya:
jQuery html
