在jquery中通过父级查找进行定位的代码详解

最新推荐文章于 2021-09-13 21:15:18 发布

徊忆羽菲

最新推荐文章于 2021-09-13 21:15:18 发布

阅读量574

点赞数

分类专栏： Html Jquery Javascript

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/119825191

版权

Html 同时被 3 个专栏收录

248 篇文章 7 订阅

订阅专栏

Javascript

231 篇文章 5 订阅

订阅专栏

Jquery

188 篇文章 1 订阅

订阅专栏

在jquery中通过父级查找进行定位的代码详解

parent()

parent() 方法返回被选元素的直接父元素。

DOM 树：该方法只沿着 DOM 树向上遍历单一层级。如需向上遍历直至文档根元素的所有路径（返回祖父节点或其他祖先），请使用 parents() 或 parentsUntil() 方法。

提示：如需沿着 DOM 树向下遍历单一层级，或向下遍历直至最后一个后代的所有路径（返回子节点或其他后代），请使用 children() 或 find() 方法。

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如

$("span").parent()或者$("span").parent(".class")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
.ancestors *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父节点)
	<div style="width:500px;">div (曾祖父节点)
		<ul>ul (祖父节点)  
			<li>li (直接父节点)
				<span>span</span>
			</li>
		</ul>   
	</div>
</body>

</html>

在这里插入图片描述

parents()

parents() 方法返回被选元素的所有祖先元素。

祖先是父、祖父、曾祖父，依此类推。

DOM 树：该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径（）。

注意：如果 filter 参数为空，该方法将从直接父元素直至和的所有路径中选取元素集合中的所有祖先。因此传递一个缩小搜索结果范围的选择器表达式是非常有用的。

该方法与 closest() 都是向上遍历 DOM 树，不同点是：

parents()

从父元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先
返回包含零个、一个或多个元素的 jQuery 对象

closest()

从当前元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个祖先
返回包含零个或一个元素的 jQuery 对象

其他相关方法：

parent() - 返回被选元素的直接父元素
parentsUntil() - 返回两个给定参数之间的所有祖先元素

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
.ancestors *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父节点)
	<div style="width:500px;">div (曾祖父节点)
		<ul>ul (祖父节点)  
			<li>li (直接父节点)
				<span>span</span>
			</li>
		</ul>   
	</div>
</body>

<!-- body元素之前的外部红色的边框,是html元素(也是一个祖先节点)。-->
</html>

在这里插入图片描述
结合find使用

查找当前的父级tr，再从tr内部查找class=question_answer_id_input的val属性值

 $(that).parents("tr").find(".question_answer_id_input").val();

children()

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

children() 方法返回被选元素的所有直接子元素。

DOM 树：该方法只沿着 DOM 树向下遍历单一层级。如需向下遍历多个层级（返回子孙节点或其他后代），请使用 find() 方法。

提示：如需沿着 DOM 树向上遍历单一层级，或向上遍历直至文档根元素的所有路径（返回父节点或其他祖先），请使用 parent() 或 parents() 方法。

注意：该方法不会返回文本节点。如需返回包含文本节点的所有子节点，请使用 contents() 方法。

jQuery对象返回，children()则只会返回节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
.descendants *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("ul").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="descendants">body (曾祖先节点)
	
<div style="width:500px;">div (祖先节点)
	<ul>ul (直接父节点)  
		<li>li (子节点)
			<span>span (孙节点)</span>
		</li>
	</ul>   
</div>
	
</body>
</html>

在这里插入图片描述

contents()

contents() 方法返回所有直接子元素，包括被选元素的文本和注释节点。

文本节点是由元素显示的实际文本。

该方法与 children() 方法类似，不同的是它返回的是文本和注释节点。如果在相同的域中，contents() 方法也能访问 iframe 的 HTML。

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").contents().filter("em").wrap("<b/>");
  });
});
</script>
</head>
<body>

<div><em>Hello world! What a beautiful day!</em></div>
<p>在这个实例中,通过点击按钮,我们查找到所有div元素内得文本节点，并且使用b元素包裹它们。</p>
<button>查找所有文本节点并且包裹它们</button><br>

</body>
</html>

在这里插入图片描述

prev()

prev() 方法返回被选元素的前一个同级元素。

同级元素是共享相同父元素的元素。

注意：该方法只返回一个元素。

DOM 树：该方法沿着 DOM 元素的前一个同级元素向后遍历。

相关方法：

prevAll() - 返回被选元素之前的所有同级元素
prevUntil() - 返回两个给定参数之间的每个元素之前的所有同级元素

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
.siblings *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("li.start").prev().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
	<ul>ul (父节点)  
		<li>li (兄弟节点)</li>
		<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
		<li class="start">li (类名为"start"的li节点)</li>
		<li>li (兄弟节点)</li>
		<li>li (兄弟节点)</li>
	</ul>   
</div>

</body>
</html>

在这里插入图片描述

prevAll()

prevAll() 方法返回被选元素之前的所有同级元素。

同级元素是共享相同父元素的元素。

DOM 树：该方法沿着 DOM 元素的同级元素向后遍历。

相关方法：

prev() - 返回被选元素的前一个同级元素
prevUntil() - 返回两个给定参数之间的每个元素之前的所有同级元素

jQuery.prevAll()，返回所有之前的兄弟节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
.siblings *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("li.start").prevAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
	<ul>ul (parent)  
		<li>li (类名为"start"的li的上一个兄弟节点)</li>
		<li>li (类名为"start"的li的上一个兄弟节点)</li>
		<li>li (类名为"start"的li的上一个兄弟节点)</li>
		<li class="start">li (类名为"start"的li节点)</li>
		<li>li (兄弟节点)</li>
		<li>li (兄弟节点)</li>
	</ul>   
</div>
<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>

</body>
</html>

在这里插入图片描述

next()

next() 方法返回被选元素的后一个同级元素。

同级元素是共享相同父元素的元素。

注意：该方法只返回一个元素。

DOM 树：该方法沿着 DOM 元素的后一个同级元素向前遍历。

相关方法：

nextAll() - 返回被选元素之后的所有同级元素
nextUntil() - 返回两个给定参数之间的每个元素之后的所有同级元素

jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
.siblings *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("li.start").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
	<ul>ul (父节点)  
		<li>li (兄弟节点)</li>
		<li>li (兄弟节点)</li>
		<li class="start">li (类名为"start"的兄弟节点)</li>
		<li>li (类名为"start"的li节点的下一个的兄弟节点)</li>
		<li>li (兄弟节点)</li>
	</ul>   
</div>

</body>
</html>

在这里插入图片描述

nextAll()

nextAll() 方法返回被选元素之后的所有同级元素。

同级元素是共享相同父元素的元素。

DOM 树：该方法沿着 DOM 元素的同级元素向前遍历。

相关方法：

next() - 返回被选元素的后一个同级元素
nextUntil() - 返回两个给定参数之间的每个元素之后的所有同级元素

jQuery.nextAll()，返回所有之后的兄弟节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
.siblings *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("li.start").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
	<ul>ul (父节点)  
		<li>li (兄弟节点)</li>
		<li>li (兄弟节点)</li>
		<li class="start">li (类名为“star”的兄弟节点)</li>
		<li>li (类名为“star”的li节点的下一个兄弟节点)</li>
		<li>li (类名为“star”的li节点的下一个兄弟节点)</li>
		<li>li (类名为“star”的li节点的下一个兄弟节点)</li>
	</ul>   
</div>
<p>在这个例子中,我们将返回类名为“star”的li节点的所有下一个兄弟节点。</p>

</body>
</html>

在这里插入图片描述

siblings()

siblings() 方法返回被选元素的所有同级元素。

同级元素是共享相同父元素的元素。

DOM 树：该方法沿着 DOM 元素的同级元素向前和向后遍历。

提示：请使用 prev() 或 next() 方法来缩小仅仅搜索前一个同级元素或后一个同级元素的范围。

返回兄弟姐妹节点，不分前后

jQuery.siblings(),

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
.siblings *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("li.start").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
	<ul>ul (父节点)  
		<li>li (类名为"star"的上一个兄弟节点)</li>
		<li>li (类名为"star"的上一个兄弟节点)</li>
		<li class="start">li (兄弟节点)</li>
		<li>li (类名为"star"的下一个兄弟节点)</li>
		<li>li (类名为"star"的下一个兄弟节点)</li>
	</ul>   
</div>
<p>在这个例子中,我们选择类名称为“star”的li元素的所有兄弟元素。</p>

</body>
</html>

在这里插入图片描述

find()

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如

$("p"),find("span");//是从元素开始找,等同于$("p span")

find() 方法返回被选元素的后代元素。

后代是子、孙、曾孙，依此类推。

DOM 树：该方法沿着 DOM 元素的后代向下遍历，直至最后一个后代的所有路径（）。如只需向下遍历 DOM 树中的单一层级（返回直接子元素），请使用 children() 方法。

注意：filter 参数在 find() 方法中是必需的，这与其他树遍历方法不同。

提示：如需返回所有的后代元素，请使用 “*” 选择器。

徊忆羽菲

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
在jquery中通过父级查找进行定位的代码详解

在jquery中通过父级查找进行定位的代码详解parent()parents()children()contents()prev()prevAll()next()nextAll()siblings()find()parent()parent() 方法返回被选元素的直接父元素。DOM 树：该方法只沿着 DOM 树向上遍历单一层级。如需向上遍历直至文档根元素的所有路径（返回祖父节点或其他祖先），请使用 parents() 或 parentsUntil() 方法。提示：如需沿着 DOM 树向下遍历单一层级
复制链接

扫一扫