jQuery lahko izbere vse, kar lahko izbere CSS3. A tu se ne ustavi! JQuery ponuja številne dodatne izbirnike (prek izbirnega mehanizma Sizzle), ki so včasih zelo koristni. Na primer, CSS ima izbirnike atributov, ki vam omogočajo, da izberete element na podlagi katerega koli poljubnega atributa, ki ga ima element. Na primer:
Obstaja izbirnik CSS, ki ga lahko v jQuery uporabimo za izbiro:
$("(data-whatever='elephant-eyeballs')");Obstajajo različice na izbirniku atributov, kot da namesto tega =lahko ^=označite »začne se s to vrednostjo«. Toda iz nekega razloga CSS nima! = Ali “ni enak tej vrednosti”. jQuery! To je primer razširitve izbirnika jQuery.
Obstaja veliko teh razširitev izbirnika. Nekaj, o katerih posebej govorimo v tej oddaji:
- : eq () - 0-indeksirana različica: nth-child ()
- : even - bližnjica za: nth-child (even)
- : gt (n) - izberite elemente z večjim indeksom od n. Tudi bližnjica za bolj zapleteno: nth-child () forumla.
Verjetno najbolj uporabna razširitev izbirnika med vsemi je: has () - kar omejuje izbor na elemente, ki vsebujejo, kaj ste predali temu psevdo izbirniku (ali pa je to psevdo psevdo izbirnik :) Verjetno bo nekega dne v prihodnosti CSS imel nekaj takega to za nas (mislim, da bo tako pre ! code), vendar je to daleč. Na žalost v tej oddaji zaslona ne dam zelo prepričljivega argumenta, vendar boste vedeli, kdaj ga potrebujete! Na primer »Izberite vse .module, ki vsebujejo h3.sports-bar« - takšne stvari.
Če želite, lahko naredite tudi lastne razširitve izbire. Tukaj je članek o tem. Primer je narediti, :inviewkateri element izbere le, če je viden na strani na trenutnem položaju drsenja. Bilo bi takole:
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); ) ));