何时使用 filter() 与 : 在 jQuery 中？

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

What's the difference between them?

我认为这在 jQuery selector vs filter() 中得到了最好的回答，但总结一下...

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

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

Sizzle 提供的选择功能大致相当于 CSS 您可以在 document.querySelector() 中使用的 3 个选择器，但还有一些额外功能，其中大部分属于 filter 类别;那是那些跟在冒号后面的字符。

Why do these lines of code work
...
but something like these won't?

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

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

这些是等价的（除了 when 他们做事）但这是 Sizzle 库中的额外 features 之一;位置过滤器，例如 :first、:odd，当然还有 :even.

现在这个...

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

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

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

这会获取所有 <p> 标签，然后过滤到带有 "intro" class 的标签。点 (class) 选择器是标准的 CSS 3 选择器。

$("p:.intro")

没有特殊的点选择过滤器。标准点选择器可以与元素选择器结合使用，生成

$('p.intro')

When to use filter() versus : in jQuery?