一、jQuery过滤与查找
1.过滤
1.first():获取匹配的第一个元素
2.last():获取匹配的最后一个元素
3.eq(N):获取匹配的第N或—N个元素
4.filter(selector):筛选出与指定表达式匹配的元素集合
5.has(selector):筛选出包含特定特点的元素的集合
6.not(selector):筛选出不包含特定特点的元素的集合
2.查找
1.children():子标签中找
2.find():后代标签中找
3.parent():父标签
4.prevAll():前面所有的兄弟标签
5.nextAll():前面所有的兄弟标签
6.siblings():前后所有的兄弟标签
7.parents():所有的父标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li class="aa">哈哈哈</li>
<li class="aa">哈哈哈</li>
<li>哈哈哈</li>
<li><p class="bb">嘻嘻嘻</p></li>
<li>哈哈哈</li>
<li>哈哈哈</li>
<li>哈哈哈</li>
</ul>
<script src="js/jquery-3.5.1.js"></script>
<script>
/**
//1.first():获取匹配的第一个元素
//2.last():获取匹配的最后一个元素
console.log($("li").first())
console.log($("li:first"))
console.log($("li").last())
//gt 大于
//lt 小于
//3.eq(N):获取匹配的第N或—N个元素
console.log($("li").eq(0));//jQuery对象(拿到第0个li)
console.log($("li").get(0));//js对象
//4.filter(selector):筛选出与指定表达式匹配的元素集合
//只要aa的li
console.log($("li.aa"))//第一种
console.log($("li").filter(".aa"))//第二种
//5.has(selector):筛选出包含特定特点的元素的集合
//只要p标签的父元素li
//has判断子元素
$("li").has("p")//判断里面是否有p标签
console.log($("li").has(".bb"))//判断里面是否有class为bb的
//6.not(selector):筛选出不包含特定特点的元素的集合
//拿到所有对的li,并且li里不包含class为aa的
console.log($("li").not(".aa"))
**/
//1.children():子标签中找
//2.find():后代标签中找
//拿出所有的li,用父子关系来拿
console.log($("ul").children())
//拿出ul里面的aa子元素
console.log($("ul").children(".aa"))
//拿出ul里面的p标签
console.log($("ul").find("p"))
console.log()
//3.parent():父标签
//拿父元素
console.log($(".aa").parent())
//7.parents():所有的父标签
console.log($(".aa").parents("body"))
</script>
</body>
</html>
二、jQuery增、删、改
1.增
增加一、内部插入
1.append():将内容添加到指定的元素后面
2.appendTo():和append()颠倒
3.prepend():将内容添加到指定元素前面
4.prependTo():和prepend()颠倒
二、外部插入
1.after():在匹配元素之后插入内容
2.before():在元素之前插入内容
2.删
1.empty():删除匹配的元集合中所有的子节点(不包含匹配的元素)
2.remove():删除匹配的元素集合中所有的子节点(包含匹配的元素)
3.改
1.replaceWith():将所有匹配的元素替换成指定的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
border: 10px solid red;
}
div{
border: 10px solid blue;
}
</style>
</head>
<body>
<p></p>
<div></div>
<script src="js/jquery-3.5.1.js"></script>
<script >
//1.append():将内容添加到指定的元素后面
$("p").append("你好 世界")
$("p").append("<b>你好 世界</b>")
//jQuery
let j=$("<u>")//创建标签
j.text("O(∩_∩)O哈哈~")
$("p").append(j)
//2.appendTo():和append()颠倒
$("p").appendTo("div")//把p标签(包括内容)加入到div标签里面去
//3.prepend():将内容添加到指定元素前面
$("p").prepend(j)//后面
$("p").prepend(j.get(0).cloneNode(true))//前面
$("p").empty()//删除所有子节点
$("p").remove()//删除自己
</script>
</body>
</html>
三、jQuery表格案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="js/jquery-3.5.1.js"></script>
<table border="">
<tr>
<td>dfasfdsa</td>
<td>dfasfdsa</td>
<td>dfasfdsa</td>
<td>dfasfdsa</td>
<td><button onclick="$(this).parents('tr').remove()">删除</button></td>
</tr>
<tr>
<td>dfasfdsa</td>
<td>dfasfdsa</td>
<td>dfasfdsa</td>
<td>dfasfdsa</td>
<td><button onclick="$(this).parents('tr').remove()">删除</button></td>
</tr>
</table>
<script>
</script>
</body>
</html>
四、jQuery下拉菜单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
li{
list-style: none;/* 去除选项前面的点 */
}
p{
background: #0000FF;
}
ul{
padding: 0px;/* 调整内边距 */
}
ol{
display: none;/* 当前是不显示 */
}
.active{/* 激活的样式 */
background:#6eff6c ;
color: #FF0000;
}
.active ol{/* 激活的时候 他底下的od */
display: block;
}
</style>
<body>
<script src="js/jquery-3.5.1.js"></script>
<ul>
<li>
<p>纯纯的大乌鱼事件</p>
<ol>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
</ol>
</li>
<li>
<p>纯纯的大鲨鱼事件</p>
<ol>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
</ol>
</li>
<li>
<p>纯纯的大老虎事件</p>
<ol>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaa</li>
</ol>
</li>
</ul>
</body>
<script >
//给所有的菜单设置点击事件
$("p").click(function(){
//this是js对象
let li=$(this).parents("li")
//移除其他菜单的激活样式
li.siblings().removeClass("active")
if(li.hasClass("active")){
return li.removeClass("active")
}
li.addClass("active")
// //给菜单添加激活样式
// li.addClass("active")
})
</script>
</html>