JQuery过滤和文档处理

最新推荐文章于 2024-05-14 19:02:10 发布

钟意

最新推荐文章于 2024-05-14 19:02:10 发布

阅读量988

点赞数 2

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/m0_61857264/article/details/123586515

版权

一.过滤

筛选

first() 获得匹配的第一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
		//拿到第一个元素
		// console.log($("li:first"))
		 // console.log($("li").first().text())	  
		</script>
	</body>
</html>

last()获得最后一个匹配的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
		 // 拿到最后一个元素
		 // console.log($("li").last())
		 // console.log($("li:last"))
		</script>
	</body>
</html>

eq(N)获得匹配的第N个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
		 // console.log($("li").eq(0))
			
		</script>
	</body>
</html>

filter()筛选出相匹配的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
			// 筛选出与指定表达式匹配的元素集合
			   // console.log($("li").filter(".a"));
		</script>
	</body>
</html>

has()筛选出包含特定特征的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
			   // 筛选出包含特定特征的元素集合
			  // console.log( $("li").has("p"))
		</script>
	</body>
</html>

not()筛选出没有特定特征的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
			  // 筛选出不包含特定特征的元素集合
			  // console.log($("li").not("p"))
			  
			  
			  
		</script>
	</body>
</html>

二.查询

children()拿到所有匹配元素集合里的所有子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
			  //拿到li的子元素
			  // console.log($("li").children())
		</script>
	</body>
</html>

find()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
		//拿到第一个元素
			  //拿到后代（孙子）(p)标签中的元素
			  // console.log($("ul").find("p")) 
			  
			  
		</script>
	</body>
</html>

parent()查找所有匹配元素的一个父元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
			  // 拿到p标签的父元素
			  // console.log($("p").parent())
		</script>
	</body>
</html>

prveAll()拿到前面所有的兄弟标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
			  // 拿到前面所有的兄弟标签
			  // console.log($(".a").prevAll())
			 
			  
		</script>
	</body>
</html>

nextAll()拿到后面所有的兄弟标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
			  // 拿到后面所有的兄弟标签
			  // console.log($(".a").nextAll())
			 
			  
			  
		</script>
	</body>
</html>

sblings()拿到前后所有的兄弟标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
			
		</script>
	</head>
	<body>
		<ul>
	       <li>uuuu</li>
		   <li>uuuu</li>
		   <li>uuuu</li>
	       <li class="a">uuuu</li>
		   <li><p>uuuu</p></li>
		   <li><p>uuuu</p></li>
		   <li>uuuu</li>
		   <li>uuuu</li>
		</ul>
		<script type="text/javascript">
			  // 拿到前后所有兄弟标签
			  // console.log($(".a").siblings())
			  
			  
		</script>
	</body>
</html>

三.文档处理

内部插入

append()向指定元素后面追加内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 100%px;
				height: 50px;
				background: red;
				
				、
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		<p>hahahhahahaha</p>
	<div id="a">
		aaaaa
	</div>
		<script type="text/javascript">
		// 在p标签后面追加文本
			// $("p").append("ooooo")
			
		
		</script>
	</body>
</html>

prepend()向指定元素前面追加文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 100%px;
				height: 50px;
				background: red;
				
				、
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		<p>hahahhahahaha</p>
	<div id="a">
		aaaaa
	</div>
		<script type="text/javascript">
			// 在p标签前面追加文本
			// $("p").prepend("oooooo")
		</script>
	</body>
</html>

外部插入

before()在匹配元素之前添加内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 100%px;
				height: 50px;
				background: red;
				
				、
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		<p>hahahhahahaha</p>
	<div id="a">
		aaaaa
	</div>
		<script type="text/javascript">
			// $("p").after("ooooo")
			// 在匹配元素之前插入内容
		</script>
	</body>
</html>

after()在匹配元素之后添加文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 100%px;
				height: 50px;
				background: red;
				
				、
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		<p>hahahhahahaha</p>
	<div id="a">
		aaaaa
	</div>
		<script type="text/javascript">
	
			// 在匹配元素之后插入内容
			// $("p").after("ooooo")
		</script>
	</body>
</html>

删除

empty()删除所有子节点（不包括自己）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 100%px;
				height: 50px;
				background: red;
				
				、
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		<p>hahahhahahaha</p>
	<div id="a">
		aaaaa
	</div>
		<script type="text/javascript">
	
			 // $("p").empty()
			
		</script>
	</body>
</html>

remove()删除所有子节点包括自己

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 100%px;
				height: 50px;
				background: red;
				
				、
			}
		</style>
		<script src="js/jquery-3.5.1.js">
		</script>
	</head>
	<body>
		<p>hahahhahahaha</p>
	<div id="a">
		aaaaa
	</div>
		<script type="text/javascript">
			 // $("p").remove()
			
		</script>
	</body>
</html>

跟我一起学好JQuery 持续更新中

钟意

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery过滤和文档处理

目录一.过滤筛选二.查询三.文档处理内部插入外部插入删除一.过滤筛选first() 获得匹配的第一个元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.js"> </script> </.
复制链接

扫一扫