A jQuery bármit kiválaszthat, amit a CSS3 kiválaszthat. De ez nem áll meg itt! A jQuery számos további választót kínál (a Sizzle választómotoron keresztül), amelyek néha nagyon hasznosak. Például a CSS rendelkezik attribútumválasztókkal, amelyek lehetővé teszik egy elem kiválasztását bármely tetszőleges attribútum alapján. Például:
Van egy CSS választó, amelyet a jQuery-ben használhatunk a következők kiválasztására:
$("(data-whatever='elephant-eyeballs')");Változatok vannak az attribútumválasztón, például ahelyett, =hogy megadná ^=, hogy „ezzel az értékkel kezdődik”. De a CSS valamilyen oknál fogva nem rendelkezik! = Vagy „nem egyenlő ezzel az értékkel”. jQuery igen! Ez egy példa a jQuery választó kiterjesztésére.
Nagyon sok ilyen választó kiterjesztés van. Néhány, amiről kifejezetten beszélünk ebben a képernyőn:
- : eq () - a 0-indexelt változata: nth-child ()
- : páros - parancsikon: n-dik gyerek (páros)
- : gt (n) - válassza ki az n-nél nagyobb indexű elemeket. Ugyancsak egy bonyolultabb parancsikon: n-gyermek () forumla.
Valószínűleg a leghasznosabb szelektor kiterjesztés az alábbiak közül: has () - amely a kiválasztást olyan elemekre korlátozza, amelyek tartalmazzák, hogy mit adsz át ezen az álválasztón (vagy ál álválasztó): Valószínű, hogy a jövőben valamikor a CSS-nek lesz valami hasonlója ez nekünk (azt hiszem, ilyen lesz pre ! code), de ez még nagyon messze van. Sajnos ebben a képernyõsorban nem állítok rá nagyon meggyõzõ érvet, de tudni fogja, mikor van rá szüksége! Például: "Válassza ki az összes olyan modult, amely tartalmaz egy h3.sportsávot" - ez a fajta dolog.
Ha kívánja, saját választási kiterjesztéseket is készíthet. Itt egy cikk erről. A példa az, hogy :inviewmelyik választja ki az elemet, csak az látható az oldalon az aktuális görgetési pozíciónál. Ilyen lenne:
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); ) ));