如需查看上一节内容，请点击下方链接进行跳转。
https://blog.csdn.net/m0_64522859/article/details/123437425目录
一、筛选
（1）过滤的方法
1、first()：获取匹配的第一个元素
$("#oul>li").first().css("border","1px solid pink");2、last()：获得匹配的最后一个元素
$("#oul>li").last().css("border","1px solid pink");3、filter(selector)：筛选出与指定表达式匹配的元素集合
console.log($("img").filter(".bb"));4、eq(N)：获取匹配的第N或-N个元素
console.log($("img").eq(2));5、not(selector)：筛选出不包含特定特点的元素的集合
console.log($("img").not(".bb"));6、has(selector)：筛选出包含特定特点的元素的集合
console.log($("div").has("img"));案例1：演示过滤所有的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
script <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元素，然后找到第一个元素
//昨日写法
//$("#oDiv>ul>li:first").css("border","1px solid red")
//加入写法
//$("#oDiv>ul>li")first().css("border","1px solid blue")
// 找到最后一个元素
//$("#oDiv>ul>li")last().css("border","1px solid blue")
// 找到指定的某一个元素，例如第3个
//$("#oDiv>ul>li")eq(3).css("border","1px solid blue")
//--过滤出指定表达式匹配的元素集合
// 找到属性title为a的元素
//$("#oDiv>#myol>li").filter("[title=aa]").css("background","yellow");
// 筛选出有title属性的元素集合
//$("#oDiv>#myol>li").filter("[title]").css("background","yellow");
// 筛选出有<span>标签的元素集合
// <li></li> <li>span</li>
//$("#oDiv>#myol>li").has("span").css("background","yellow");
// 筛选出没有title属性的元素集合
//$("#oDiv>ul>li").not("[title]").css("background","yellow");
//1.2 查找
// 查找ul的所有子标签,并且指定为li子标签
//$("#oDiv>ul>li").css("background","orange");
//$("#oDiv>ul").children().css("background","orange");
// 查找ol下面所有的span标签
//$("#oDiv>#my01").find("span").css("background","red");
// 查找b标签的父元素标签
//$("b").parent().css("background","blue");
// 查找第三个li标签前面所有的兄弟标签
//$("#oDiv>ul").eq(2).css("background","orange");
//$("#oDiv>ul").children().eq(2).css("background","orange");
//$("#oDiv>ul").children().eq(2).prevAll().css("background","orange");
// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
//$("#oDiv>ul").children().eq(2).nextAll().css("background","orange");
// 查找第三个li标签所有的兄弟标签
//$("#oDiv>ul").children().eq(2).siblings().css("background","orange");
// 查找第三个li标签后面所有的兄弟标签,拿到其中的第二个
//$("#oDiv>ul").children().eq(2).nextAll().eq(1).css("background","orange");
</script>
</head>
<body>
<h3>jQuery-03筛选和过滤</h3>
</body>
</html>
二、查找
1、children()：子标签中找
2、find()：后代标签中找
3、parent()：父标签
4、prevAll()：前面所有的兄弟标签
5、nextAll()：后面所有的兄弟标签
6、siblings()：前后所有的兄弟标签
案例2：演示查找所有的方法
<!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(){
// 查找ul的所有子标签,并且指定为li子标签
// $("#odiv>#oul").children("li").css("background","yellow");
// 查找ul下面所有的span标签
// $("#odiv>#oul").find("span").css("background","orange");
// 查找b标签的父元素标签
$("b").parent().css("background","aqua");
// 查找第三个li标签前面所有的兄弟标签
// $("#odiv>#oul>li").eq(2).prevAll().css("background","red");
// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
// $("#odiv>#oul>li").eq(2).nextAll().css("background","green");
// 查找第三个li标签所有的兄弟标签
$("#odiv>#oul>li").eq(2).siblings().css("background","blue");
})
</script>
</head>
<body>
<div id="odiv">
<ul id="oul">
<li>abc1</li>
<li>abc2<span>qqq</span></li>
<li>abc3</li>
<ol>
<li>123</li>
<li>456<span><b>666</b>qqq</span></li>
<li>789</li>
</ol>
<li>abc4</li>
<li>abc5<b>666</b></li>
<li><span>qqq</span>abc6</li>
</ul>
</div>
</body>
</html>
二、文档处理
（1）增
①内部插入
1、append()：将内容添加到指定的元素后面
2、appendTo()：和append()颠倒
3、prepend()：将内容添加到指定元素前面
4、prependTo():和prepend()颠倒
②外部插入
1、after()：在匹配元素之后插入内容
2、before()：在匹配元素之前插入内容
案例3：演示文档处理-增加
//2.1 增
//--内部插入(前面和后面)
// 插入到最后面(给ul中最后一个li中插入一个a标签)
// $("#oDiv>li").last().css("background","pink");
$("#oDiv>li").last().append("<a href='#'>4399游戏</a>");
//appendTo
$("<a href='#'>4399游戏</a>").appendTo($("#oDiv").children().last());
// 插入到最前面(给ul中第一个li中插入一个a标签)
$("#oDiv>li").first().prepend("<a href='#'>4399游戏</a>");
$("<a href='#'>4399游戏</a>").prependTo($("#oDiv").children().eq(2));
//--外部插入(之前和之后)
// 在属性title为b的li前面插入一个a标签
//before
// $("#oDiv").children().filter("[title = b]").css("background", "pink");
// $("#oDiv").children().filter("[title = b]").before("<a href="# ">哈哈</a>");
$("#oDiv").children().filter("[title = b]").css("background", "yellow").before("<a href="# ">哈哈</a>");
// 在属性title为b的li后面插入一个a标签
$("#oDiv").children().filter("[title = b]").css("background", "yellow").after("<a href="# ">哈哈</a>");
（2）删
1、empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
2、remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）
案例4：演示文档处理-删除
//2.2 删
//清空ul中所有li的内容
$("#oDiv").children("li").css("background","yellow").empty();
//移除ul中所有的li
$("#oDiv").children("li").css("background","yellow").remove();
});
</script>
</head>
<body>
<h3>jQuery文档处理(等价于)</h3>
<hr />
<p>append();</p>
<p>appendTo();</p>
</div>
<ul id="oDiv">
<li>item1<span>12</span></li>
<li title="b">item2<span>12</span></li>
<ul>
<li><span>22</span>33</li>
</ul>
<li><span>12</span>item3</li>
<li><span>12</span>item4</li>
</ul>
<!-- <button id="oBtn1">插入到最后面</button> -->
</body>
</html>
（3）改
1、replaceWith()：将所有匹配的元素替换成指定的内容
案例5：演示文档处理-修改
//2.3 改
//把li下面所有的span标签替换为<a>标签
$("#oDiv").find('span').css("background","yellow").replaceWith("<a href='#'>超链接</a>");
//清空ul中所有li的内容
$("#oDiv").children("li").css("background","yellow").empty();
//移除ul中所有的li
$("#oDiv").children("li").css("background","yellow").remove();
});
</script>
</head>
<body>
<h3>jQuery文档处理(等价于)</h3>
<hr />
<p>append();</p>
<p>appendTo();</p>
</div>
<ul id="oDiv">
<li>item1<span>12</span></li>
<li title="b">item2<span>12</span></li>
<ul>
<li><span>22</span>33</li>
</ul>
<li><span>12</span>item3</li>
<li><span>12</span>item4</li>
</ul>
<!-- <button id="oBtn1">插入到最后面</button> -->
</body>
</html>
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
