CSS选择器和jQuery过滤器之间的区别?

dub*_*ech 6 css jquery css-selectors jquery-selectors

可以将CSS选择器传递给jQuery函数,例如:

jQuery('h1 + h2');
Run Code Online (Sandbox Code Playgroud)

jQuery的也有一些过滤器,如:even:odd:

jQuery('tr:even');
Run Code Online (Sandbox Code Playgroud)

我正在寻找某种语法规则来区分这两种规则并且我在想,也许jQuery过滤器总是使用a :.

但是,一些CSS选择器也使用了:.例如:

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

有没有人知道它是CSS选择器还是正在使用的jQuery过滤器?

Bol*_*ock 7

我正在寻找某种语法规则来区分这两种规则并且我在想,也许jQuery过滤器总是使用a :.

但是,一些CSS选择器也使用了:.

有没有人知道它是CSS选择器还是正在使用的jQuery过滤器?

这是选择器库在自己的扩展中采用CSS语法最烦人的事情之一:因为基于匹配的过滤器和真正的伪类都被称为"伪选择器"(它基本上意味着"选择器")以:")开头,判断"伪选择器"是过滤器还是真正的简单选择器的唯一方法是知道它的作用,如果你不熟悉选择器通常意味着引用jQuery文档正如其他人所说.您会注意到,大多数这些基于匹配的过滤器在其描述中的某处都会显示"匹配"一词; 这是一个合理的指标,"伪选择器"作为基于匹配的过滤器.

在jQuery中有一个名为Basic Filters的Selectors子类别,但是这个名称完全是误导性的,而且选择器本身分类很差; 并非所有这些都是实际的过滤器,但其中一些功能类似于标准的伪类!至少jQuery Extensions类别有一个正确的名称 - 因为这些选择器是非标准的.

我称之为"基于匹配的过滤器"基本上是一个选择器,它根据导致该选择器的整个复杂选择器匹配一个元素.声音混乱?那是因为它是.

实际上,为了便于参考,下面是一个jQuery选择器列表,它们用作基于匹配的过滤器:

这些选择器返回一组匹配中的第n个元素,而不是其他标准选择器,它们采用每个元素并仅基于DOM提供的有关元素的信息来推断它是什么,以及不基于选择器字符串的其余部分.虽然它们经常比较:first-child,:last-child,:nth-child():nth-last-child(),他们是在功能方面完全不同.选择使用哪个选择器要非常小心.

例如,以下选择器,使用jQuery :first:

$('ul > li:first')
Run Code Online (Sandbox Code Playgroud)

仅匹配一个元素:第一个元素匹配选择ul > li的无论多少,ulli元件有在DOM.这个选择器表示法可以写成方法调用,如下所示:

$('ul > li').first()
Run Code Online (Sandbox Code Playgroud)

这使得它实际上做得更清楚.它不同于:first-child:

$('ul > li:first-child')
Run Code Online (Sandbox Code Playgroud)

在那:first-child将选择每个li它的父亲的第一个孩子,ul因此可能返回一个或多个 li元素,而不是恰好一个:first.

另外值得一提的是:not()选择器; 虽然我不认为它是与上述选择器相同的过滤器,但重要的是要记住jQuery从CSS实际提供的内容中扩展它.这个问题详细说明了这些差异.我想它无论如何.not()都被归类为基本过滤器,因为它绝对是所有意图和目的的过滤方法,以及它的对立面.filter().