jQuery penyeleksi adalah salah satu bagian yang paling penting dari perpustakaan jQuery.
jQuery Selectors
jQuery penyeleksi memungkinkan Anda untuk memilih dan memanipulasi elemen HTML (s).
penyeleksi jQuery digunakan untuk "menemukan" (atau pilih) elemen HTML berdasarkan nama, id, kelas, jenis, atribut, nilai atribut dan banyak lagi. Ini didasarkan pada ada Selectors CSS , dan di samping itu, ia memiliki beberapa penyeleksi kustom sendiri.
Semua pemilih di jQuery mulai dengan tanda dolar dan tanda kurung: $ ().
Unsur Pemilih
Pemilih jQuery elemen memilih elemen berdasarkan nama elemen.
Anda dapat memilih semua <p> elemen pada halaman seperti ini:
$("p")
Contoh
Ketika pengguna mengklik tombol, semua <p> elemen akan disembunyikan:
Contoh
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Cobalah sendiri " The #ID Pemilih
JQuery #ID selector menggunakan atribut id dari tag HTML untuk menemukan elemen tertentu.
Id harus unik dalam sebuah halaman, sehingga Anda harus menggunakan pemilih #ID ketika Anda ingin mencari, elemen unik tunggal.
Untuk menemukan elemen dengan id tertentu, menulis karakter hash, diikuti oleh id dari elemen HTML:
$("#test")
Contoh
Ketika pengguna mengklik tombol, elemen dengan id = "test" akan disembunyikan:
Contoh
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Cobalah sendiri " The .class Pemilih
JQuery selector class menemukan elemen dengan kelas tertentu.
Untuk menemukan unsur-unsur dengan kelas tertentu, menulis karakter periode, diikuti oleh nama kelas:
$(".test")
Contoh
Ketika pengguna mengklik tombol, elemen-elemen dengan class = "test" akan disembunyikan:
Contoh
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Cobalah sendiri " Contoh lebih dari jQuery Selectors
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
Gunakan kami jQuery Selector Tester untuk menunjukkan pemilih yang berbeda.
Untuk referensi lengkap semua pemilih jQuery, silahkan ke kami jQuery Selectors Referensi .
Fungsi Dalam File terpisah
Jika situs Anda berisi banyak halaman, dan Anda ingin fungsi jQuery Anda menjadi mudah untuk mempertahankan, Anda dapat menempatkan fungsi jQuery Anda dalam file js terpisah.
Ketika kita menunjukkan jQuery dalam tutorial ini, fungsi ditambahkan langsung ke dalam <head>. Namun, kadang-kadang lebih baik untuk menempatkan mereka dalam file terpisah, seperti ini (menggunakan atribut src untuk merujuk ke file Js):
Contoh
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»