Pada dasarnya cara JQuery menyeleksi elemen sama persis dengan CSS, itu adalah salah satu alasan mengapa Saya suka dengan JQuery (karena Saya suka CSS). Saat kita menggunakan JavaScript mentah, maka kita biasanya akan menyeleksi elemen dengan cara seperti ini:
document.getElementById("container")Kode di atas akan menyeleksi sebuah elemen dengan id='container'. Terlihat lebih rumit dibandingkan dengan JQuery yang hanya memerlukan kode ini untuk menyeleksi elemen dengan id='container':
$('#container')JQuery tidak melakukan itu sendiri. Mereka mendapatkan bantuan dari Sizzle, yang merupakan mesin selektor JavaScript dengan orientasi CSS.
Jika Anda sudah benar-benar mengerti tentang bagaimana cara menyeleksi elemen dengan CSS, Saya yakin Anda akan dengan mudah memahami ini. Tapi jika 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 memiliki id container |
| .class | $('.clear') | Seleksi semua elemen yang memiliki kelas clear |
| nama tag | $('img') | Seleksi semua elemen <img> |
Selektor Atribut
| Selektor | Contoh | Keterangan |
|---|---|---|
| [atribut] | $('[title]') | Seleksi semua elemen yang memiliki atribut title |
| [atribut="nilai"] | $('[alt="image"]') | Seleksi semua elemen yang memiliki atribut alt dengan nilai image |
| x[atribut="nilai"] | $('a[href="#"]') | Seleksi semua elemen <a> yang memiliki atribut href dengan nilai # |
| [atribut*="nilai"] | $('a[href=*".com"]') | Seleksi semua elemen <a> yang memiliki atribut href dengan nilai yang mengandung kata .com |
| [atribut~="nilai"] | $('[name~="image"]') | Seleksi semua elemen dengan atribut name yang mengandung nilai image berdiri 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 memiliki atribut href dengan nilai akhir berupa kata .jpg |
| [atribut^="nilai"] | $('img[src^="https://"]') | Seleksi semua elemen yang memiliki 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 seperti ini:<div>namun tidak akan menyeleksi elemen gambar yang berada pada kondisi ini: <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 seperti ini:<tr>namun tidak akan menyeleksi elemen <td> dalam keadaan ini:<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 karena animasi JQuery) |
| :hidden | $('img:hidden') | Seleksi semua gambar yang tidak tampak (dalam hal ini adalah elemen yang telah dikenai deklarasi display:none atau efek-efek JQuery penghilangan elemen seperti .hide(), .slideUp() dan .fadeOut() |
| :visible | $('img:visible') | Seleksi semua elemen <img> yang tampak. |
| :has(selektor) | $('li:has(ul)') | Seleksi semua elemen <li> yang memiliki 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 adalah 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 referensi tentang ini. |
| [atribut1][atribut2] | $('input[name="email"][rel="upload"]') | Seleksi semua elemen <input> yang memiliki atribut name="email" dan rel="upload" |
0 komentar:
Posting Komentar