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

Posted 2023-03-06

【中文标题】CSS选择器和jQuery过滤器之间的区别？

【英文标题】：Difference between CSS selector and jQuery filter?

【发布时间】：2012-04-16 12:27:03

【问题描述】：

可以将 CSS 选择器传递给 jQuery 函数，例如：

jQuery('h1 + h2');

jQuery 还有一些过滤器，例如:even 和:odd：

jQuery('tr:even');

我正在寻找某种区分两者的语法规则，我想也许 jQuery 过滤器总是使用:。

但是，一些CSS selectors 也使用:。例如：

:last-child :root :empty :target

有没有人知道它是使用 CSS 选择器还是 jQuery 过滤器？

【问题讨论】：

不确定现有答案如何回答问题...

@BoltClock 你确定你知道你在说什么吗？ ...我很困惑...

@Neal：我和你一样困惑。你对什么回答“是”？你说什么在 jQuery 中应该是可能的？

我认为最初的问题是（在 ninja 编辑之前，虽然我记不太清了），如果 jQuery 允许使用这些选择器。所以gdoron和我回答了这个问题。

@BoltClock 似乎在 OPs ninja 编辑中，gdoron 的回答和我的回答没有什么意义......

【参考方案1】：

我一直在寻找某种区分两者的语法规则，我在想也许 jQuery 过滤器总是使用:。

但是，一些 CSS 选择器也使用 :。

有没有人知道它是使用 CSS 选择器还是 jQuery 过滤器？

这是关于选择器库在其自己的扩展中采用 CSS 语法的最烦人的事情之一：因为基于匹配的过滤器和真正的伪类都集中在一个称为“伪选择器”的总称中（基本上表示“以: 开头的选择器”），判断“伪选择器”是过滤器还是真正简单选择器的唯一方法是知道它的作用，如果你'不熟悉选择器通常意味着参考其他人在这里提到的jQuery documentation。您会注意到，这些基于匹配的过滤器中的大多数都会在其描述中的某处包含“匹配”一词；这是“伪选择器”作为基于匹配的过滤器工作的合理指标。

在 jQuery 中有一个选择器子类别，称为 Basic Filters，但是这个名称完全具有误导性，而且选择器本身的分类也很差；并非所有这些都是实际的过滤器，但其中一些功能类似于标准伪类！至少jQuery Extensions 类别有一个专有名称——因为这些选择器是非标准的。

我所说的“基于匹配的过滤器”基本上是一个选择器，它基于通向该选择器的整个复杂选择器匹配一个元素。听起来很混乱？那是因为它是。

事实上，为了方便参考，这里有一个 jQuery 选择器列表，它们可以用作基于匹配的过滤器：

:eq() :gt() :lt() :even :odd :first :last

这些选择器返回一组匹配项中的第 n 个元素，与其他标准选择器不同，标准选择器采用每个元素并仅根据由 DOM 或否则，而不是基于选择器字符串的其余部分。虽然它们经常与:first-child、:last-child、:nth-child() 和:nth-last-child() 进行比较，但它们在功能上却大不相同。在选择要使用的选择器时要非常小心。

例如下面的选择器，使用jQuery的:first：

$('ul > li:first')

仅匹配一个元素：匹配选择器ul > li的第一个元素，无论DOM中有多少ul和li元素。这个选择器符号可以写成这样的方法调用：

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

这使得它的实际作用更加清晰。与:first-child不同：

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

其中:first-child 将选择每个li，它是其父ul 的第一个子元素，因此可能会返回一个或更多 li 元素，而不是完全返回一个:first。

另外值得一提的是:not() 选择器；尽管我不认为它是与上述选择器相同的过滤器，但重要的是要记住 jQuery 是从 CSS 中实际提供的内容扩展而来的。差异在this question 中有详细说明。我想它无论如何都归类为基本过滤器是因为.not()，这绝对是其所有意图和目的的过滤器方法，以及.filter() 的对立面。

【参考方案2】：

jQuery 选择器实用程序函数的想法是接受任何 css 选择器（包括 css3 选择器），除此之外，还添加了一些未在 css 规范中定义的额外功能（例如 :odd（在有效的 CSS 是 :nth-child(odd)) 和 :not(selector) 例如）。强烈建议不要不要使用 jquery 特定的选择器，除非真的有必要，因为本地 css 选择器的处理速度比自定义 jquery css 快得多（在现代网络浏览器中）。正如 gdoron 已经提到的，如果您需要检查特定选择器是否可用，您可以在 jquery documentation 中查看完整列表，您也可以在那里找到自定义选择器。

【讨论】：

:odd 与 :nth-child(odd) 不同——事实上，它根本没有 CSS 等价物。有关 jQuery 的 :not() 与 CSS3 的 :not() 的详细解释，请参阅 ***.com/questions/10711730/…

我的错，我总是使用 :nth-child(odd) 选择器并忘记了 :odd 从父母的角度来看不起作用。是的，就 :not 而言，我知道这就是为什么我说 :not(selector) 是 jquery 扩展（因为 :not(singleton selector) 是 css 替代品），但我不想深入探讨这个问题，因为问题似乎并没有要求。

【参考方案3】：

是的，该选择器存在于 jQuery 选择器被称为next adjacent selector

你可以看到完整的选择器列表here

有没有人知道它是使用 CSS 选择器还是 JQuery 过滤器？

我的提示，检查 API，选择器是否存在...