Question

我正在查看一些JavaScript / jQuery基础知识，并对使用filter()和:

感到好奇

它们之间有什么区别？

这些代码行为什么起作用：

$("li").filter(":even").css("background-color", "red"); 
$("li:even").css("background-color", "red"); 
$("p").filter(".intro").css("color", "green");

但是这样的东西不会吗？

$("li").filter("even").css("background-color", "red");
$("p:.intro").css("color", "green");

那么您什么时候使用filter()和:？

Answer 1

它们之间有什么区别？

我认为最好在jQuery selector vs filter()中回答，但总而言之...

第一个只使用jQuery的选择器引擎（Sizzle）一次，以生成表示元素集合的jQuery对象。

使用.filter()的后者与上面的操作相同，但是随后再次应用选择器引擎来过滤这些结果。从链接的文章中可以看出，.filter()的用途不只是选择字符串。

Sizzle提供的选择功能与您可以在document.querySelector()中使用的CSS 3选择器大致相同，但具有一些附加功能，其中大多数都属于 filter 类别；就是那些冒号后面的人。

为什么这些代码行有效？
  ...
  但是像这样的东西不会吗？

让我们看看您对选择器的要求...

$("li").filter(":even")
$("li:even")

这些是等效的（它们做事的时间除外），但这是Sizzle库中的其他功能之一；位置过滤器，例如:first，:odd，当然还有:even。

现在，这个...

$("li").filter("even")

首先请求所有<li>元素，然后尝试通过"even"选择器字符串对其进行过滤。这是一个元素选择器，因此您需要同时也是<li>元素的所有<even>元素。显然，这将导致一个空列表。

$("p").filter(".intro")

这将获取所有<p>标签，然后过滤到具有"intro"类的标签。点（类）选择器是标准的CSS 3选择器。

$("p:.intro")

没有特殊的点选择器过滤器。虽然标准点选择器可以与元素选择器组合，但产生

$('p.intro')