Belajar JQuery Selector

Apakah jQuery itu?
jQuery adalah suatu pustaka (library) Javascript yang ringan, tulis sedikit, melakukan banyak hal, yang
bertujuan untuk mempermudah menggunakan Javascript pada website kita. jQuery mengambil alih
tugas-tugas umum yang memerlukan penulisan banyak baris Javascript untuk menyelesaikan tugas-
tugas, dan memaketkannya menjadi metoda-metoda yang dapat dipanggil dengan sebuah kode baris
tunggal. jQuery juga menyederhanakan sejumlah hal-hal rumit dari Javascript, seperti pemanggilan AJAX
dan manipulasi DOM.

Pustaka jQuery mengandung fitur-fitur sbb. :
Manipulasi HTML/DOM
Manipulasi CSS
Metoda-metoda event HTML
Efek-efek dan animasi
AJAX
Utiliti-utiliti

Mengapa jQuery?
Ada banyak framework Javascript, namun jQuery kelihatannya paling populer dan paling banyak
dikembangkan. Beberapa perusahaan terbesar yang menggunakannya, mis. : Google, Microsfot, IBM,
Netfix.

Menggunakan jQuery pada Website
Ada 2 cara menggunakan jQuery pada sebuah website yaitu :

Download dari jQuery.com
Ada 2 versi yang tersedia, yaitu :
Versi produksi yang bisa kita gunakan untuk website yang sebenarnya berjalan karena telah diperkecil
dan dikompresi
Versi pengembangan digunakan untuk pengujian dan pengembangan (tidak dikompresi dan bisa
dibaca)
Pustaka jQuery berbentuk file Javascript tunggal, yang kita dapat mengacunya dengan tag HTML <script>
(perhatikan bahwa tag ini harus berada pada bagian <head>) :

<head>
<script src=jquery-1.10.2.min.js></script>
</head>

Menyisipkan jQuery dari CDN (Content Delivery Network)
Apabila kita tidak ingin mendonlod dan meletakkan sendiri jQuery, kita dapat menyisipkankannya dari
suatu CDN, misalnya dari Google atau Microsoft.

<head>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>
</script>
<head>
Atau
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>

Sintaks jQuery
Sintaks jQuery dibuat dengan memilih elemen HTML dan melaksanakan sesuatu aksi pada elemen (-
elemen).
Sintaks dasarnya adalah : $(selector).action()

Tanda dolar $ mendefinisikan /akses jQuery
Suatu selector untuk melakukan query atau mencari elemen-elemen HTML
Suatu action dilakukan pada suatu elemen (-elemen)

Contoh :
$(this).hide() - menyembunyikan elemen kini
$(p).hide() - menyembunyikan seluruh elemen <p>
$(.test).hide() - menyembunyikan semua elemen dengan class=test
$(#test).hide() - menyembunyikan elemen dengan id=test

Selector jQuery
Selector jQuery memungkinkan kita untuk memilih dan memanipulasi elemen HTML.
Semua selector pada jQuery dimulai dengan tanda dolar dan kurung lengkung : $().

Selector Elemen
Selector elemen memilih elemen-elemen menggunakan nama elemennya.
Kita dapat memilih semua elemen <p> pada suatu halaman seperti di bawah ini :

$(p)

Contoh
Bila pengguna mengklik suatu tombol, maka seluruh elemen-elemen <p> akan disembunyikan :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Selector #id
Selector #id digunakan untuk mencari elemen khusus pada tag HTML dengan atribut id. Dengan
demikian kita sebaiknya menggunakan atribut id secara unik pada sebuah halaman, sehingga selector
#id dapat menemukan elemen secara unik.

Untuk mendapatkan elemen dengan id tertentu, gunakan karakter pagar (#) dan diikuti dengan elemen
id :

$(#test)

Bila tombol diklik, maka elemen id=test disembunyikan :

<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#test").hide();
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
</body>

</html>

Selector .class
Selector ini mencari elemen dengan suatu kelas tertentu yang diidentifikasi dengan class=..
Untuk mendapatkan suatu kelas tertentu, tuliskan dengan titik dan diikuti dengan nama kelas :

$(.test)

Bila tombol diklik, maka elemen dengan class=test disembunyikan :

<!DOCTYPE html>
<html>
<head>
</script>
<script>
$(".test").hide();
});
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Contoh Selector-selector lain
Sintaks Deskripsi
$(*) Memilih seluruh elemen
$(this) tanpa tanda petik Memilih elemen HTML kini
$(p.intro) tanda titik Memilih semua elemen <p> dengan class=intro
$(p:first) titik dua Memilih elemen <p> yang pertama. Halaman terdiri dari beberapa <p>
$(ul li:first) Memilih elemen <li> pertama dari <ul> pertama
$(ul li:first-child) Memilih elemen <li> pertama pada setiap <ul>
$(*href+) Memilih semua elemen dengan suatu atribut href
$(a*target=_blank+) Memilih semua elemen <a> dengan suatu target atribut sama dgn _blank
$(a*target!=_blank+) Memilih semua elemen <a> dengan suatu target atribut tidak sama dgn
_blank
$(:button) Memilih semua elemen <button> can <input> dengan type=button
$(tr:even) Memilih semua elemen <tr> nomor genap : 0, 2, 4, 6,
$(tr:odd) Memilih semua elemen <tr> nomor ganjil : 1, 3, 5,
$(h1,div,p) Memilih semua elemen <h1>, <div>, dan <p>
$(ul li:gt(3)) Memilih elemen <li> dengan indeks lebih dari 3
$(:contains(apa)) Memilih semua elemen yang mengandung teks apa
$(p:hidden) Memilih semua elemen <p> yang hidden
$(div:has(p)) Memilih semua elemen <div> yang mempunyai elemen <p>
$(:focus) Memilih elemen yang sedang fokus

Metoda-metoda Event jQuery
jQuery dibuat untuk melakukan tanggapan terhadap kejadian-kejadian (event) dari suatu halaman
HTML.
Apa yang dimaksud Event?
Seluruh aksi-aksi berbeda dari pengunjung yang dapat ditanggapi oleh suatu halaman web disebut
event. Suatu event mewakili suatu saat yang tepat ketika sesuatu peristiwa tertentu.
Contoh : pergerakan mouse melewati suatu elemen, memilih sebuah tombol radio, mengklik sebuah
elemen, dsb. Istilah fires: seringkali digunakan pda suatu event. Contoh : Event keypress menyala saat
kita menekan sebuah tombol kunci.
Beberapa contoh event-event DOM yang umum adalah sbb.:

Event Mouse Event Keyboard Event Form Event Dokumen/Window
Click Keypress Submit load
Dbclick Keydown Change Resize
Mouseenter Keyup Focus Scroll
Mouseleave Blur unload

Sintaks jQuery untuk Metoda-metoda Event
Semua event-event DOM mempunyai suatu metode jQuery ekivalen.
Untuk menugasi suatu event klik pada seluruh paragraf dari suatu halaman, dapat dilakukan sbb.:

$(p).click();

Langkah selanjutnya adalah mendefinisikan apa yang harus terjadi bila suatu event menyala. Kita harus
melewatkan sebuah fungsi pada event tertentu :

$(p).click(function(),
//aksinya disini
});

Metoda-metoda Event yang Umum Digunakan
$(document).ready()

Metoda ini mengizinkan kita untuk mengeksekusi suatu fungsi bila dokumen telah sepenuhnya dimuat.
Hal ini untuk menghindari agar kode jQuery tidak berjalan sebelum seluruh dokumen sepenuhnya
dimuat atau siap. Beberapa contoh aksi yang mungkin gagal dijalankan apabila dokumen belum
sepenuhnya dimuat :
Mencoba menyembunyikan suatu elemen yang belum selesai dibuat
Mencoba mendapatkan size dari suatu gambar yang belum termuat

//metoda jQuery disini
});

Atau bisa juga menggunakan sintaks singkat sbb. :

$(function(){
//metoda jQuery disini
});

Efek-efek
Efek-efek antara lain : hide, show, toggle, slide, fade, dan animate.

<html>
<head>
</script>
<script>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Sintaks : $(selector).hide(speed, callback);
$(selector).show(speed, callback);

Parameter opsional speed menentukan kecepatan hide/show, dan dapat menggunakan nilai : slow,
fast, atau angka dalam milidetik. Parameter callback adalah sebuah fungsi yang dieksekusi setelah
metoda hide() atau show().

$(button).click(function(),
$(p).hide(1000);
});

Metoda toggle()
Antara hide() dan show() dapat digunakan metoda toggle().

$(button).click(function(),
$(p).toggle();
});

Sintaks : $(selector).toggle(speed, callback);

Metoda-metoda efek jQuery
Metoda Deskripsi
Animate() Jalankan suatu animasi tertentu pada elemen
Clearqueque() Hapus semua fungsi yang antri pada elemen
Delay() Menset suatu delay pada seluruh fungsi yang antri pada elemen
Dequeque() Hapus fungsi selanjutnya dari antrian, lalu eksekusi fungsinya
FadeIn() Munculkan secara berangsur-angsur elemen
FadeOut() Kaburkan secara berangsur-angsur elemen
fadeTo() Muncul/kaburkan dengan opacity tertentu
fadeToggle() Toggle antara metoda fadeIn() dan fadeOut()
Finish() Hentikan, hapus, dan selesaikan semua animasi antrian elemen
Hide() Menyembunyikan elemen
Queue() Perlihatkan fungsi-fungsi yang antri pada elemen
Show() Perilhatkan elemen
slideDown() Geser kebawah elemen
slideToggle() Toggle antara slideUp() dan slideDown()
slideUp() Geser keatas elemen
Stop() Hentikan animasi yang berjalan sekarang pada elemen
Toggle() Toggle antara hide() dan show()

Metoda-metoda HTML/CSS

Belajar JQuery Selector

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Belajar JQuery Selector

Diunggah oleh

Hak Cipta:

Format Tersedia

Apakah jQuery itu?

Anda mungkin juga menyukai