通过关系（父元素及子元素）查找jQuery对象，学习笔记

最新推荐文章于 2024-05-20 11:07:36 发布

qianlingvip

最新推荐文章于 2024-05-20 11:07:36 发布

阅读量948

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhangqling/article/details/79943528

本文通过一个简单的HTML结构示例介绍了jQuery中几种常用的选择器方法，包括parents(), parentsUntil(), parent(), children() 和 contents()等，解释了它们的区别及用法，并展示了如何在实际开发中定位特定元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box">
		<div id="box1">
			<div class="infor" ><p id="infor">你好</p></div>
		</div>
	</div>
	<script src="../jquery/jquery-3.3.1.js"></script>
	<script>
		$(function(){
			var element=$("#infor").parents("div");//包括父元素的父元素，也即祖先元素。
			var element0=$("#infor").parentsUntil("#box");//查找到选定的祖先元素
			var element1=$("#infor").parent("div");//只包括父元素，不包括父元素的父元素
			var elem=$("#box").children();//不包括孙子元素，不返回节点文本
			var ele=$("#box").contents("div");//不包括孙子元素,返回节点文本
			var ele1=$("#infor").closest("#box");//从当前开始匹配，直到找到要查找的祖先元素为止，如果查找不到，则返回值为空的jQuery对象
			console.log(element);
			console.log(element0);
			console.log(element1);
			console.log(elem);
			console.log(ele);
			console.log(ele1);
		})
	</script>
</body>
</html>

运行结果如下图所示：