jQuery 中的 selector 和 filter() 有什么区别？

在 jQuery 中，selector 和 filter() 都用于选择元素，但是它们有一些关键的区别：

Selector

Selector 是一种表达式，它从文档中选择一组元素。例如，如果我们想选择所有带有 "red" 类的元素，可以使用以下 selector：.red。

下面是一些 jQuery selector 的例子：

// 选择 ID 为 "myId" 的元素
$('#myId')

// 选择所有带有 "red" 类的元素
$('.red')

// 选择所有标题元素（h1、h2、h3 等）
$('h1, h2, h3')

可以看到，selector 是一种简单的选择元素的方法。然而，它并不能帮助我们对已选元素进行筛选和操作。

filter()

寻找 selector 找到的元素后，通常我们需要进一步筛选和操作这些元素。这时就可以使用 filter()。

filter() 方法用于针对当前选择集筛选元素。它接受一个表达式作为参数，该表达式过滤出满足条件的元素。例如，如果我们想筛选所有 "red" 类元素中的 p 元素，可以使用以下代码：

// 选择所有带有 "red" 类的元素
$('.red')

// 筛选出其中的 p 元素
.filter('p')

filter() 可以接受的参数有很多，例如筛选出所有具有某一属性值的元素、筛选出所有从第 n 个元素开始或前 n 个元素等等。

下面是一些 jQuery filter() 的例子：

// 筛选出带有 "red" 类和 "green" 类的元素
$('.red, .green')
.filter('p')

// 筛选出所有带 title 属性的元素
$('*').filter('[title]')

// 筛选出前 3 个 li 元素
$('li').filter(':lt(3)')

需要注意的是，filter() 方法返回的是新选择集而不是修改当前选择集。也就是说，它并不会改变原有的选择集。

总结

• 在 jQuery 中，selector 和 filter() 都用于选择元素。
• selector 从文档中选择一组元素，而 filter() 是用于筛选已选元素的。
• filter() 方法接受一个表达式作为参数，该表达式过滤出满足条件的元素。它可以筛选出具有某一属性值的元素、前 n 个元素、满足任意复杂条件的元素等。
• filter() 返回的是新选择集而不是修改当前选择集。