jQuery.03.过滤与增删改查

Champion_me

已于 2022-03-18 22:08:56 修改

阅读量767

点赞数 6

文章标签： jquery javascript css html

于 2022-03-18 22:04:14 首次发布

本文链接：https://blog.csdn.net/Champion_me/article/details/123585446

版权

一、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>