jQuery03

「已注销」

于 2022-03-22 17:08:51 发布

阅读量1k

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/qq_64164870/article/details/123664802

版权

筛选

过滤

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

last()：获取匹配的最后一个元素eq(N)：获取匹配的第一个元素

eq(N)：获取匹配的第N或-N个元素

filter(selector)：筛选出与指定表达式匹配的元素组合

has(selector)：筛选出包含特定特点的元素组合

not(selector)：筛选出不包含特定特点的元素组合

查找

children()：子标签中找

find()：后代标签中找

parent()：父标签

prevAll()：前面所有的兄弟标签

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

siblings()：前后所有的兄弟标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
  <li>hhh</li>
  <li>hehehehe</li>
  <li>hehehehe</li>
  <li>hehehehe</li>
  <li class="aa">hehehehe</li>
  <li class="aa">hehehehe</li>
  <li>hehehehe</li>
  <li>hehehehe</li>
  <li><p class="bb">hehehehe</p></li>
  <li>hehehehe</li>
  <li>eee</li>
		</ul>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
		//获得匹配第一个元素
		console.log($("li:first"))
		//获得匹配最后一个元素
		console.log($("li:last"))
		
		//获得匹配的N或-N个元素
		console.log($("li").eq(6))//$对象
		console.log($("li").get(0))//js对象
		
		//只要aa的li
		$("li.aa")
		
		console.log($("li").filter(".aa"))
		
		//只要p标签的父元素li
		//has判断子元素
		$("li").has("p")
		console.log($("li").has(".bb"))
		//筛选出不包含特定特点元素
		$("li").not(".aa")
		
	//拿出所有的li
	console.log($("ul").children())
	
	//拿出ul里面的aa子元素
	console.log($("ul").children(".aa"))
	
	//拿出ul里面的p标签
	console.log($("ul").find("p"))
	
	//拿父元素
	console.log($(".aa").parents())
	
	//前面所有兄弟标签
	console.log($(".aa").prevAll())
	
	//后面所有兄弟标签
	console.log($(".aa").nextAll())
	
	//前后所有兄弟标签
	console.log($(".aa").siblings())
		   </script>

	</body>
</html>

文档处理

增

append()：将内容添加到指定的元素后面

appendTo()：和append()颠倒

prepend()：将内容添加到指定的元素前面

prependTo()：和prepend()颠倒

after()：在匹配元素之后插入内容

before()：在匹配元素之前插入内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		p{
			border: 10px solid red;
		}
		</style>
	</head>
	<body>
		<p></p>
		<script src="js/jquery-3.5.1.js"></script>
		<script>
		$("p").append("HELLO WORLD")
		$("P").append("<b> 你好 世界</b>")

		
		//创建标签
		let i=document.createElement("i")
		//给i标签设置内容
		i.textContent="哈哈哈"
		//将i标签加入到p标签中
		$("p").append(i)

		//jquery
		let j=$("<u>")
		j.text("hehehe")
		$("p").append(j)//后面
		
		$("p").prepend(j.get(0).cloneNode(true))//前面
		
		let u=document.getElementsByTagName("u")[0]
		$(u).text("123")
		
		$("p").after("<b>Hello</b>"); //后面插入
		
		$("p").before("<b>Hello</b>");//前面插入
		
		</script>
	</body>
</html>

删

empty()：删除匹配元素集合中所有子节点（不包含匹配的元素）

remove()：删除匹配元素集合中所有子节点（包含匹配的元素）

<!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>pggpgpgpgppgpgpgppgpgpg</td>
				<td>pggpgpgpgppgpgpgppgpgpg</td>
				<td>pggpgpgpgppgpgpgppgpgpg</td>
				<td>pggpgpgpgppgpgpgppgpgpg</td>
				<td>pggpgpgpgppgpgpgppgpgpg</td>
				<td><button onclick="$(this).parents('tr').empty()">删除</button></td>
			</tr>
			<tr>
				<td>pggpgpgpgppgpgpgppgpgpg</td>
				<td>pggpgpgpgppgpgpgppgpgpg</td>
				<td>pggpgpgpgppgpgpgppgpgpg</td>
				<td>pggpgpgpgppgpgpgppgpgpg</td>
				<td>pggpgpgpgppgpgpgppgpgpg</td>
				<td><button  onclick="$(this).parents('tr').remove()">删除</button></td>
			</tr>
			
			
			
			
		</table>
	</body>
</html>