jQuery kan vælge alt, hvad CSS3 kan vælge. Men det stopper ikke der! Der er et antal ekstra vælgere, som jQuery tilbyder (via Sizzle-vælgermotoren), der nogle gange er ret nyttige. For eksempel har CSS attributvælgere, der giver dig mulighed for at vælge et element baseret på en vilkårlig attribut, som elementet måtte have. For eksempel:
Der er en CSS-vælger, som vi kan bruge i jQuery til at vælge det:
$("(data-whatever='elephant-eyeballs')");Der er variationer på attributvælgeren, som i stedet for =kan du gøre for ^=at angive "starter med denne værdi". Men af en eller anden grund har CSS ikke! = Eller “ikke svarer til denne værdi”. jQuery gør! Det er et eksempel på en jQuery-vælgerudvidelse.
Der er mange af disse vælgerudvidelser. Et par vi specifikt taler om i denne screencast:
- : eq () - en 0-indekseret version af: nth-child ()
- : lige - genvej til: nth-child (even)
- : gt (n) - vælg elementer med et større indeks end n. Også en genvej til en mere kompleks: nth-child () forumla.
Muligvis er den mest nyttige vælgerudvidelse af alle: has () - som begrænser markeringen til elementer, der indeholder det, du sender denne pseudovælger (eller er det en pseudo-pseudovælger :) Det er sandsynligt, at en dag i fremtiden vil CSS have noget som dette for os (jeg tror, det bliver som pre ! code), men det er langt væk. Desværre fremsætter jeg ikke et meget overbevisende argument for det i denne screencast, men du ved, hvornår du har brug for det! For eksempel “Vælg alle .moduler, der indeholder en h3.sports-bar” - den slags ting.
Du kan også lave dine egne valgudvidelser, hvis du ønsker det. Her er en artikel om det. Eksemplet er at lave, :inviewhvilket kun vælger et element, hvis det er synligt på siden ved den aktuelle rulleposition. Det ville være sådan:
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); ) ));