jQuery选择器（二） 过滤选择器及可见性过滤选择器的使用

Hi i,m JinXiang

---

⭐ 前言 ⭐

本篇文章主要介绍在 jQuery中过滤选择器及可见性过滤选择器的使用以及部分理论知识

---

🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言

---

目录

⭐一、过滤选择器

1、什么是过滤选择器？

2、使用过滤选择器的好处

3、使用过滤选择器（常用）

1、:first：选取第一个元素

2、last：选取最后一个元素

3、:even：选取索引是偶数的所有元素（index从0开始）

4、:odd：选取索引是奇数的所有元素（index从0开始）

5、:not：选取去除所有与给定选择器匹配的元素

6、:eq(index)：选取索引等于index的元素（index从0开始）

7、:gt(index)：选取索引大于index的元素（index从0开始）

8、:lt(index)：选取索引小于index的元素（index从0开始）

9、:header：选取所有标题元素，如h1~h6

10、:focus：选取当前获取焦点的元素

11、:animated：选择所有动画

⭐总结过滤选择器的使用方法

⭐二、可见性过滤选择器

1、什么是可见性过滤选择器？

2、使用可见性过滤选择器的好处

3、使用可见性过滤选择器

⭐总结可见性过滤选择器的使用方法

---

一、过滤选择器

1、什么是过滤选择器？

在jQuery中，过滤选择器是用来过滤匹配元素集合的选择器。它们允许您选择特定的元素，如第一个、最后一个、奇数或偶数位置的元素，或者根据它们的属性、内容或其他条件进行选择。过滤选择器可以帮助您更精确地选择需要的元素，从而使操作更方便和高效。

2、使用过滤选择器的好处

在jQuery中使用过滤选择器的好处有以下几点：

1. 精确选择：过滤选择器可以帮助您更精确地选择所需的元素，从而减少不必要的操作。例如，您可以使用:first过滤选择器选择第一个匹配的元素，而不需要遍历整个元素集合。
2. 提高性能：由于过滤选择器可以缩小元素集合的范围，因此可以减少需要处理的元素数量，从而提高代码的执行效率。
3. 简化代码：使用过滤选择器可以使代码更简洁和易于理解。通过使用适当的过滤选择器，可以在单个选择器中完成多个操作，而不需要额外的代码。
4. 增强功能：过滤选择器不仅仅可以根据位置选择元素，还可以根据各种条件进行选择，如属性、内容、可见性等。这样可以增强您对元素的控制能力，实现更复杂的操作。
5. 可组合性：过滤选择器可以与其他选择器和方法进行组合使用，从而实现更复杂和灵活的选择和操作。这样您可以根据需求灵活地组合多个选择器和方法，以满足各种场景的需求。

总的来说，使用过滤选择器可以提高代码的效率和可读性，同时还可以增强对元素的控制能力，使得操作更为灵活和方便。

3、使用过滤选择器（常用）

在jQuery中，您可以使用过滤选择器来选择具有特定属性、内容或状态的元素。以下是一些常用的过滤选择器的示例：

1、:first：选取第一个元素

//选取所有<li>元素中的第一个<li>元素
$("li:first").addClass("selected");

2、last：选取最后一个元素

//选取所有<li>元素中的最后一个<li>元素
$("li:last").addClass("selected");

3、:even：选取索引是偶数的所有元素（index从0开始）

//选取索引是偶数的所有<li>元素
$("li:even").addClass("even");

4、:odd：选取索引是奇数的所有元素（index从0开始）

//选取索引是奇数的所有<li>元素
$("li:odd").addClass("odd");

5、:not：选取去除所有与给定选择器匹配的元素

//选取class不是three的元素
$(".class:not(.three)").addClass("unselected");

6、:eq(index)：选取索引等于index的元素（index从0开始）

//选取索引等于2的<li>元素
$("li:eq(2)").addClass("selected");

7、:gt(index)：选取索引大于