Belajar jQuery‎ > ‎

04. Menggunakan Selector pada jQuery

posted Nov 21, 2011 7:17 PM by Editor KursusInternet   [ updated Dec 31, 2011 8:22 AM ]

Pendahuluan

Salah satu peran penting jQuery (dan juga Javascript) pada web browser adalah kemampuan bereaksi terhadap interaksi pengguna dan melakukan manipulasi berbagai objek dalam struktur DOM. Salah satu contohnya adalah menghasilkan efek / animasi.

Untuk menjalankan perannya tersebut, jQuery harus memiliki kemampuan mengenali / mengidentifikasi dan kemudian mengakses objek-objek tersebut dengan berbagai cara. 

Kemampuan ini telah ada di jQuery dan dikumpulkan dalam apa yang dinamakan "Selector". Dengan selector kita dapat memilih elemen / objek berdasarkan tag, id, css class, atribut dan juga urutannya pada struktur halaman / DOM.

Cara Penggunaan Selector

Ada dua cara menggunakan selector :
  • melalui constructor dari  objek jQuery atau  $ - yang merupakan shortcut untuk objek jQuery. Kita memilih elemen dengan menggunakan konstruksi XPath dan CSS Selector yang dikirim sebagai teks pada parameter constructor.
  • melalui berbagai method atau fungsi navigasi / traversing yang merupakan bagian dari API jQuery.

Menggunakan Constructor jQuery

Berikut adalah beberapa contoh pemilihan elemen dengan menggunakan constructor jQuery:
  • Memilih semua elemen

    $("*")

  • Memilih elemen dengan id "link_satu"

    $("#link_satu")

  • Memilih elemen pertama dari struktur list html 

    $("ul li:first")

  • Memilih elemen ketiga dari kumpulan elemen yang berada di bawah struktur tag ul (dan memiliki id "daftar")

    $('ul[id="daftar"]>li:nth-child(3)')

Menggunakan Fungsi Navigasi / Traversing

Dan berikut ini adalah contoh-contoh penggunaan selector dengan menggunakan fungsi-fungsi API jQuery:
  • Mengambil elemen berikutnya dari kumpulan tag li.

    $("li").next()

  • Mengambil semua elemen anak dari tag ul.

    $("ul").children()

  • Mengambil anak pertama dari tag ul. 

    $("ul").children().first()

Contoh Penggunaan 1

Berikut adalah halaman HTML lengkap yang menunjukkan penggunaan selector.

contoh_selector_01.html

<html> <head> <title>Contoh Selector jQuery - 01</title> <script src="jquery-1.7.min.js"></script> <script type="text/javascript"> $(document).ready( function() { alert("Isi dari id #link_satu = " + $("#link_satu").html()); alert("Isi dari ul li = " + $("ul li").html()); } ); </script> </head> <body> <a id="link_satu" href="http://www.kursusinternet.com">KursusInternet.com</a> <ul id="daftar">Daftar Situs Populer Dunia: <li><a href="http://www.wikipedia.org">Wikipedia</a></li> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.yahoo.com">Yahoo</a></li> </ul> </body> </html>

Hasil jalannya script tersebut terlihat pada screenshot di bawah ini.


Contoh Penggunaan 2

Berikut adalah halaman HTML lengkap yang menunjukkan penggunaan selector yang merupakan pengembangan dari contoh pertama.

contoh_selector_02.html

<html> <head> <title>Contoh Selector jQuery - 02</title> <script src="jquery-1.7.min.js"></script> <script type="text/javascript"> function function_klik(obj) { $("ul").children().each( function(idx, itm) { $(itm).html( $(itm).html() + ", item ke " + (idx+1) ); } ); } $(document).ready( function() { var isi = "Isi dari el emen dengan id #link_satu = " + $("#link_satu").html(); $("#tombolklik").click(function_klik); } ); </script> </head> <body> <a id="link_satu" href="http://www.kursusinternet.com">KursusInternet.com</a> <ul id="daftar">Daftar Situs Populer Dunia: <li><a href="http://www.wikipedia.org">Wikipedia</a></li> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.yahoo.com">Yahoo</a></li> </ul> <button id="tombolklik">Klik Disini</button> </body> </html>

Berikut adalah video YouTube yang menunjukkan interaksi halaman html tersebut. 


Sumber Referensi