jQuery - Selektori


Ovaj dio sadrži opsežnu listu selektora koji pripadaju najnovijoj jQuery JavaScript biblioteci. Svi selektori su grupisani u kategorije.

Osnovni selektori (Basic Selectors)

Selektor Primjer Opis
* $("*") Selektuj sve elemente.
#id $("#foo") Selektuj sve elemente sa id="foo".
.class $(".bar") Selektuj sve elemente klasom class="bar".
element $("p") Selektuj sve <p> elemente.
selector1,
selector2,
selectorN
$("h1, p.bar, span") Selektuj sve <h1> i <span>, ali samo one <p> elemente koji imaju class="bar".


Osnovni filter selektori (Basic Filter Selectors)

Selektor Primjer Opis
:first $("p:first") Selektuj prvi <p> element.
:last $("p:last") Selektuj zadnji <p> element.
:even $("tr:even") Selektuj sve parne elemente <tr>, indeksirane nulom.
:odd $("tr:odd") Selektuj sve neparne <tr> elemente, indeksirane nulom.
:eq() $("tr:eq(1)") Selektuj drugi element <tr> unutar odgovarajućeg skupa, indeksiran nulom.
:not() $("p:not(:empty)") Selektuj sve <p> elemente koji nisu prazni.
:lt() $("ul li:lt(3)") Selektuj sve elemente <li> s indeksom manjim od tri unutar odgovarajućeg skupa (tj. odabire 1., 2., 3. element liste), indeksiran nulom.
:gt() $("ul li:gt(3)") Selektuj sve elemente <li> s indeksom većim od tri unutar odgovarajućeg skupa (tj. odabire 4., 5., ... elemente liste), indeksiran nulom.
:header $(":header") Selektuj sve elemente koji su zaglavlja, poput <h1>, <h2>, <h3> i tako dalje.
:lang() $(":lang(en)") Selektuj sve elemente koji imaju vrijednost jezika "en" tj. lang="en", lang="en-us" itd.
:root $(":root") Selektuj osnovni element dokumenta koji je uvijek <html> element u HTML dokumentu.
:animated $(":animated") Odaberite sve elemente koji animiraju u trenutku pokretanja selektora.


Selektor dječijeg filtera (Child Filter Selectors)

Selektor Primjer Opis
:first-child $("p:first-child") Selektuj sve <p> elemente koji su prvo dijete njihovog roditelja.
:last-child $("p:last-child") Selektuj sve <p> elemente koji su zadnje dijete njihovog roditelja.
:nth-child(n) $("p:nth-child(3)") Selektuj sve <p> elemente koji su treće dijete njihovog roditelja.
:only-child $("p:only-child") Selektuj sve <p> elemente koji su jedino podređeni roditelji.
:first-of-type $("p:first-of-type") Selektuj sve <p> elemente koji su prvi <p> element njihovog roditelja.
:last-of-type $("p:last-of-type") Selektuj sve <p> elemente koji su zadnji <p> element njihovog roditelja.
:only-of-type $("p:only-of-type") Selektuj sve <p> elemente koji nemaju braću i sestre s istim imenom elementa.
:nth-last-child(n) $("p:nth-last-child(3)") Selektuj sve <p> elemente koji su treće dijete njihovog roditelja, računajući od zadnjeg elementa do prvog.
:nth-of-type(n) $("p:nth-of-type(2)") Selektuj sve <p> elemente koji su drugi <p> element njihovog roditelja.
:nth-last-of-type(n) $("p:nth-last-of-type(2)") Odabire sve <p> elemente koji su 2. dijete njihovog roditelja, računajući od zadnjeg elementa do prvog.


Filteri sadržaja selektori (Content Filter Selectors)

Selektor Primjer Opis
:contains() $('p:contains("Hello")') Odabire sve <p> elemente koji sadrže tekst "Hello".
:empty $("td:empty") Odabire sve elemente <td> koji su prazni, tj. koji nemaju djece, uključujući tekst.
:has() $("p:has(img)") Odabire sve <p> elemente koji sadrže barem jedan <img> element.
:parent $(":parent") Odaberite sve elemente koji imaju barem jedan podređeni čvor ili element ili tekst.


Selektori forme (Form Selectors)

Selektor Primjer Opis
:input $(":input") Selektuj sve elemente unosa, tekstualnog područja, odabira i dugmeta (u osnovi odabire sve kontrole forme).
:text $(":text") Selektuj sve elemente unosa s type="text".
:password $(":password") Selektuj sve ulazne elemente s type="password".
:radio $(":radio") Selektuj sve ulazne elemente s type="radio".
:checkbox $(":checkbox") Selektuj sve ulazne elemente s type="checkbox".
:button $(":button") Selektuj sve elemente unosa i dugmad s type="button".
:submit $(":submit") Selektuj sve elemente unosa i dugmadi s type="submit".
:reset $(":reset") Selektuj sve elemente unosa i dugmadi s type="reset".
:image $(":image") Selektuj sve ulazne elemente s type="image".
:file $(":file") Selektuj sve ulazne elemente s type="file".
:enabled $(":enabled") Selektuj sve elemente koji su omogućeni.
:disabled $(":disabled") Selektuj sve elemente koji su onemogućeni.
:selected $(":selected") Selektuj sve odabrane elemente, radi samo za <option> elemente.
:checked $(":checked") Selektuj sve elemente koji su označeni ili odabrani, radi za potvrdne okvire, radio dugmad i odabrane elemente.
:focus $(":focus") Selektovanje elementa ako je trenutno fokusiran.


Atributi selektora (Attribute Selectors)

Selektor Primjer Opis
[attribute] $("[href]") Selektuj sve elemente s href atributom, s bilo kojom vrijednošću.
[attribute="value"] $('a[target="_blank"]') Selektuj sve <a> elemente koji imaju ciljni atribut s vrijednosti jednakom "_blank".
[attribute="value"] $('a[target!="_blank"]') Selektuj sve <a> elemente koji nemaju ciljni atribut ili ako nemaju, sa vrijednošću "_blank".
[attribute$="value"] $('img[src$=".png"]') Selektuj sve <img> elemente koji imaju atribut src s vrijednošću koja završava s ".png".
[attribute|="value"] $('a[hreflang|="en"]') Selektuj sve <a> elemente koji imaju atribut hreflang s vrijednošću jednakom "en" ili koji počinju s "en", a slijedi crtica, poput "en-US".
[attribute^="value"] $('img[title^="IT"]') Selektuj sve <img> elemente koji imaju atribut naslova s vrijednošću koja počinje tačno s stringom "IT".
[attribute~="value"] $('img[title~="Macka"]') Selektuj sve <img> elemente koji imaju atribut naslova s vrijednošću koja sadrži riječ "Macka" odvojene zarezom.
[attribute*="value"] $('input[name*="musko"]') Selektuj sve <input> elemente koji imaju atribut name s vrijednošću koja sadrži podniz "musko".


Hijerarhijski selektora (Hierarchy Selectors)

Selektor Primjer Opis
parent > child $("ul > li") Selektuj sve <li> elemente koji su direktno podređeni njihovog nadređenog <ul> elementa.
ancestor descendant $("form label") Selektuj sve <label> elemente koji su potomci njihovog elementa <form> pretka.
prev + next $("h1 + p") Selektuj sve <p> elemente koji su sljedeći, tj. neposredno ispred elemenata <h1>.
prev ~ siblings $("h1 ~ p") Selektuj sve <p> elemente koji su braća i sestre i slijede iza elemenata <h1>.


Selektori vidljivosti filtera (Visibility Filter Selectors)

Selektor Primjer Opis
:hidden $("p:hidden") Selektuj sve <p> elemente koji su skriveni.
:visible $("p:visible") Selektuj sve <p> elemente koji su vidljivi.