何时在jQuery中使用filter（）与：？

Posted 2021-04-13

我正在审查一些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()而不是:？

答案

他们之间有什么区别？

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

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

后者使用.filter()与上面相同，但然后再次应用选择器引擎来过滤这些结果。正如在链接帖子中可以看到的那样，.filter()除了使用选择器字符串之外还有其他用途。

Sizzle提供的选择功能大致相当于你可以在document.querySelector()中使用的CSS 3选择器，但有一些附加功能，其中大多数属于过滤器类别;那是跟随冒号的人。

---

为什么这些代码行有效 ... 但这样的事情不会吗？

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

$("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')