Selector Pada JQuery

JQUERY SELECTOR

Salah satu peran penting  Jquery pada web browser adalah,kemampuan bereaksi terhadap interkasi pengguna dan melakukan manipulasi berbagai objek dalam struktur DOM.Salah satu contoh nya adalah menghasilkan efek animasi.

Untuk menjalankan perannya tersebut JQuery harus memiliki kemampuan mengenali/mengedintifikasi kemudian mengakses object2 tersebut dengan berbagai cara.kemampuan ini telah ada di JQuery dan di kumpulkan dengan apa yang di namakan SELECTOR. dengan selector anda dapat memilih elemen/object berdasarkan tag, id, CSS class,Atribut dan juga urutannya pada struktur Halaman.

Bagi sobat yang baru Belajar Atau baru mengenal tentang JQuery,Di bawah ini merupakan selector yang di gunakan pada JQuery,semoga Bisa membantu dan Bisa menjadi Bahan referensi Belajar anda.

SELECTOR	CONTOH	SELECT	DEMO
*	$("*")	Semua elemen	DEMO
#id	$("#lastname")	Elemen dengan id = "nama belakang"	DEMO
.class	$(".intro")	Semua elemen dengan class = "intro"	DEMO
.class.class	$(".intro.demo")	Semua elemen dengan kelas "intro" dan "demo"	DEMO
element	$("p")	Semua elemen p	DEMO
el1,el2,el3	$("h1,div,p")	H1 semua, div dan p elemen	DEMO
:first	$("p:first")	Elemen pertama p	DEMO
:last	$("p:last")	Elemen terakhir p	DEMO
:even	$("tr:even")	Semua elemen tr bahkan	DEMO
:odd	$("tr:odd")	Semua elemen tr	DEMO
:first-child	$("div p:first-child")	Elemen pertama p dari semua elemen div	DEMO
:last-child	$("div p:last-child")	Elemen terakhir p dari semua elemen div	DEMO
:nth-child(n)	$("div p:nth-child(2)")	P elemen yang merupakan anak kedua dari semua elemen div	DEMO
:only-child	$("div p:only-child")	P elemen yang merupakan anak tunggal dari semua elemen div	DEMO
parent > child	$("div > p")	Semua elemen p yang merupakan anak langsung dari elemen div	DEMO
parent descendant	$("div p")	Semua elemen p yang adalah keturunan dari elemen div	DEMO
element + next	$("div + p")	P elemen yang bersebelahan elemen div	DEMO
element ~ siblings	$("div ~ p")	Semua elemen p yang adalah saudara kandung dari elemen div	DEMO
:eq(index)	$("ul li:eq(3)")	Unsur keempat dalam daftar (index dimulai dari 0)	DEMO
:gt(no)	$("ul li:gt(3)")	Daftar elemen dengan indeks lebih besar dari 3	DEMO
:lt(no)	$("ul li:lt(3)")	Daftar elemen dengan indeks kurang dari 3	DEMO
:not(selector)	$("input:not(:empty)")	Semua elemen input yang tidak kosong	DEMO
:header	$(":header")	Semua sundulan elemen h1, h2 ...	DEMO
:animated	$(":animated")	Semua elemen animasi	DEMO
:focus	$(":focus")	Unsur yang saat ini memiliki fokus	DEMO
:contains(text)	$(":contains('Hello')")	Semua elemen yang berisi teks "Hello"	DEMO
:has(selector)	$("div:has(p)")	Semua elemen div yang memiliki elemen ap	DEMO
:empty	$(":empty")	Semua elemen yang kosong	DEMO
:parent	$(":parent")	Semua elemen yang merupakan induk dari elemen lain	DEMO
:hidden	$("p:hidden")	Semua elemen p tersembunyi	DEMO
:visible	$("table:visible")	Semua terlihat tabel	DEMO
[attribute]	$("[href]")	Semua elemen dengan atribut href	DEMO
[attribute=value]	$("[href='default.htm']")	Semua elemen dengan nilai atribut href sama dengan "default.htm"	DEMO
[attribute!=value]	$("[href!='default.htm']")	Semua elemen dengan atribut href nilai tidak sama dengan "default.htm"	DEMO
[attribute$=value]	$("[href$='.jpg']")	Semua elemen dengan nilai atribut href diakhiri dengan ". Jpg"	DEMO
[attribute|=value]	$("[hreflang|='en']")	Semua elemen dengan nilai atribut hreflang dimulai dengan "en"	DEMO
[attribute^=value]	$("[name^='hello']")	Semua elemen dengan nilai atribut nama dimulai dengan "halo"	DEMO
[attribute~=value]	$("[name~='hello']")	Semua elemen dengan nilai atribut nama yang mengandung kata "halo"	DEMO
[attribute*=value]	$("[name*='hello']")	Semua elemen dengan nilai atribut nama yang mengandung string "hello"	DEMO
:input	$(":input")	Semua elemen masukan	DEMO
:text	$(":text")	Semua elemen input dengan tipe "text" =	DEMO
:password	$(":password")	Semua elemen input dengan tipe "password" =	DEMO
:radio	$(":radio")	Semua elemen input dengan type = "radio"	DEMO
:checkbox	$(":checkbox")	Semua elemen input dengan tipe "checkbox" =	DEMO
:submit	$(":submit")	Semua elemen input dengan type = "submit"	DEMO
:reset	$(":reset")	Semua elemen input dengan type = "reset"	DEMO
:button	$(":button")	Semua elemen input dengan type = "tombol"	DEMO
:image	$(":image")	Semua elemen input dengan type = "image"	DEMO
:file	$(":file")	Semua elemen input dengan type = "file"	DEMO
:enabled	$(":enabled")	Semua elemen masukan diaktifkan	DEMO
:disabled	$(":disabled")	Semua elemen masukan di matikan	DEMO
:selected	$(":selected")	Semua elemen input yang dipilih	DEMO
:checked	$(":checked")	Semua elemen masukan diperiksa	DEMO