CSS选择器和jQuery过滤器之间的区别？ [英] Difference between CSS selector and jQuery filter?
问题描述
可以传递CSS选择器到jQuery函数，例如：
jQuery（'h1 + h2'）;
jQuery也有一些过滤器，例如：even 和：odd ：
jQuery（'tr：even'） ;
我一直在寻找一种语法规则来区分两者，我认为也许jQuery过滤器始终使用：。
但是，有些 CSS选择器也使用：。例如：
-
：last-child -
：root -
：空 -
：target
知道它是一个CSS选择器还是使用了一个jQuery过滤器？
一些语法规则区分两者，我认为也许jQuery过滤器总是使用
：。
然而，一些CSS选择器也使用
：。
有没有人知道它是一个CSS选择器还是使用了jQuery过滤器？
这是关于选择器库在自己的扩展中采用CSS语法的最恼人的事情之一：因为基于匹配的过滤器和真伪类在一个称为伪选择器 （这基本上意味着以：开头的选择器），唯一的方式来告诉伪选择器是过滤器还是一个真正的简单选择器是通过知道它做什么，如果你不熟悉选择器通常意味着引用 jQuery文档。你会注意到，大多数基于匹配的过滤器在他们的描述中有一个词匹配;这是一个合理的指示，伪选择器作为基于匹配的过滤器。
在jQuery中的选择器的子类别称为基本过滤器，但是名称是完全误导，选择器本身分类不好;不是所有的都是实际的过滤器，但其中一些功能像标准伪类！至少 jQuery扩展类别具有正确的名称 - 因为这些选择器是非标准。
我称之为基于匹配的过滤器基本上是一个选择器，它匹配基于整个复杂选择器的元素选择器。声音混乱？这是因为它是。
事实上，为了方便参考，这里是一个jQuery选择器的列表，作为基于匹配的过滤器：
这些选择器返回一组匹配中的第n个元素，而不是其他标准选择器，它们接受每个元素并扣除它仅基于由DOM或其他方式提供的元素的信息，而不是基于选择器字符串的其余部分。虽然他们经常比较：first-child ，：last-child ，： nth-child（）和：nth-last-child（），它们在功能上有很大的不同。
例如，下面的选择器使用jQuery的：first ：
$（'ul> li：first'）
仅匹配一个元素：匹配选择器的第一个元素 ul& li ，无论DOM中有多少 ul 和 li 元素。这个选择器符号可以写成一个方法调用，如下：
$（'ul> li'
这使得它更清楚它实际上是什么。它不同于：first-child ：
$ ; li：first-child'）
/ code>将选择其父 ul 的第一个子元素 li 返回一个或多个 li 元素，而不是：first / p>
还值得一提的是：not（） selector;虽然我不认为它作为与上述选择器相同的过滤器，重要的是要记住，jQuery扩展它从实际提供的CSS。差异详述于此问题。我认为，由于 .not（） ，这绝对是其所有意图和目的的过滤方法，以及 <$ c的对立面$ c> .filter（） 。
It is possible to pass CSS selectors to the jQuery function such as:
jQuery('h1 + h2');
jQuery also has some filters such as :even and :odd:
jQuery('tr:even');
I was looking for some sort of syntax rule which differentiates the two and I was thinking that maybe the jQuery filters always use a :.
However, some CSS selectors also use a :. For example:
:last-child:root:empty:target
Does anyone have any smart tips for knowing if it is a CSS selector or a jQuery filter being used?
I was looking for some sort of syntax rule which differentiates the two and I was thinking that maybe the jQuery filters always use a
:.However, some CSS selectors also use a
:.
Does anyone have any smart tips for knowing if it is a CSS selector or a jQuery filter being used?
This is one of the most annoying things about selector libraries adopting CSS syntax within their own extensions: because both match-based filters and true pseudo-classes are lumped together in an umbrella term known as "pseudo-selectors" (which basically means "selectors that begin with a :"), the only way to tell whether a "pseudo-selector" is a filter or a true simple selector is by knowing what it does, which if you're unfamiliar with the selector often means referring to the jQuery documentation as mentioned by others here. You'll notice that most of these match-based filters will have the word "match" somewhere in their descriptions; that is a reasonable indicator that a "pseudo-selector" works as a match-based filter.
There is a subcategory of Selectors in jQuery called Basic Filters, however the name is completely misleading and the selectors themselves poorly categorized; not all of them are actual filters but some of them function like standard pseudo-classes! At least the jQuery Extensions category has a proper name — because these selectors are non-standard.
What I call a "match-based filter" is basically a selector that matches an element based on the entire complex selector leading up to that selector. Sound confusing? That's because it is.
In fact, for the sake of easy reference, here is a list of jQuery selectors that work as match-based filters:
These selectors return the nth element(s) among a set of matches, as opposed to other, standard selectors which take each element and make deductions of what it is based solely on the information about the element, provided by the DOM or otherwise, and not based on the rest of the selector string. While they are very often compared to :first-child, :last-child, :nth-child() and :nth-last-child(), they are vastly different in terms of functionality. Be very careful in choosing which selector to use.
For example, the following selector, using jQuery's :first:
$('ul > li:first')
Matches only one element: the first element matching the selector ul > li, regardless of how many ul and li elements there are in the DOM. This selector notation can be written as a method call like so:
$('ul > li').first()
Which makes it much clearer what it actually does. It differs from :first-child:
$('ul > li:first-child')
In that :first-child will select every li that is the first child of its parent ul, and can therefore potentially return one or more li elements, as opposed to exactly one with :first.
Also worth mentioning is the :not() selector; although I don't consider it as the same kind of filter as the above selectors, it's important to remember that jQuery extends it from what's actually offered in CSS. The differences are detailed in this question. I imagine that it's categorized under Basic Filters anyway because of .not(), which is most definitely for all its intents and purposes a filter method, and the antithesis of .filter().
这篇关于CSS选择器和jQuery过滤器之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
