Kao što već verovatno znate, CSS3 je predstavio set novih selektora koji dozvoljavaju da odaberete elemente u dokumentu sa manjom upotrebom HTML klasa.
Novi CSS selektori se oslanjaju na kompaktibilnost sa browser-ima, što ih čini neupotrebljivim u nekim slučajevima. jQuery poseduje set selektora, koje možete upotrebiti kao alternativu.
Postoje dva razloga zašto da koristite jQuery umesto CSS-a. Prvo, jQuery je kompatibilan sa starijim browser-ima koji nemaju podršku za pojedine tipove CSS selektora.
Drugo, kada kreiramo interaktivnost na stranici, možda ćemo imati potrebu da selektujemo elemente na osnovu akcije korisnika kao što je klik miša ili hover.
U nastavku ćemo se upoznati sa osnovnim jQuery selektorima.
Index selektori
Index selektori pronalaze elemente na osnovu njihovih sekvenci. U CCS3 imamo first-child() i last-child() selektore, koji selektuju prve i poslednje elemente. jQuery poseduje :eq(), :lt(), :gt(), :even() i :odd().
Recimo da imamo sledeću neuređenu listu.
[html]
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
[/html]
Npr. želimo da selektujemo treći <li> i dodamo HTML klasu. Ovo se lako može postići upotrebom :eq() selektora. Zapamtite da JavaScript index počinje sa 0, treći <li> je ustvari drugi po index-u:
[code]
$(‘li:eq(2)’).addClass(‘selected’);
[/code]
Selektori vidljivosti
Selektori vidljivosti odabiraju elemente na osnovu njihove vidljivosti. Pa smo u mogućnosti da selektujemo elemente u zavisnosti da li su vidljivi ne.
CSS3, trenutno nema ovaj tip selektora.
U sledećem primeru, imamo div element koji je skriven.
[html]
<div style=“display:none;“>
Ovo je skriveno
</div>
[/html]
Da bi selektovali div, možete koristiti :hidden selektor.
[code]
$(‘div:hidden’).removeAttr(‘style’);
[/code]
:hidden selektor, ne funkcioniše za elemente koji koriste visibility: hidden. Radi kada je element display postavljen na none kao u primeru iznad, ili kada je širina i visina postavljena na 0.
Da bi selektovali visible elemente, možete koristiti :visibile.
Element-Containing selektori
Koristeći jQuery možemo takođe selektovati elemente kada oni sadrže specifične elemente. Recimo da imamo dva <section> elementa. Jedan sadrži heading, dok drugi ne sadrži ništa. Upotrebom :has selektora možemo izabrati <section> koji sadrži heading, na sledeći način.
[code]
$(‘section:has(h2)’).addClass(‘selected’);
[/code]
CSS3, trenutno nema sličan selektor.
Text-Containing selektori
Možemo takođe selektovati element koji sadrži specifičan tekst. Recimo da imamo dva paragrafa i želimo da selektujemo samo onaj koj sadrži reč „World“, na primer.
[html]
<p>Hello</p>
<p>World</p>
[/html]
Upotrebom :contains() selektora ovo se lako može postići.
[code]
$(‘div:contains(‘World’)’).addClass(‘world’);
[/code]
Animirani selektor
Na kraju, jQuery dozvoljava da selektujemo element koji je pokrenut u animaciji. jQuery pruža set metoda za animiranje elemenata, na primer .slideToogle(), .slideUp(), .slideDown(), .show() i .hide(). Možemo koristiti i :animate selektor da bi odabrali element koji je animiran sa tim metodom, kao u nastavku.
[code]
$(‘li:animated’).addClass(‘animation’);
[/code]
Zaključak
CSS3 je zaista dosta napredniji u odnosu na CSS2 sa upotrebom novih dodatih selektora. Ali u specifičnim slučajevima, možda ćete morati koristiti jQuery selektore umesto CSS-a, pa ako je ovo vaš slučaj, nadamo se da će vam ovaj post biti dobra polazna tačka.
