Apa itu jQuery Selectors

 

Assallammualaikum wr.wb

Setelah kemarin kita mengenal mengenai apa itu jQuery dan sintaknya. Nah sekarang kita akan membahas mengenai jQuery selector. Apa itu sebenarnya jQuery Selector? apakah ada yang sudah tau? kalo  belum tau, mari kita bahas di pembahasan kali ini.

Apa itu jQuery Selector?

Selector dapat memungkinkan kita untuk memanipulasi sebuah elemen HTML sebagai kelompok atau sebagai elemen tunggal. Pada kesempatan sebelumnya, kita sudah memlihat contoh cara memilih elemen HTML menggunakan jQuery.

jQuery element selectors dan attribute selectors memungkinkan anda untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribute atau konten. Selectors memungkinkan kita untuk memanipulasi element HTML sebagai kelompok atau sebagai elemen tunggal.

jQuery Element Selectors

$("p") : Memilih semua elemen <p>

$("p.intro") : memilih semua elemen <p> yang mempunyai class="intro"

$("p#demo") : memilih elemen <p> yang mempunyai id="demo"

jQuery Attribute Selectors

$("[href]") : memilih semua elemen dengan atribut href

$("[href='#']") : memilih semua elemen dengan atribut href bernilai="#"

$("[href!='#']") : memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#"

$("[href$='.jpg']") : memilih semua elemen dengan atribut href yang mengandung ".jpg"

Jadwal Tabel daftar jQuery Selectors

Selector	Contoh	Yang dipilih
*	$(“*”)	Semua elemen
#id	$(“#lastname”)	Elemen yang mempunya id=lastname
.class	$(“.intro”)	Semua elemen yang mempunyai class=”intro”
Element	$(“p”)	Semua elemen <p>
.class.class	$(“.intro.demo”)	Semua elemen yg mempunyai class=”intro” dan class=”demo”
:first	$(“p:first”)	Elemen <p> yang pertama
:last	$(“p:last”)	Elemen<p> yang terakhir
:event	$(“tr:event”)	Semua elemen <tr> yang genap
:odd	$(“tr:odd”)	Semua elemen <tr> yang ganjil
:ex(index)	$(“ul li:eq(3)”)	Elemen ke empat dari suatu list (index start at 0)
:gt(no)	$(“ul li:gt(3)”)	Elemen-elemen dari suatu list dari index lebih besar dari 3
:it(no)	$(“ul li:lt(3)”)	Elemen-elemen dari suatu list dari index lebih kecil dari 3
:not(selector)	$(“input:not(:empty)”)	Semua inputan elemen yang tidak kosong
:header	$(“:header”)	Semua elemen header <h1><h2>...
:animated		Semua elemen animasi
:contains(text)	$(“:contains(thcreator13)”)	Semua elemen yang mengandung teks “thcreator13”
:empty	$(“:empty”)	Semua elemen yang tidak memiliki child (elemen) nodes
:hidden	$(“p:hidden”)	Semua elemen <p> yang tersembunyi
:visible	$(“table:visible”)	Semua tabel dengan visible
S1,s2,s3	$(“th,td,.intro”)	Semua elemen yang cocok dengan th,td, .intro
[attribute=value]	$(“[href=’#’]”)	Semua elemen yang mempunyai atribut href
[attribute!=value]	$(“[href!=’#’]”)	Semua elemen yang memiliki atribut href bernilai <>”#”
[attribute$=value]	$(“[href$=’.jpg’]”)	Semua elemen yang memiliki atribut href yang nilainya mengandung .jpg
:input	$(“:input”)	Semua elemen <input>
:text	$(“:text”)	Semua elemen <input> dengan typye=“text”
:password	$(“:password”)	Semua elemen <input> dengan typye=“password”
:radio	$(“:radio”)	Semua elemen <input> dengan typye=“radio”
:checkbox	$(“:checkbox”)	Semua elemen <input> dengan typye=“checkbox”
:submit	$(“:submit”)	Semua elemen <input> dengan typye=“submit”
:reset	$(“:reset”)	Semua elemen <input> dengan typye=“reset”
:button	$(“:button”)	Semua elemen <input> dengan typye=“bottom”
:image	$(“:image”)	Semua elemen <input> dengan typye=“image”
:file	$(“:file”)	Semua elemen <input> dengan typye=“file”
:enabled	$(“:enabled”)	Semua elemen <input> yang enabled
:disabled	$(“:disabled”)	Semua elemen <input> yang disabled
:selected	$(“:selected”)	Semua elemen <input> yang terseleksi
checked	$(“checked”)	Semua elemen <input> yang ter-check

Nah, mungkin sampai disini dahulu pembahasan kita kali ini mengenai jQuery Selectors. Bila ada pertanyaan, silahkan bisa tulis di kolom komentar 

Cukup sekian dari saya, Wassallammualaikum wr.wb.