这节课是JQuery的第三节课，主要讲JQuery筛选和文档处理，还有三节课就要结束JQuery的课程啦。还是一样有问题在下方评论，或者私信小编噢，看到了会给大家解答的。
一.过滤
1.first() 匹配第一个元素
// first() 匹配第一个元素 两种写法
console.log($("li").first());
console.log($("li:first"));2.last() 获取最后一个元素
// last() 获取最后一个元素
// 两种写法
console.log($("li").last());
console.log($("li:last"));
3. eq获取第几个元素
// eq获取第几个元素
console.log($("li").eq(2));//$对象
console.log($("li").get(0));//js对象4.filter() 拿到指定的的元素
// 拿到指定的的元素 filter
// 拿到li标签中 class名为aa
console.log($("li").filter(".aa"));5. has() 筛选出包含特定特点的元素集合
// 只要p标签的父元素li
console.log($("li").has("p"));
console.log($("li").has(".bb"));6. not（）: 筛选不包含该特点的元素
// not筛选不包含该特点的元素
console.log($("li").not(".aa"));二.查找
1.children()子标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li class="aa">嘻嘻</li>
<li class="aa">嘻嘻</li>
<li>嘻嘻</li>
<li class="cc">嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li><p class="bb">嘻嘻</p></li>
<li>嘻嘻</li>
</ul>
<script src="jquery-3.5.1.js"></script>
<script>
// 拿到ul的子标签
// children()子标签
console.log($("ul").children());
// 拿到ul中的class名为aa子元素
console.log($("ul").children(".aa"));
</script>
</body>
</html>2.find（） 后代标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li class="aa">嘻嘻</li>
<li class="aa">嘻嘻</li>
<li>嘻嘻</li>
<li class="cc">嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li><p class="bb">嘻嘻</p></li>
<li>嘻嘻</li>
</ul>
<script src="jquery-3.5.1.js"></script>
<script>
// 拿出ul中的p标签(拿到后代 孙子)
// find 后代标签中
console.log($("ul").find("p"));
</script>
</body>
</html>3.parent （）：拿父元素
parents（）：拿到该标签的所有父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li class="aa">嘻嘻</li>
<li class="aa">嘻嘻</li>
<li>嘻嘻</li>
<li class="cc">嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li><p class="bb">嘻嘻</p></li>
<li>嘻嘻</li>
</ul>
<script src="jquery-3.5.1.js"></script>
<script>
// 拿父元素
// parent
console.log($(".aa").parent());
// parents：拿到该标签的所有父元素
console.log($("p").parents("ul"));
</script>
</body>
</html>
4.prevAll() 拿到该元素前面所有的兄弟节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li class="aa">嘻嘻</li>
<li class="aa">嘻嘻</li>
<li>嘻嘻</li>
<li class="cc">嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li><p class="bb">嘻嘻</p></li>
<li>嘻嘻</li>
</ul>
<script src="jquery-3.5.1.js"></script>
<script>
//prevAll() 拿到该元素前面所有的兄弟节点
console.log($(".cc").prevAll());
</script>
</body>
</html>
5.nextAll() 拿到该元素后面所有的兄弟节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li class="aa">嘻嘻</li>
<li class="aa">嘻嘻</li>
<li>嘻嘻</li>
<li class="cc">嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li><p class="bb">嘻嘻</p></li>
<li>嘻嘻</li>
</ul>
<script src="jquery-3.5.1.js"></script>
<script>
// nextAll() 拿到该元素后面所有的兄弟节点
console.log($(".cc").nextAll());
</script>
</body>
</html>
6.siblings() 拿到该元素前面和后面的所有兄弟节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li class="aa">嘻嘻</li>
<li class="aa">嘻嘻</li>
<li>嘻嘻</li>
<li class="cc">嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li>嘻嘻</li>
<li><p class="bb">嘻嘻</p></li>
<li>嘻嘻</li>
</ul>
<script src="jquery-3.5.1.js"></script>
<script>
// siblings() 拿到该元素前面和后面的所有兄弟节点
console.log($(".cc").siblings());
</script>
</body>
</html>
三.增加
1.append : 将内容添加到指定元素的后面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
p{
border :10px solid aliceblue;
}
</style>
</head>
<body>
<p></p>
<script>
// 在p标签后面追加
// append : 将内容添加到指定元素的后面
$("p").append("哈哈哈");
$("p").append("<b>你好啊</b>")
</script>
</body>
</html>2.appendTo: appendTo和append颠倒的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<span>I would like to say: </span>
<div></div><div></div>
<script>
// appendTo和append颠倒的
// appendTo:把span标签追加进div标签中
$("span").appendTo("div");
// 创建标签
let i=document.createElement("i");
// 给i标签设置内容
i.textContent="xixi";
// 将i标签加入吧p标签中
$("p").append(i);
// jquery
// 这一步就是创建一个标签
let j=$("<u>");
// 给j标签设置内容 jquery给标签设置内容用text
j.text("略略略");
// 追加到p标签里
$("p").append(j);
</script>
</body>
</html>
3. prepend:将内容添加到指定的元素前面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
p{
border :10px solid aliceblue;
}
</style>
</head>
<body>
<p></p>
<script>
// jquery
// 这一步就是创建一个标签
let j=$("<u>");
// 给j标签设置内容 jquery给标签设置内容用text
j.text("略略略");
// 追加到p标签里
$("p").append(j);
// prepend:将内容添加到指定的元素前面
// 把j添加到p标签前面
$("p").prepend(j);
</script>
</body>
</html>
4. prependTo:与prepend颠倒
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<p></p>
<span>I would like to say: </span>
<div></div><div></div>
<script>
// prependTo:与prepend颠倒
// 把span标签加在div标签前面
$("span").prependTo("div")
</script>
</body>
</html>5.cloneNode():复制元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<p></p>
<script>
// jquery
// 这一步就是创建一个标签
let j=$("<u>");
// 给j标签设置内容 jquery给标签设置内容用text
j.text("略略略");
// 追加到p标签里
$("p").append(j);
//复制元素cloneNode
// 复制j 把j加入p标签前面
$("p").prepend(j.get(0).cloneNode(true));
// 把JS转成$ 使用get
// 把$转成js $(里面放入js)
let u=document.getElementsByName("u")[0];
$("u").text("123");
</script>
</body>
</html>
6.before() :在匹配元素之前插入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
p{
border :10px solid aliceblue;
}
</style>
</head>
<body>
<p></p>
<script>
// jquery
// 这一步就是创建一个标签
let j=$("<u>");
// 给j标签设置内容 jquery给标签设置内容用text
j.text("略略略");
// 追加到p标签里
$("p").append(j);
// 将j放在p标签之前
$("p").before(j);
</script>
</body>
</html>
7.after(): 在匹配元素之后插入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
p{
border :10px solid aliceblue;
}
</style>
</head>
<body>
<p></p>
<script>
// jquery
// 这一步就是创建一个标签
let j=$("<u>");
// 给j标签设置内容 jquery给标签设置内容用text
j.text("略略略");
// 追加到p标签里
$("p").append(j);
// 在p标签之后插入
$("p").after("hhhh");
</script>
</body>
</html>
四.删除
1. empty()：删除匹配元素的子元素 (不包括匹配的元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
p{
border :10px solid aliceblue;
}
</style>
</head>
<body>
<p></p>
<script>
// empty()删除匹配元素的子元素 (不包括匹配的元素)
$("p").empty();
</script>
</body>
</html>
2.remove() ：删除匹配元素的子元素 (包含匹配元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<style>
p{
border :10px solid aliceblue;
}
</style>
</head>
<body>
<p></p>
<script>
// remove() 删除匹配元素的子元素 (包含匹配元素)
$("p").remove();
</script>
</body>
</html>
五.改
1.replaceWith() :将所有匹配元素替换成指定内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<p></p>
<script>
// replaceWith 将所有匹配元素替换成指定内容
console.log($("li").replaceWith("<u>哈哈哈哈</u>"));
</script>
</body>
</html>
六.题目演练
题目一: 点击删除按钮时，删除该行
大家先自己写一下，下方有代码参照
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<table border>
<tr>
<td>嘻嘻</td>
<td>哈哈</td>
<td>呵呵</td>
<td><button onclick="$(this).parents('tr').remove()">删除</button></td>
</tr>
<tr>
<td>嘻嘻</td>
<td>哈哈</td>
<td>呵呵</td>
<td><button onclick="$(this).parents('tr').remove()">删除</button></td>
</tr>
</table>
</body>
</html>
题目二:写一个菜单类似的，当你点击时展开，再点击关闭，点击另外的菜单时，原先点开的收起来
先自己写一下，下方代码提供给大家参考。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ol{
display: none;
}
.bb{
color: chartreuse;
}
.bb ol{
display: block;
}
</style>
</head>
<body>
<script src="jquery-3.5.1.js"></script>
<ul>
<li>
<p>电器</p>
<ol>
<li>冰箱</li>
<li>电视机</li>
<li>洗衣机</li>
<li>吹风机</li>
</ol>
</li>
<li>
<p>水果</p>
<ol>
<li>菠萝</li>
<li>西瓜</li>
<li>哈密瓜</li>
<li>草莓</li>
</ol>
</li>
<li>
<p>奶茶</p>
<ol>
<li>烧仙草</li>
<li>葡萄啵啵</li>
<li>草莓啵啵奶茶</li>
<li>金桔柠檬</li>
</ol>
</li>
</ul>
<script>
$("p").click(function(){
// 先拿到他的父类
let li=$(this).parents("li");
// 判断他是否有class
//移除其他(兄弟)菜单的激活样式
li.siblings().removeClass("bb")
// 判断是否有class属性 有的话移出class
if(li.hasClass("bb")){
return li.removeClass("bb")
}
li.addClass("bb");
})
</script>
</body>今天的学习到此结束，大家好好敲代码噢
945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
