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中使用过滤选择器的好处有以下几点：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

javascript">//选取索引大于1的<li>元素（注：大于1，不包括1）
$("li:gt(1)").addClass("selected")

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

javascript">//选取索引小于1的<li>元素（注：小于1，不包括1）
$("li:lt(1)").addClass("selected")

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

javascript">//选取网页中所有标题元素
$('header').addClass('highlight')

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

javascript">//选取当前获取焦点的元素
，$('input').focus()

11、`:animated`：选择所有动画

在jQuery中，可以使用animate()函数来实现动画效果。

animate()函数的用法如下：

javascript">//选取当前获取所有动画的元素
$(selector).animate(styles, speed, easing, complete);

selector：要进行动画的元素选择器。
styles：要改变的CSS属性和值，可以是一个对象或CSS属性名称和值的键值对。
speed：动画的持续时间，可以是毫秒值或字符串，比如 "slow" 或 "fast"。
easing：动画的缓动效果，默认为 "swing"。
complete：动画完成后要执行的回调函数。

下面是一个例子，假设有一个<div>元素，初始状态为隐藏，我们想通过渐入动画显示它：

javascript">$('#myDiv').animate({ opacity: 1 }, 1000);

在上面的例子中，使用animate()函数将opacity属性从0变为1，持续时间为1秒。

您可以使用animate()函数来实现各种动画效果，包括渐变、移动、变换大小等等。可以通过改变元素的CSS属性来创建所需的动画效果，并设置适当的持续时间和缓动效果，以便实现您想要的动画效果。

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

以下是一些jQuery中常用的过滤选择器表格总结：

语法	描述	示例
`:first`	选取第一个元素	$(" li:first" )选取所有<li>元素中的第一个<li>元素
`:last`	选取最后一个元素	$(" li:last" )选取所有<li>元素中的最后一个<li>元素
`:not(selector)`	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
`:even`	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有<li>元素
`:odd`	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有<li>元素
`:eq(index)`	选取索引等于index的元素（index从0开始）	$("li:eq(1)" )选取索引等于1的<li>元素
`:gt(index)`	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）
`:lt(index)`	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）
`:header`	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
`:focus`	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
`:animated`	选择所有动画	$(":animated" )选取当前所有动画元素

这些是一些常见的过滤选择器，可以帮助我们根据不同的条件选择需要的元素。

二、可见性过滤选择器

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

jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。

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

可见性过滤选择器是一种用于在jQuery中过滤可见元素的选择器。它们允许我们根据元素的可见性进行选择和操作。

使用可见性过滤选择器的好处包括：

简化代码：可见性过滤选择器使得选择和操作可见元素变得更加简单和直观。我们不需要手动编写复杂的条件语句来检测元素的可见性。
提高性能：可见性过滤选择器能够利用浏览器的原生方法来快速过滤出可见元素，从而提高代码的执行效率。
精确控制：可见性过滤选择器可以根据元素的显示状态（包括display和visibility属性）来进行选择。这使得我们可以精确地控制哪些元素应该被选中，哪些元素应该被排除。

总之，使用可见性过滤选择器可以提高代码的可读性和可维护性，同时也能够提升代码的执行效率。它们是jQuery中非常有用的功能之一。

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

在jQuery中，可以使用以下可见性过滤选择器来选择可见元素：

1、:visible：选择所有可见的元素，即在页面上显示的元素。

javascript">$(selector).filter(":visible");

2、:hidden：选择所有隐藏的元素，即在页面上不显示的元素。

javascript">$(selector).filter(":hidden");

3、:not(:visible)：选择所有不可见的元素。

javascript">$(selector).filter(":not(:visible)");

4、:has(:visible)：选择所有包含可见元素的父元素。

javascript">$(selector).filter(":has(:visible)");

这些可见性过滤选择器可以与其他选择器结合使用，以进一步缩小选择范围。例如：

javascript">$("div:visible").addClass("highlight");

上述代码将为页面上可见的所有div元素添加highlight类。

注意：可见性过滤选择器只考虑元素的CSS可见性，不考虑元素在DOM中的位置。如果需要同时考虑CSS可见性和DOM位置，请使用.is(":visible")方法。

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

下面是可见性过滤选择器的总结表格：

可见性过滤选择器	描述
:visible	选择所有可见的元素
:hidden	选择所有隐藏的元素
:not(:visible)	选择所有不可见的元素
:has(:visible)	选择所有包含可见元素的父元素

使用可见性过滤选择器可以方便地筛选出页面上可见或隐藏的元素，并进行相应的操作。

总结不易，希望宝宝们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ! 如有问题，欢迎评论区批评指正😁