jQuery может выбрать все, что может выбрать CSS3. Но это еще не все! Есть ряд дополнительных селекторов, которые предлагает jQuery (через механизм селекторов Sizzle), которые иногда чертовски полезны. Например, в CSS есть селекторы атрибутов, которые позволяют выбрать элемент на основе любого произвольного атрибута, который может иметь элемент. Например:
Есть селектор CSS, который мы можем использовать в jQuery, чтобы выбрать его:
$("(data-whatever='elephant-eyeballs')");Есть варианты селектора атрибутов, например, вместо того =, ^=чтобы указать «начинается с этого значения». Но по какой-то причине в CSS нет! = Или «не равно этому значению». jQuery делает! Это пример расширения селектора jQuery.
Таких расширений селекторов очень много. О некоторых из них мы специально говорим в этом скринкасте:
- : eq () - версия: nth-child () с индексом 0
- : even - ярлык для: nth-child (even)
- : gt (n) - выбрать элементы с индексом больше n. Также ярлык для более сложного: nth-child () forumla.
Возможно, наиболее полезным расширением селектора из всех является: has () - которое ограничивает выбор элементами, которые содержат то, что вы передаете этому псевдоселектору (или это псевдопсевдоселектор :) Вероятно, что когда-нибудь в будущем CSS будет иметь что-то вроде это для нас (я думаю, что так будет pre ! code), но до этого еще далеко. К сожалению, в этом ролике я не привожу убедительных аргументов в пользу этого, но вы будете знать, когда это понадобится! Например, «Выбрать все .module, содержащие h3.sports-bar» - подобные вещи.
Вы также можете сделать свои собственные расширения выбора, если хотите. Вот статья об этом. Примером является make, :inviewкоторый выбирает элемент только в том случае, если он виден на странице в текущей позиции прокрутки. Это было бы так:
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); ) ));