Selektor jQuery

Tabel Konten
  1. Umum 
  2. Selektor Atribut 
  3. Filterisasi, Keadaan & Pengurutan 
  4. Elemen-Elemen Formulir 
  5. Selektor Berganda 
black

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 

SelektorContohKeterangan
*$('*')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 

SelektorContohKeterangan
[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^="//"]')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 

SelektorContohKeterangan
: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><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 seperti 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 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 

SelektorContohKeterangan
: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 

SelektorContohKeterangan
'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"

14 Komentar

  • Unknown

    Wah makasih banyak nih bang taufik, tapi yang saya minta bukan yang kayak Gitu bang Tapi yang kayak Gini :

    
    .bind()
    .html()
    .dblclick()
    .parent
    

    Dan Masih banyak Lagi, itu namaX atribut ya. . .?? aku kira namaX selektor jadi aku bilang selektor,, Post ya bang yang kayak Gitu, Tapi makasih buat yang ini bagus juga buat nambah pengetahuan jquery

  • Taufik Nurrohman

    @system of blog Satu per satu dulu. Sebelum melangkah ke sana harus memahami ini dulu. Dan kode-kode seperti .bind(), .html(), .dblclick() dan .parent() itu bukan selektor. Itu penugas.

    [note]Tentang .html(): http://hompimpaalaihumgambreng.blogspot.com/2011/12/jquery-html-val-dan-text.html
    Tentang .dblclick(): http://hompimpaalaihumgambreng.blogspot.com/2011/10/event-event-dasar-jquery.html[/note]

  • Unknown

    Oh iya itu maksud saya bang, Oh iya kalau Yang Ini Aku Sudah ada Ebooknya bang, jadi kalau yang ini bisa aku pelajari OFFLINE kalau kode penugas itu yg aku gak ngerti aku pernah mau ngedit2 lagi itu slideDown dan juga toogle tapi gak pernah tau mau di apain bukanX kalau mau modif itu kita perlu tau penugas jquery nya...??

  • Unknown

    @system of blog MAs Zhinto bagi2 e-book nya dong ! :)

  • Unknown

    @Syndicate OS ada gan di internet cari aja aku aja dapet di internet

  • Unknown

    @system of blog ya deh :)

  • MUX SPARROW

    waduh.. masih binun ane.. :p maklum pemula, Gan ..

    • Unknown

      sama.. :p
      masih perlu belajar banyak nih sama mas Taufik..

      • Unknown

        haha,, masih harus sering begadang dan berhayal tentang Code is Dream..
        gue jga masih Trial,, jadi ikut komen di kawasan ini,, hehe

  • Anonim

    mudah2an cepet di jawab nih,,peace
    kang taufiq mohon bantuannya :D

    udah baca2 juga di w3school, malah pusing :Ozz

    saya mau menseleksi iframe iklan sampai 4 tingkat, buat bikin condition jika iframe tujuan muncul h1 Error, maka akan di ganti dengan banner iklan pengganti

    seperti ini,,,iframe > html > body > h1

    cuma baru berhasil seleksi iframe dengan src nya :(
    $('iframe[src*="contoh"]')

    maunya sih menseleksi iframe dgn src contoh yang terdapat h1 error, berikut ini kira2 script conditionnya.

    
    $(document).ready(function(){
    if (
    $('iframe[src*="contoh"]:header("Error")') {
    $('iframe[src*="contoh"]').remove();
    $(".wadah-ads1").html('<div class="ganti-ads"><a href="http://url-tujuan.com/"><img width="728" height="90" src="http://1.bp.blogspot.com/-szIHyr5ACp4/UOhVMjYdWOI/AAAAAAAAJrQ/yWWSmfMVELE/s1600/kerr+graphix+logo.gif"></img></a></div>');
    $(".wadah-ads2").html('<div class="ganti-ads"><a href="http://url-tujuan.com/"><img width="728" height="90" src="http://1.bp.blogspot.com/-szIHyr5ACp4/UOhVMjYdWOI/AAAAAAAAJrQ/yWWSmfMVELE/s1600/kerr+graphix+logo.gif"></img></a></div>');
    $(".wadah-ads3").html('<div class="ganti-ads"><a href="http://url-tujuan.com/"><img width="728" height="90" src="http://1.bp.blogspot.com/-szIHyr5ACp4/UOhVMjYdWOI/AAAAAAAAJrQ/yWWSmfMVELE/s1600/kerr+graphix+logo.gif"></img></a></div>');
    }
    else {}
    });
    

    bisa nga ya ??

    • Taufik Nurrohman

      Konten iframe tidak bisa diseleksi. Tapi kalau mengecek apakah iframe itu gagal diakses atau tidak mungkin bisa. Memakai event .error():

      $(document).ready(function() {
      $('iframe[src*="contoh"]').error(function() {
      $('.wadah-ads1').html('<div class="ganti-ads"><a href="http://url-tujuan.com/"><img width="728" height="90" src="http://1.bp.blogspot.com/-szIHyr5ACp4/UOhVMjYdWOI/AAAAAAAAJrQ/yWWSmfMVELE/s1600/kerr+graphix+logo.gif"></a></div>');
      $('.wadah-ads2').html('<div class="ganti-ads"><a href="http://url-tujuan.com/"><img width="728" height="90" src="http://1.bp.blogspot.com/-szIHyr5ACp4/UOhVMjYdWOI/AAAAAAAAJrQ/yWWSmfMVELE/s1600/kerr+graphix+logo.gif"></a></div>');
      $('.wadah-ads3').html('<div class="ganti-ads"><a href="http://url-tujuan.com/"><img width="728" height="90" src="http://1.bp.blogspot.com/-szIHyr5ACp4/UOhVMjYdWOI/AAAAAAAAJrQ/yWWSmfMVELE/s1600/kerr+graphix+logo.gif"></a></div>');
      });
      });
      • Anonim

        wah sayang nga bisa kang, ini iframe iklan memang tidak 24 jam menampilkan banner iklannya, jadi di saat tertentu aja banner tidak muncul dan di ganti dengan header h1 eror

        kang bisa nga ya dengan event .load(),,jadi setelah iframe load selesai mencari h1 error, jika ketemu baru if conditionnya dijalankan ??

        ngomong2 udah tld nih domainnya :D

        • Taufik Nurrohman

          Sayang, tidak ada satupun JavaScript yang bisa mengakses konten iframe. Penting, untuk alasan sekuriti.

          —Sebegitunya domain berbayar dipuja-puja. Ternyata kualitas manusia memang masih ditentukan sama hal-hal yang berbayar...

          • Anonim

            Karena penasaran mutar muter sebentar,,ternyata benul kang karena masalah keamanan

            _http://forum.jquery.com/topic/how-to-read-iframe-inner-body-content

            =======
            setau ane publisher kurang di terima klw masih ada embel2 sub domain blogspot,,,itu udah hukumnya mungkin ya,,,???
            pake tld biar keliatan premium, n bisa menjadi publisher para pengiklan,,,nabung dulu dah ane cari domain idaman :D

Komentar telah ditutup.