jQuery Selectors
Gunakan kami jQuery Selector Tester untuk menunjukkan pemilih yang berbeda.
| Pemilih | Contoh | Memilih |
|---|---|---|
| * | $("*") | semua elemen |
| # id | $("#lastname") | Elemen dengan id="lastname" |
| . class | $(".intro") | Semua elemen dengan class="intro" |
| . class, . class | $(".intro,.demo") | Semua elemen dengan class "intro" atau "demo" |
| element | $("p") | Semua <p> elemen |
| el1 , el2 , el3 | $("h1,div,p") | Semua <h1>, <div> <p> <h1>, <div> <p> elemen |
| :first | $("p:first") | Pertama <p> elemen |
| :last | $("p:last") | Yang terakhir <p> elemen |
| :even | $("tr:even") | Semua bahkan <tr> elemen |
| :odd | $("tr:odd") | Semua aneh <tr> elemen |
| :first-child | $("p:first-child") | Semua <p> elemen yang merupakan anak pertama dari orang tua mereka |
| :first-of-type | $("p:first-of-type") | Semua <p> elemen yang pertama <p> unsur orang tua mereka |
| :last-child | $("p:last-child") | Semua <p> elemen yang merupakan anak terakhir dari orang tua mereka |
| :last-of-type | $("p:last-of-type") | Semua <p> elemen yang terakhir <p> unsur orang tua mereka |
| :nth-child( n ) | $("p:nth-child(2)") | Semua <p> unsur yang merupakan 2 anak orang tua mereka |
| :nth-last-child( n ) | $("p:nth-last-child(2)") | Semua <p> unsur yang merupakan 2 anak orang tua mereka, menghitung dari anak terakhir |
| :nth-of-type( n ) | $("p:nth-of-type(2)") | Semua <p> unsur yang merupakan 2 <p> unsur orang tua mereka |
| :nth-last-of-type( n ) | $("p:nth-last-of-type(2)") | Semua <p> unsur yang merupakan 2 <p> unsur orang tua mereka, menghitung dari anak terakhir |
| :only-child | $("p:only-child") | Semua <p> elemen yang merupakan anak tunggal dari orang tua mereka |
| :only-of-type | $("p:only-of-type") | Semua <p> elemen yang merupakan anak tunggal, dari jenis, dari orang tua mereka |
| parent > child | $("div > p") | Semua <p> elemen yang merupakan anak langsung dari <div> elemen |
| parent descendant | $("div p") | Semua <p> elemen yang adalah keturunan dari <div> elemen |
| element + next | $("div + p") | The <p> elemen yang bersebelahan <div> elemen |
| element ~ siblings | $("div ~ p") | Semua <p> elemen yang saudara kandung dari <div> elemen |
| :eq( index ) | $("ul li:eq(3)") | Unsur keempat dalam daftar (indeks dimulai dari 0) |
| :gt( no ) | $("ul li:gt(3)") | elemen daftar dengan indeks lebih besar dari 3 |
| :lt( no ) | $("ul li:lt(3)") | elemen daftar dengan indeks kurang dari 3 |
| :not( selector ) | $("input:not(:empty)") | Semua elemen masukan yang tidak kosong |
| :header | $(":header") | Semua elemen Header <h1>, <h2> ... |
| :animated | $(":animated") | Semua elemen animasi |
| :focus | $(":focus") | Unsur yang saat ini memiliki fokus |
| :contains( text ) | $(":contains('Hello')") | Semua elemen yang berisi teks "Hello" |
| :has( selector ) | $("div:has(p)") | Semua <div> unsur-unsur yang memiliki <p> elemen |
| :empty | $(":empty") | Semua elemen yang kosong |
| :parent | $(":parent") | Semua elemen yang adalah orang tua dari unsur lain |
| :hidden | $("p:hidden") | Semua disembunyikan <p> elemen |
| :visible | $("table:visible") | Semua tabel terlihat |
| :root | $(":root") | Unsur akar dokumen |
| :lang( language ) | $("p:lang(de)") | Semua <p> elemen dengan nilai atribut lang dimulai dengan "de" |
| [ attribute ] | $("[href]") | Semua elemen dengan href atribut |
| [ attribute = value ] | $("[href='default.htm']") | Semua elemen dengan href nilai atribut sama dengan "default.htm" |
| [ attribute != value ] | $("[href!='default.htm']") | Semua elemen dengan href nilai atribut tidak sama dengan "default.htm" |
| [ attribute $= value ] | $("[href$='.jpg']") | Semua elemen dengan href nilai atribut yang berakhir dengan ".jpg" |
| [attribute|=value] | $("[title|='Tomorrow']") | Semua elemen dengan judul atribut nilai sama dengan 'Tomorrow' , atau dimulai dengan 'Tomorrow' diikuti dengan tanda hubung |
| [attribute^=value] | $("[title^='Tom']") | Semua elemen dengan judul atribut nilai dimulai dengan "Tom" |
| [attribute~=value] | $("[title~='hello']") | Semua elemen dengan nilai atribut judul yang mengandung kata tertentu "hello" |
| [attribute*=value] | $("[title*='hello']") | Semua elemen dengan nilai atribut judul yang mengandung kata "hello" |
| :input | $(":input") | Semua elemen masukan |
| :text | $(":text") | Semua elemen input dengan type="text" |
| :password | $(":password") | Semua elemen input dengan type="password" |
| :radio | $(":radio") | Semua elemen input dengan type="radio" |
| :checkbox | $(":checkbox") | Semua elemen input dengan type="checkbox" |
| :submit | $(":submit") | Semua elemen input dengan type="submit" |
| :reset | $(":reset") | Semua elemen input dengan type="reset" |
| :button | $(":button") | Semua elemen input dengan type="button" |
| :image | $(":image") | Semua elemen input dengan type="image" |
| :file | $(":file") | Semua elemen input dengan type="file" |
| :enabled | $(":enabled") | Semua enabled elemen masukan |
| :disabled | $(":disabled") | Semua disabled elemen masukan |
| :selected | $(":selected") | Semua selected elemen masukan |
| :checked | $(":checked") | Semua checked elemen masukan |