jQuery kan velge alt som CSS3 kan velge. Men det stopper ikke der! Det er en rekke tilleggsvelgere som jQuery tilbyr (via Sizzle-valgmotoren) som noen ganger er ganske nyttige. For eksempel har CSS attributtvelgere som lar deg velge et element basert på vilkårlig attributt elementet måtte ha. For eksempel:
Det er en CSS-velger vi kan bruke i jQuery for å velge det:
$("(data-whatever='elephant-eyeballs')");Det er variasjoner på attributtvelgeren, som i stedet for =du kan gjøre for ^=å indikere "starter med denne verdien". Men av en eller annen grunn har ikke CSS! = Eller “ikke lik denne verdien”. jQuery gjør! Det er et eksempel på en jQuery-utvidelse.
Det er mange av disse utvidelsene. Noen få som vi spesifikt snakker om i denne screencast:
- : eq () - en 0-indeksert versjon av: nth-child ()
- : jevn - snarvei for: nth-child (even)
- : gt (n) - velg elementer med større indeks enn n. Også en snarvei for en mer kompleks: nth-child () forumla.
Muligens den mest nyttige selektorutvidelsen av alle er: has () - som begrenser utvalget til elementer som inneholder det du sender denne pseudovelgeren (eller er det en pseudo-pseudovelger :) Det er sannsynlig at en dag i fremtiden vil CSS ha noe sånt som dette for oss (jeg tror det kommer til å bli som pre ! code), men det er langt unna. Dessverre lager jeg ikke et veldig overbevisende argument for det i denne screencast, men du vet når du trenger det! For eksempel "Velg alle .moduler som inneholder en h3.sports-bar" - den slags ting.
Du kan også lage dine egne utvalgstillegg hvis du ønsker det. Her er en artikkel om det. Eksemplet er å lage :inviewsom velger et element bare hvis det er synlig på siden ved gjeldende rulleposisjon. Det ville være slik:
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); ) ));