如需查看上一节内容,请点击下方链接进行跳转。
jQuery之$工具方法&CSS1.是什么?$(function(){});如果使用上述语句报错了 $ is not deifned,就说明没有引入jQuery文件。2.jQuery文件结构其实时一个自执行函数(function(){ window.jQuery = window.$ = jQuery}());3.a.引入一个js文件,是会执行这个js文件中的代码的b.jQuery文件时一个自执行函数,执行这个jQuery文件中的代码,其实就是在执行这个自执行函数c.这个自执行文件就是windo...
目录
一、筛选
(1)过滤的方法
案例1:演示过滤所有的方法
二、查找
案例2:演示查找所有的方法
二、文档处理
(1)增
①内部插入
②外部插入
案例3:演示文档处理-增加
(2)删
案例4:演示文档处理-删除
(3)改
案例5:演示文档处理-修改
一、筛选
(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>