Pada dasarnya cara jQuery menyeleksi elemen sama persis dengan CSS, itu yaitu salah satu alasan mengapa Saya suka dengan jQuery (karena Saya suka CSS). Saat kita memakai JavaScript mentah, maka kita biasanya akan menyeleksi elemen dengan cara menyerupai ini:
document.getElementById("container")Kode di atas akan menyeleksi sebuah elemen dengan id='container'. Terlihat lebih rumit dibandingkan dengan jQuery yang hanya memerlukan instruksi ini untuk menyeleksi elemen dengan id='container':
$('#container')jQuery tidak melaksanakan itu sendiri. Mereka mendapat proteksi dari Sizzle, yang merupakan mesin selektor JavaScript dengan orientasi CSS. Jika Anda sudah benar-benar mengerti perihal bagaimana cara menyeleksi elemen dengan CSS, Saya yakin Anda akan dengan gampang memahami ini. Tapi bila belum, lebih baik pelajari terlebih dahulu artikel ini: Aturan Penulisan Selektor dalam CSS
Umum
| Selektor | Contoh | Keterangan |
|---|---|---|
| * | $('*') | Seleksi semua elemen |
| #id | $('#container') | Seleksi semua elemen yang mempunyai id container |
| .class | $('.clear') | Seleksi semua elemen yang mempunyai kelas clear |
| nama tag | $('img') | Seleksi semua elemen <img> |
Selektor Atribut
| Selektor | Contoh | Keterangan |
|---|---|---|
| [atribut] | $('[title]') | Seleksi semua elemen yang mempunyai atribut title |
| [atribut="nilai"] | $('[alt=" menyeleksi elemen sama persis dengan CSS Selektor jQuery"]') | Seleksi semua elemen yang mempunyai atribut alt dengan nilai image |
| x[atribut="nilai"] | $('a[href="#"]') | Seleksi semua elemen <a> yang mempunyai atribut href dengan nilai # |
| [atribut*="nilai"] | $('a[href=*".com"]') | Seleksi semua elemen <a> yang mempunyai atribut href dengan nilai yang mengandung kata .com |
| [atribut ="nilai"] | $('[name ="image"]') | Seleksi semua elemen dengan atribut name yang mengandung nilai image bangkit sendiri (terpisah dengan spasi). Ini berarti bahwa selektor ini akan menyeleksi elemen <input name="image noah" /> tapi tidak akan menyeleksi elemen <input name="imagenoah" /> atau <input name="images" /> |
| [atribut$="nilai"] | $('[href$=".jpg"]') | Seleksi semua elemen yang mempunyai atribut href dengan nilai selesai berupa kata .jpg |
| [atribut^="nilai"] | $('img[src^="//"]') | Seleksi semua elemen yang mempunyai atribut src dengan nilai awal berupa kata https:// |
| [atribut!="nilai"] | $('input[type!="text"]') | Seleksi semua elemen <input> yang bukan bertipe text |
Filterisasi, Keadaan & Pengurutan
| Selektor | Contoh | Keterangan |
|---|---|---|
| :first | $('img:first') | Seleksi semua elemen <img> yang pertama |
| :last | $('img:last') | Seleksi semua elemen <img> yang terakhir |
| :odd | $('li:odd') | Seleksi semua elemen <li> pada urutan ganjil (ini berarti urutan 1, 3, 5, ...) |
| :even | $('li:even') | Seleksi semua elemen <li> pada urutan genap (ini berarti urutan 2, 4, 6, ...) |
| :eq(n) | $('li:eq(3)') | Seleksi semua elemen <li> ke empat (start index dimulai dari 0, nilai harus berupa angka positif) |
| :nth-child(n) | $('li:nth-child(2)') | Seleksi semua elemen <li> ke dua (start index dimulai dari 1) |
| :only-child | $('div img:only-child') | Seleksi elemen <img> yang merupakan anak elemen satu-satunya di dalam elemen induk. Ini berarti bahwa selektor ini akan menyeleksi elemen gambar yang berada pada kondisi menyerupai ini:<div><img src="7.jpg" /></div>namun tidak akan menyeleksi elemen gambar yang berada pada kondisi ini:<div> <img src="7.jpg" /> <img src="7.jpg" /> <img src="7.jpg" /> </div> |
| :parent | $('td:parent') | Seleksi elemen <td> yang merupakan elemen induk dari sesuatu, termasuk teks. Ini berarti bahwa selektor ini akan menyeleksi elemen <td> dengan keadaan menyerupai ini:<tr><td>abc</td><td><img src="7.jpg" /></td></tr>namun tidak akan menyeleksi elemen <td> dalam keadaan ini:<tr> <td></td> <td></td> </tr> |
| :gt(n) | $('li:gt(4)') | Seleksi semua elemen <li> pada urutan lebih besar dari 4 (5, 6, 7, ...) |
| :lt(n) | $('li:lt(4)') | Seleksi semua elemen <li> pada urutan lebih kecil dari 4 (3, 2, 1) |
| :not() | $('input:not(:last)') | Seleksi semua elemen <input> selain pada urutan terakhir |
| :empty | $('div:empty') | Seleksi semua elemen <div> yang kosong/tidak mempunyai anak elemen |
| :contains(teks) | $('div:contains("@")') | Seleksi semua elemen yang mengandung teks "@" di dalamnya |
| :animated | $('img:animated') | Seleksi semua elemen <img> yang sedang teranimasi (seleksi semua elemen <img> yang sedang bergerak/bekerja alasannya yaitu animasi jQuery) |
| :hidden | $('img:hidden') | Seleksi semua gambar yang tidak tampak (dalam hal ini yaitu elemen yang telah dikenai deklarasi display:none atau efek-efek jQuery penghilangan elemen menyerupai .hide(), .slideUp() dan .fadeOut() |
| :visible | $('img:visible') | Seleksi semua elemen <img> yang tampak. |
| :has(selektor) | $('li:has(ul)') | Seleksi semua elemen <li> yang mempunyai anak <ul> |
Elemen-Elemen Formulir
| Selektor | Contoh | Keterangan |
|---|---|---|
| :header | $(':header') | Seleksi semua elemen heading (dalam hal ini <h1>, <h2>, <h3>, ...) |
| :input | $(':input') | Seleksi semua elemen formulir (dalam hal ini yaitu elemen <input>, <textarea>, <select>, dan <button>) |
| :button | $(':button') | Seleksi semua elemen <input> bertipe button atau elemen <button> |
| :submit | $(':submit') | Seleksi semua elemen bertipe submit |
| :reset | $(':reset') | Seleksi semua elemen bertipe reset |
| :text | $(':text') | Seleksi semua elemen bertipe text |
| :radio | $(':radio') | Seleksi semua elemen bertipe radio |
| :checkbox | $(':checkbox') | Seleksi semua elemen bertipe checkbox |
| :image | $(':image') | Seleksi semua elemen bertipe image |
| :file | $(':file') | Seleksi semua elemen bertipe file |
| :password | $(':password') | Seleksi semua elemen bertipe password |
| :selected | $('option:selected') | Seleksi semua elemen <option> yang diseleksi |
| :checked | $(':checkbox:checked') | Seleksi semua elemen <input type="checkbox"> yang dicek/centang |
| :disabled | $(':disabled') | Seleksi semua elemen disabled (misal: <input disabled="disabled" />) |
| :enabled | $(':enabled') | Lawan dari selektor :disabled |
| :focus | $('input:text:focus') | Seleksi semua elemen bertipe text yang sedang terfokus |
Selektor Berganda
| Selektor | Contoh | Keterangan |
|---|---|---|
| 's1, s2, s3' | $('div.item, #container, img') | Seleksi semua elemen <div class="item">, <div id="container"> dan elemen <img> |
| 's1 s2' | $('#container img') | Seleksi semua elemen <img> yang berada di dalam elemen <div id="container"> |
| 's2', 's1' | $('img', '#container') | Sama dengan selektor $('#container img'), yaitu akan menyeleksi semua elemen <img> yang berada di dalam elemen <div id="container">. Hanya saja, mungkin dari segi performa agak berbeda. Saya belum sempat mencari tumpuan perihal ini. |
| [atribut1][atribut2] | $('input[name="email"][rel="upload"]') | Seleksi semua elemen <input> yang mempunyai atribut name="email" dan rel="upload" |