jQuery može odabrati sve što CSS3 može odabrati. Ali tu se ne zaustavlja! Postoji niz dodatnih selektora koje jQuery nudi (putem mehanizma za odabir Sizzle) koji su prilično korisni ponekad. Na primjer, CSS ima selektore atributa koji vam omogućuju odabir elementa na temelju bilo kojeg proizvoljnog atributa koji element može imati. Na primjer:
Postoji CSS selektor koji možemo koristiti u jQueryju za odabir:
$("(data-whatever='elephant-eyeballs')");Postoje varijacije na selektoru atributa, kao =što možete umjesto ^=označavanja "započinje s ovom vrijednošću". Ali iz nekog razloga CSS nema! = Ili "nije jednako ovoj vrijednosti". jQuery radi! To je primjer proširenja selektora jQuery.
Puno je ovih proširenja selektora. Nekoliko o kojima konkretno govorimo u ovom screencast-u:
- : eq () - 0-indeksirana verzija: nth-child ()
- : even - prečac za: nth-child (even)
- : gt (n) - odabir elemenata s većim indeksom od n. Također prečac za složeniji: nth-child () forumla.
Moguće najkorisnije proširenje selektora od svih je: has () - što ograničava odabir na elemente koji sadrže ono što prosljeđujete ovom pseudo selektoru (ili je to pseudo pseudo selektor :) Vjerojatno će jednog dana u budućnosti CSS imati nešto poput ovo za nas (mislim da će biti poput pre ! code), ali to je daleko. Nažalost, u ovom prikazivanju zaslona ne iznosim vrlo uvjerljiv argument za to, ali znat ćete kada vam zatreba! Na primjer, "Odaberite sve .module koji sadrže h3.sports-bar" - takve stvari.
Ako želite, možete napraviti i vlastita proširenja za odabir. Evo članka o tome. Primjer je izrada :inviewkoja odabire element samo ako je vidljiv na stranici na trenutnom položaju pomicanja. Bilo bi ovako:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));