J Query

最新推荐文章于 2024-03-09 22:02:29 发布

Charon༒

最新推荐文章于 2024-03-09 22:02:29 发布

阅读量91

点赞数

文章标签： jquery javascript linq

本文链接：https://blog.csdn.net/m0_67793408/article/details/123467127

版权

本文详细介绍了如何使用jQuery进行元素过滤与查找，包括first(), last(), eq(), filter(), not(), has()等方法的应用实例，以及children(), find(), parent(), siblings()等查找函数的用法，帮助读者理解和掌握在实际项目中的应用。

摘要由CSDN通过智能技术生成

筛选
过滤
（在jQuery对象数组中，过滤出一部分元素来）
first()：获取匹配的第一个元素
last()：获取匹配的最后一个元素
eq(N)：获取匹配的第N或-N个元素
filter(selector): 筛选出与指定表达式匹配的元素集合
not(selector): 筛选出不包含特定特点的元素的集合
has(selector): 筛选出包含特定特点的元素的集合

案例一：演示过滤所有的方法
       
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           // 入口函数
           $(function() {

               // 在jQuery对象数组中，筛选出一部分元素

               // 1.1过滤
               // 过滤出指定表达式匹配的元素
               // 获取ul中所有的li元素，然后找到第一个元素
               // 昨日方法
               // $("#mDiv>ul>li:first").css("border","1px solid red")
               // 今日写法
               // $("#mDiv>ul>li").first().css("border","1px solid yellow")

               // 找到最后一个元素
               // $("#mDiv>ul>li").last().css("border","1px solid blue")

               // 找到指定某一个元素，例如第三个
               // $("#mDiv>ul>li").eq(2).css("border","1px solid pink")

               // 过来出指定表达式匹配的元素集合
               // 找到属性title为a的属性
               // $("#mDiv>#mOl>li").filter("[title=aa]").css("background","red");

               // 筛选出有title属性的元素集合
               // $("#mDiv>#mOl>li").filter("[title]").css$("#mDiv>#mOl>li").filter("[title]").css("background","red");

               // 筛选出有<span>标签的元素集合
               // $("#mDiv>ul>li").has("span").css("background","red");

               // 筛选出没有title属性的元素集合
               // $("#mDiv>ul>li").not("[title]").css("background","pink");
查找
（在jQuery对象数组中，根据选择器查找父母、孩子、兄弟标签）
children()：自标签中找
find():后代标签中找
parent():父标签
preAll():前面所有兄弟标签
nextAll():后面所有兄弟标签
siblings():前后所有兄弟标签
案例二：演示查找所有方法
               // 1.2查找

               // 查找ul所有子标签，并且指定为li子标签
               // $("#mDiv>ul>li").css("background","orange");
               // $("#mDiv>ul").children().css("background","plum");

               // 查找ul下面所有的span标签
               // $("#mDiv>#mOl").find("span").css("background","red");

               // 查找b标签的父元素标签
               // $("b").parent().css("background","pink");

               // 查找第三个li标签前面所有的兄弟标签
               // $("#mDiv>ul>li").eq(2).css("background","pink");
               // $("#mDiv>ul").children().eq(2).css("background","pink");

               // 查找第三个li标签后面所有的兄弟标签，并且只能是li标签
               // $("#mDiv>ul").children().eq(2).nextAll().css("background","yellow");

               // 查找第三个li标签所有的兄弟标签
               // $("#mDiv>ul").children().eq(2).siblings().css("background","yellow");

               // 查找第三个li标签后面所有的兄弟标签拿到其中第二个
               $("#mDiv>ul").children().eq(2).nextAll().eq(1).css("background", "red");
           })
       </script>
   </head>
筛选完整代码内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>筛选和过滤</title>

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 入口函数
$(function() {
// 在jQuery对象数组中，筛选出一部分元素

// 1.1过滤
// 过滤出指定表达式匹配的元素
// 获取ul中所有的li元素，然后找到第一个元素
// 昨日方法
// $("#mDiv>ul>li:first").css("border","1px solid red")
// 今日写法
// $("#mDiv>ul>li").first().css("border","1px solid yellow")

// 找到最后一个元素
// $("#mDiv>ul>li").last().css("border","1px solid blue")

// 找到指定某一个元素，例如第三个
// $("#mDiv>ul>li").eq(2).css("border","1px solid pink")

// 过来出指定表达式匹配的元素集合
// 找到属性title为a的属性
// $("#mDiv>#mOl>li").filter("[title=aa]").css("background","red");

// 筛选出有title属性的元素集合
// $("#mDiv>#mOl>li").filter("[title]").css$("#mDiv>#mOl>li").filter("[title]").css("background","red");

// 筛选出有<span>标签的元素集合
// $("#mDiv>ul>li").has("span").css("background","red");

// 筛选出没有title属性的元素集合
// $("#mDiv>ul>li").not("[title]").css("background","pink");

// 1.2查找

// 查找ul所有子标签，并且指定为li子标签
// $("#mDiv>ul>li").css("background","orange");
// $("#mDiv>ul").children().css("background","plum");

// 查找ul下面所有的span标签
// $("#mDiv>#mOl").find("span").css("background","red");

// 查找b标签的父元素标签
// $("b").parent().css("background","pink");

// 查找第三个li标签前面所有的兄弟标签
// $("#mDiv>ul>li").eq(2).css("background","pink");
// $("#mDiv>ul").children().eq(2).css("background","pink");

// 查找第三个li标签后面所有的兄弟标签，并且只能是li标签
// $("#mDiv>ul").children().eq(2).nextAll().css("background","yellow");

// 查找第三个li标签所有的兄弟标签
// $("#mDiv>ul").children().eq(2).siblings().css("background","yellow");

// 查找第三个li标签后面所有的兄弟标签拿到其中第二个
$("#mDiv>ul").children().eq(2).nextAll().eq(1).css("background", "red");
})
</script>
</head>
<body>
<h2 align="center" style="color: #DDA0DD;">筛选和过滤</h2>
<hr>
<div id="mDiv">
<ol id="mOl">
<b>
<title>小乖的成长史</title>
<li title="aa">像个小白兔</li>
<li title="bb"><a>超级可爱呢~~~</a></li>
<li title="cc">嘻嘻嘻~~~</li>
<li><img src="img/1.gif"></li>
<li title="dd">超级善良可爱</li>
</b>
<ul>
<li><img src="./img/3.gif"></li>
<li>
<h2>小白兔遇到大灰狼</h2>
</li>
<li><span>小乖遇到了某凡（内心世界：吐了~~~）</span></li>
<li><img src="img/2.gif"></li>
</ul>
</ol>
<ul>
<li>嘻嘻</li>
<li>哈哈</li>
<li>嘿嘿</li>
<li>呵呵</li>
<li>咳咳</li>
<li>嘶嘶</li>
<li>呼呼</li>
</ul>
</div>
<hr>
<ul style="color: palevioletred">
<b>
<li>一一（咿呀）</li>
<li>二二（尔尔）</li>
<li>三三（莎莎）</li>
<li>四四（思思）</li>
<li>五五（呜呜）</li>
</b>
</ul>
</body>
</html>