定义和用法
filter() 方法返回符合一定条件的元素。
该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。
该方法通常用于缩小在被选元素组合中搜索元素的范围。
提示：filter() 方法是与 not() 方法相对的。
filter()是根据括号中的 属性来进行筛选 比如：$(“p”).filter(“p”) 这样是不允许的。filter括号里只一些属性，或者包含什么的，不能是一个元素，例如”p”
//filter() --获取具有某些属性值的标签 :(指定的对象集合进行过滤)
$("li").filter(".item-1") //获取cla
`jQuery` 的 `filter()` 方法是一个非常实用的功能，它允许我们根据特定的条件筛选出一组匹配的元素。在本文中，我们将深入探讨 `filter()` 方法的使用，包括其定义、用法以及各种示例，帮助你更好地理解和掌握这一强大的工具。
### 定义和用法
`filter()` 方法接收一个函数或者一个选择器作为参数，用于筛选当前匹配元素集合中的元素。如果元素满足提供的条件，那么它们将被包含在返回的新集合中。相反，不满足条件的元素将被排除。这为我们提供了一种高效的方式，来针对大量元素执行精细化操作，特别是当我们在大型DOM树中寻找特定子元素时。
### 示例和应用
1. **根据类名筛选元素**
```javascript
$("li").filter(".item-1") // 获取class属性值为item-1的li元素
```
上述代码将返回所有拥有 `class="item-1"` 的 `li` 元素。
2. **基于索引位置筛选**
```javascript
$("li").filter(":even").css("background", "red"); // 获取所有偶数号的li元素，并将它们的背景颜色设为红色
```
这里使用了伪类选择器 `:even`，它将选取索引值为偶数的元素，然后设置它们的背景色。
3. **多条件筛选**
```javascript
$("li").filter(".item-1,#abc").css("background-color", "yellow"); // 获取class属性值为item-1的所有li标签，同时获取id属性值为abc的所有li标签
```
这个例子中，我们通过逗号分隔的选择器同时选择了满足多个条件的元素。
4. **根据属性值筛选**
```javascript
$("p").filter(".selected, :first"); // 获取class属性值为selected的所有P标签，同时获取第一个P标签
```
在这个示例中，我们结合了类选择器 `.selected` 和伪类选择器 `:first` 来选取满足特定条件的 `p` 元素。
5. **使用`:contains()` 选择器**
```javascript
$("p p:contains('测试')").text(); // 获取包含“测试”文本的p标签的text值
```
`:contains()` 选择器用于选取包含指定文本的元素。在这个例子中，我们选取了所有包含文本 "测试" 的嵌套 `p` 标签。
6. **与 `:has()` 选择器的区别**
`:has()` 和 `:contains()` 都是用于选择含有特定子元素或文本的元素。然而，`:has()` 是基于子元素的存在，而 `:contains()` 是基于文本内容。例如：
```javascript
// 正确使用 :has()
$("p:has('span')").doSomething();
// 错误使用 :contains()
// 注意，这里会抛出错误，因为 :contains 是一个选择器，而不是一个方法
$("p").contains("测试").text();
```
### 总结
`jQuery` 的 `filter()` 方法是 DOM 操作中的重要一环，它提供了强大的筛选功能，使得我们可以根据各种条件精准地选取和操作元素。无论是在页面交互、数据绑定还是动态内容更新中，`filter()` 都能发挥重要作用。通过熟练掌握 `filter()`，你可以更高效地编写出灵活且高效的 `jQuery` 代码。在实际应用中，结合其他选择器和方法，可以实现更多复杂的场景需求。
