Hi i,m JinXiang
? 前言 ?
本篇文章主要介绍在 jQuery中过滤选择器及可见性过滤选择器的使用以及部分理论知识
🍉欢迎点赞 👍 收藏 ?留言评论 📝私信必回哟😁
🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言
目录
3、:even：选取索引是偶数的所有元素（index从0开始）
4、:odd：选取索引是奇数的所有元素（index从0开始）
6、:eq(index)：选取索引等于index的元素（index从0开始）
7、:gt(index)：选取索引大于index的元素（index从0开始）
8、:lt(index)：选取索引小于index的元素（index从0开始）
在jQuery中，过滤选择器是用来过滤匹配元素集合的选择器。它们允许您选择特定的元素，如第一个、最后一个、奇数或偶数位置的元素，或者根据它们的属性、内容或其他条件进行选择。过滤选择器可以帮助您更精确地选择需要的元素，从而使操作更方便和高效。
在jQuery中使用过滤选择器的好处有以下几点：
:first过滤选择器选择第一个匹配的元素，而不需要遍历整个元素集合。总的来说，使用过滤选择器可以提高代码的效率和可读性，同时还可以增强对元素的控制能力，使得操作更为灵活和方便。
在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");
:gt(index)：选取索引大于index的元素（index从0开始）//选取索引大于1的<li>元素（注：大于1，不包括1）
$("li:gt(1)").addClass("selected"):lt(index)：选取索引小于index的元素（index从0开始）//选取索引小于1的<li>元素（注：小于1，不包括1）
$("li:lt(1)").addClass("selected"):header：选取所有标题元素，如h1~h6//选取网页中所有标题元素
$('header').addClass('highlight'):focus：选取当前获取焦点的元素//选取当前获取焦点的元素
，$('input').focus():animated：选择所有动画在jQuery中，可以使用animate()函数来实现动画效果。
animate()函数的用法如下：
//选取当前获取所有动画的元素
$(selector).animate(styles, speed, easing, complete);selector：要进行动画的元素选择器。
styles：要改变的CSS属性和值，可以是一个对象或CSS属性名称和值的键值对。
speed：动画的持续时间，可以是毫秒值或字符串，比如 "slow" 或 "fast"。
easing：动画的缓动效果，默认为 "swing"。
complete：动画完成后要执行的回调函数。
下面是一个例子，假设有一个<div>元素，初始状态为隐藏，我们想通过渐入动画显示它：
$('#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" )选取当前所有动画元素 |
?这些是一些常见的过滤选择器，可以帮助我们根据不同的条件选择需要的元素。
jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。
可见性过滤选择器是一种用于在jQuery中过滤可见元素的选择器。它们允许我们根据元素的可见性进行选择和操作。
使用可见性过滤选择器的好处包括：
简化代码：可见性过滤选择器使得选择和操作可见元素变得更加简单和直观。我们不需要手动编写复杂的条件语句来检测元素的可见性。
提高性能：可见性过滤选择器能够利用浏览器的原生方法来快速过滤出可见元素，从而提高代码的执行效率。
精确控制：可见性过滤选择器可以根据元素的显示状态（包括display和visibility属性）来进行选择。这使得我们可以精确地控制哪些元素应该被选中，哪些元素应该被排除。
总之，使用可见性过滤选择器可以提高代码的可读性和可维护性，同时也能够提升代码的执行效率。它们是jQuery中非常有用的功能之一。
在jQuery中，可以使用以下可见性过滤选择器来选择可见元素：
1、:visible：选择所有可见的元素，即在页面上显示的元素。
$(selector).filter(":visible");
2、:hidden：选择所有隐藏的元素，即在页面上不显示的元素。
$(selector).filter(":hidden");
3、:not(:visible)：选择所有不可见的元素。
$(selector).filter(":not(:visible)");
4、:has(:visible)：选择所有包含可见元素的父元素。
$(selector).filter(":has(:visible)");
这些可见性过滤选择器可以与其他选择器结合使用，以进一步缩小选择范围。例如：
$("div:visible").addClass("highlight");
上述代码将为页面上可见的所有div元素添加highlight类。
注意：可见性过滤选择器只考虑元素的CSS可见性，不考虑元素在DOM中的位置。如果需要同时考虑CSS可见性和DOM位置，请使用.is(":visible")方法。
下面是可见性过滤选择器的总结表格：
| 可见性过滤选择器 | 描述 |
|---|---|
| :visible | 选择所有可见的元素 |
| :hidden | 选择所有隐藏的元素 |
| :not(:visible) | 选择所有不可见的元素 |
| :has(:visible) | 选择所有包含可见元素的父元素 |
使用可见性过滤选择器可以方便地筛选出页面上可见或隐藏的元素，并进行相应的操作。
总结不易，希望宝宝们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ! 如有问题，欢迎评论区批评指正😁?