jq中利用元素关系查找标签

最新推荐文章于 2023-04-14 09:12:38 发布

钱端攻城狮

最新推荐文章于 2023-04-14 09:12:38 发布

阅读量271

点赞数

分类专栏： jQuery 文章标签：前端

本文链接：https://blog.csdn.net/m0_54932975/article/details/124022972

版权

jQuery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这篇博客介绍了JavaScript中DOM操作的相关知识，包括如何查找和遍历元素之间的父子、兄弟关系。通过实例展示了parent(), parents(), parentsUntil(), children(), find(), prev(), prevAll(), next(), nextAll(), siblings()等方法的使用，帮助开发者更好地理解和应用这些DOM操作技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>关系型查找标签</title>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">
					<div id="div4"></div>
					<div id="div5"></div>
					<div id="div6">
						<div id="div7"></div>
					</div>
				</div>
			</div>
		</div>
		
	</body>
</html>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*
	元素之间的关系:
	1.父子
	2.兄弟
	利用元素关系查找标签
	*/
	//1.*******************查找父元素
	console.log($("#div6").parent());
	//2.查找一个元素的所有直系祖先元素	
	console.log($("#div6").parents());
	//3.查找一个元素的所有直系祖先元素,但是可以设置查找到哪个层级
	console.log($("#div6").parentsUntil("#div1"));
	//4.**************************查找元素的所有子元素   
	console.log($("#div3").children());
	//5.************************查找元素的所有后代元素  *是css中通配符 代表任意标签
	//find("选择器") 查找后代中的某一个标签!!!
	console.log($("#div1").find("#div6"));
	//6.查找上一个兄弟元素
	console.log("div6的上一个兄弟", $("#div6").prev());
	//7.查找一个标签上面所有的兄弟标签
	console.log("div6上面所有兄弟", $("#div6").prevAll());
	//  prevUntil("选择器") 查找到此标签上面哪个兄弟标签就停止
	//8. 查找下一个兄弟标签
	console.log("div4的下一个兄弟", $("#div4").next());
	//nextAll 查找以下 所有的兄弟标签
	console.log("div4以下所有兄弟", $("#div4").nextAll());
	// nextUntil() 找到哪个兄弟标签就停止
	//9.******************最常用  最好用!!! 查找除了本标签外的其他所有兄弟标签
	console.log($("#div5").siblings());
</script>