jQuery kan välja allt som CSS3 kan välja. Men det stannar inte där! Det finns ett antal ytterligare väljare som jQuery erbjuder (via Sizzle-väljarmotorn) som ibland är ganska användbara. Till exempel har CSS attributväljare som låter dig välja ett element baserat på vilket godtyckligt attribut som elementet kan ha. Till exempel:
Det finns en CSS-väljare som vi kan använda i jQuery för att välja det:
$("(data-whatever='elephant-eyeballs')");Det finns variationer på attributväljaren, som istället för kan =du göra för ^=att ange "börjar med detta värde". Men av någon anledning har CSS inte! = Eller "inte lika med detta värde". jQuery gör det! Det är ett exempel på ett jQuery-väljartillägg.
Det finns många av dessa väljartillägg. Några som vi specifikt pratar om i denna skärmdump:
- : eq () - en 0-indexerad version av: nth-child ()
- : jämn - genväg för: nth-child (even)
- : gt (n) - välj element med ett större index än n. Också en genväg för en mer komplex: nth-child () forumla.
Kanske den mest användbara väljartillägget av alla är: har () - som begränsar valet till element som innehåller vad du skickar den här pseudoväljaren (eller är det en pseudo-pseudoväljare :) Det är troligt att CSS någon gång i framtiden kommer att ha något liknande detta för oss (jag tror att det kommer att bli som pre ! code) men det är långt borta. Tyvärr gör jag inte ett väldigt övertygande argument för det i denna screencast, men du vet när du behöver det! Till exempel ”Välj alla .moduler som innehåller en h3.sports-bar” - den typen av saker.
Du kan också göra egna urvalstillägg om du vill. Här är en artikel om det. Exemplet är att göra :inviewsom väljer ett element endast om det syns på sidan vid den aktuella rullningspositionen. Det skulle vara så här:
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); ) ));