jQuery může vybrat cokoli, co může vybrat CSS3. Ale tím to nekončí! Existuje řada dalších selektorů, které jQuery nabízí (prostřednictvím modulu pro výběr Sizzle), které jsou někdy velmi užitečné. Například CSS má selektory atributů, které vám umožňují vybrat prvek na základě libovolného atributu, který prvek může mít. Například:
Existuje výběr CSS, který můžeme použít v jQuery k výběru, že:
$("(data-whatever='elephant-eyeballs')");Selektor atributů má různé varianty, například místo toho =můžete ^=označit „začíná touto hodnotou“. Ale z nějakého důvodu nemá CSS! = Nebo „nerovná se této hodnotě“. jQuery ano! To je příklad rozšíření selektoru jQuery.
Existuje mnoho těchto rozšíření selektoru. Několik, o kterých konkrétně mluvíme v tomto screencastu:
- : eq () - 0 indexovaná verze: nth-child ()
- : even - shortcut for: nth-child (even)
- : gt (n) - výběr prvků s větším indexem než n. Také zkratka pro složitější: nth-child () forumla.
Možná nejužitečnější rozšíření selektoru ze všech je: has () - což omezuje výběr na prvky, které obsahují to, co předáte tomuto pseudo selektoru (nebo je to pseudo pseudo selektor :) Je pravděpodobné, že jednoho dne bude mít CSS někdy toto pro nás (myslím, že to bude jako pre ! code), ale to je daleko. Bohužel v tomto screencastu pro to nedělám moc přesvědčivý argument, ale budete vědět, kdy to budete potřebovat! Například „Vyberte všechny .moduly, které obsahují h3.sports-bar“ - takové věci.
Pokud chcete, můžete si také vytvořit vlastní rozšíření pro výběr. Tady je článek o tom. Příkladem je provedení, :inviewkteré vybere prvek, pouze pokud je viditelný na stránce v aktuální pozici posouvání. Bylo by to takto:
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); ) ));