Разница между CSS-селектором и фильтром jQuery?

Можно передать селектора CSS в функцию jQuery, например:

jQuery('h1 + h2');

jQuery также имеет некоторые фильтры, такие как :even и :odd:

jQuery('tr:even');

Я искал какое-то синтаксическое правило, которое отличает два, и я думал, что, возможно, фильтры jQuery всегда используют :.

Однако некоторые селектора CSS также используют :. Например:

  • :last-child
  • :root
  • :empty
  • :target

Есть ли у кого-нибудь умные советы, зная, является ли это селектором CSS или используемым фильтром jQuery?

Ответ 1

Я искал какое-то синтаксическое правило, которое отличает два, и я думал, что, возможно, фильтры jQuery всегда используют :.

Однако некоторые CSS-селектора также используют :.

Есть ли у кого-нибудь умные советы, зная, является ли это селектором CSS или используемым фильтром jQuery?

Это одна из самых неприятных вещей, когда селекторные библиотеки используют синтаксис CSS в своих собственных расширениях: поскольку фильтры на основе совпадений и истинные псевдоклассы объединяются в общий термин, называемый "псевдоселекторами" (которые в основном означает "селектор, начинающийся с :" ), единственный способ определить, является ли "псевдоселектор" фильтром или настоящим простым селектором, зная, что он делает, что, если вы не знакомы с селектором часто означает ссылку на документацию jQuery, как упоминалось здесь. Вы заметите, что большинство этих фильтров на основе совпадений будут иметь слово "match" где-нибудь в своих описаниях; это разумный показатель того, что "псевдоселектор" работает как фильтр на основе соответствия.

Существует подкатегория "Селекторы" в jQuery, называемая "Основные фильтры" , однако имя полностью вводит в заблуждение, а сами селектора плохо классифицированы; не все из них являются фактическими фильтрами, но некоторые из них функционируют как стандартные псевдоклассы! По крайней мере, категория jQuery Extensions имеет собственное имя - потому что эти селекторы являются нестандартными.

То, что я называю "фильтрами, основанными на совпадении", в основном представляет собой селектор, который соответствует элементу на основе всего сложного селектора, ведущего к этому селектору. Звук запутанный? Это потому, что это так.

На самом деле, для простой ссылки, вот список селекторов jQuery, которые работают как фильтры на основе соответствия:

Эти селекторы возвращают n-й элемент из набора совпадений, в отличие от других стандартных селекторов, которые берут каждый элемент и делают выводы о том, на чем он основан исключительно на информации об элементе, предоставленной DOM или в противном случае, а не на основе остальной строки селектора. Хотя их очень часто сравнивают с :first-child, :last-child, :nth-child() и :nth-last-child(), они значительно отличаются по функциональности. Будьте осторожны при выборе того, какой селектор использовать.

Например, следующий селектор, используя jQuery :first:

$('ul > li:first')

Совпадает только с одним элементом: первый элемент, соответствующий селектору ul > li, независимо от того, сколько элементов ul и li есть в DOM. Это селекторное обозначение может быть записано как вызов метода следующим образом:

$('ul > li').first()

Что делает его более ясным, что он на самом деле делает. Он отличается от :first-child:

$('ul > li:first-child')

В этом случае :first-child будет выбирать каждый li, который является первым потомком его родительского ul, и поэтому может потенциально возвращать один или несколько элементов li, а не один с :first.

Также стоит упомянуть селектор :not(); хотя я не рассматриваю его как фильтр того же типа, что и вышеупомянутые селекторы, важно помнить, что jQuery расширяет его из того, что действительно предлагается в CSS. Различия подробно описаны в этом вопросе. Я полагаю, что в любом случае это классифицировано под Basic Filters из-за .not(), что наиболее определенно для всех его целей и целей является методом фильтра и антитеза .filter().

Ответ 2

Да, этот селектор существует в jQuery
Селектор называется следующий соседний селектор

Вы можете увидеть список полных селекторов здесь

Есть ли у кого-нибудь умные советы, зная, является ли это селектором CSS или используемым фильтром JQuery?

Мой совет, проверьте API, если селектор существует или нет...

Ответ 3

Идея функции утилиты jQuery selector заключается в том, чтобы принять любой селектор css (включая селектор css3), и в дополнение к этому добавить несколько дополнительных, которые не определены в спецификации css (примеры из которых: нечетные (которые в valid css: nth-child (нечетный)) и: not (selector), например). Настоятельно рекомендуется не использовать специфичные селектора jquery, кроме случаев, когда это действительно необходимо, поскольку собственные селектора css могут обрабатываться (в современных веб-браузерах) намного быстрее, чем пользовательский jquery css. Как уже упоминалось gdoron, вы можете увидеть полный список в jquery documentation, если вам нужно проверить, доступен или нет специальный селектор, и вы также могут найти пользовательские селектора.