Belajar jQuery (Part 2) - Penggunaan Selector pada jQuery

Apa itu selector pada jQuery ? Mungkin ini yang ada dalam pikiran anda saat pertama belajar jQuery. Selector merupakan suatu fungsi yang digunakan untuk memilih dan menentukan element pada HTML DOM yang akan kita manipulasi. Pada artikel sebelumnya kita telah menggunakan fungsi selector ini untuk memanipulasi element. Berikut adalah sedikit contoh penggunaan fungsi selector ini.

$(#tulis;)

Pada code di atas, bisa dilihat bahwa kita menggunakan fungsi selector dengan menentukan element yang akan dimanipulasi yaitu element yang memiliki id “tulis”. Tanda pagar (#) yang
digunakan pada code di atas digunakan untuk penanda id, sedangkan jika ingin menggunakan penanda class yaitu dengan mengganti tanda pagar dengan tanda titik (.) seperti berikut:

$(.tulis;)

Jadi, jQuery akan mencari element yang dimaksud pada HTML DOM dan menandainya. Tapi yang perlu diingat adalah penggunaan id pada HTML hanya dimaksudkan untuk satu element saja, sedangkan penggunaan class bisa lebih daripada satu element pada sebuah halaman. Untuk lebih jelasnya, misalnya kita punya halaman HTML berikut:

<ul>

<li class=biru>1</li>

<li class=biru id=merah>2</li>

<li class=biru>3</li>

<li class=biruid=merah>4</li>

<li class=biru>5</li>

</ul>

Jika kita menggunakan selector dengan penanda class “biru” pada HTML di atas, maka semua element dengan class akan ditandai hanya dengan code:

$(.biru)

Berbeda dengan penggunaan selector dengan penanda id “merah”, karena jQuery hanya akan menandai element pertama yang menggunakan id tersebut. Pada dasarnya penggunaan attributeid pada element HTML memang hanya digunakan satu saja dalam sebuah halaman.

Untuk penggunaan selector ini ada banyak tanda yang bisa digunakan, tidak hanya terbatas pada attribute id dan class. Kita bisa menggunakan penanda dengan attribute name misalnya, atau juga bisa pada penanda tag HTML itu sendiri. Misalnya:

HTML:

<input type=text name=nomorhp />

jQuery:

$(input[name=nomorhp])

Pada code di atas adalah contoh penggunaan selector yang menandai tag HTML “input” dengan attribute name “nomorhp”. Untuk lebih lengkapnya tentang selector ini dan tanda apa saja yang bisa digunakan untuk menandai element pada HTML DOM, bisa dilihat pada halaman resmi jQuery sendiri https://api.jquery.com/category/selectors/.

Happy Coding ^_^

Penulis : Rizky Hady - Programmer