jQuery może wybrać wszystko, co może wybrać CSS3. Ale to nie koniec! Istnieje wiele dodatkowych selektorów, które oferuje jQuery (poprzez silnik selektora Sizzle), które czasami są cholernie przydatne. Na przykład CSS ma selektory atrybutów, które pozwalają wybrać element na podstawie dowolnego dowolnego atrybutu, który może mieć element. Na przykład:
Istnieje selektor CSS, którego możemy użyć w jQuery, aby wybrać:
$("(data-whatever='elephant-eyeballs')");Istnieją różne warianty selektora atrybutu, na przykład zamiast tego =można ^=wskazać „zaczyna się od tej wartości”. Ale z jakiegoś powodu CSS nie ma! = Lub „nie równa się tej wartości”. jQuery tak! To jest przykład rozszerzenia selektora jQuery.
Istnieje wiele takich rozszerzeń selektora. Kilka, o których konkretnie mówimy w tym screencastie:
- : eq () - indeksowana 0 wersja: nth-child ()
- : even - skrót do: nth-child (parzyste)
- : gt (n) - wybierz elementy z indeksem większym niż n. Również skrót do bardziej złożonego forumla: nth-child ().
Prawdopodobnie najbardziej użytecznym rozszerzeniem selektora ze wszystkich jest: has () - które ogranicza wybór do elementów, które zawierają to, co przekazujesz ten pseudo selektor (lub jest to pseudo pseudo selektor :) Prawdopodobnie kiedyś w przyszłości CSS będzie miał coś takiego to dla nas (myślę, że tak będzie pre ! code), ale to daleko. Niestety w tym screencastie nie przedstawiam zbyt przekonującego argumentu na jego rzecz, ale będziesz wiedział, kiedy będzie to potrzebne! Na przykład „Wybierz wszystkie .module, które zawierają h3.sports-bar” - tego rodzaju rzeczy.
Jeśli chcesz, możesz również tworzyć własne rozszerzenia wyboru. Oto artykuł na ten temat. Przykładem jest wykonanie, :inviewktóre wybiera element tylko wtedy, gdy jest on widoczny na stronie w bieżącej pozycji przewijania. Byłoby tak:
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); ) ));