Pemilih jQuery
pemilih jQuery adalah salah satu bagian terpenting dari perpustakaan jQuery.
Pemilih jQuery
pemilih jQuery memungkinkan Anda untuk memilih dan memanipulasi elemen HTML.
penyeleksi jQuery digunakan untuk "menemukan" (atau memilih) elemen HTML berdasarkan nama, id, kelas, tipe, atribut, nilai atribut, dan banyak lagi. Ini didasarkan pada CSS Selectors yang ada , dan selain itu, ia memiliki beberapa pemilih kustom sendiri.
Semua pemilih di jQuery dimulai dengan tanda dolar dan tanda kurung: $().
Pemilih elemen
Pemilih elemen jQuery memilih elemen berdasarkan nama elemen.
Anda dapat memilih semua <p>elemen pada halaman seperti ini:
$("p")
Contoh
Saat pengguna mengklik tombol, semua <p>elemen akan disembunyikan:
Contoh
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Pemilih #id
Pemilih jQuery menggunakan atribut id dari tag HTML untuk menemukan elemen tertentu.#id
Sebuah id harus unik di dalam sebuah halaman, jadi Anda harus menggunakan pemilih #id ketika Anda ingin menemukan satu elemen unik.
Untuk menemukan elemen dengan id tertentu, tulis karakter hash, diikuti dengan id elemen HTML:
$("#test")
Contoh
Saat pengguna mengklik tombol, elemen dengan id="test" akan disembunyikan:
Contoh
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.Pemilih kelas
Selektor jQuery .classmenemukan elemen dengan kelas tertentu.
Untuk menemukan elemen dengan kelas tertentu, tulis karakter titik, diikuti dengan nama kelas:
$(".test")
Contoh
Saat pengguna mengklik tombol, elemen dengan class="test" akan disembunyikan:
Contoh
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Lebih Banyak Contoh Pemilih jQuery
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
Gunakan Penguji Selektor jQuery kami untuk mendemonstrasikan penyeleksi yang berbeda.
Untuk referensi lengkap semua penyeleksi jQuery, silakan kunjungi Referensi Penyeleksi jQuery kami .
Fungsi Dalam File Terpisah
Jika situs web Anda berisi banyak halaman, dan Anda ingin fungsi jQuery mudah dirawat, Anda dapat meletakkan fungsi jQuery di file .js terpisah.
Saat kami mendemonstrasikan jQuery dalam tutorial ini, fungsi ditambahkan langsung ke <head>
bagian. Namun, terkadang lebih baik menempatkannya di file terpisah, seperti ini (gunakan atribut src untuk merujuk ke file .js):
Contoh
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>