JQuery遍历（一）

根据相对于其他元素的关系来查找自己想要的元素，从某个元素开始到找到自己想要的元素，这种移动称之为遍历。

遍历方法中最大的种类是树遍历（tree-traversal）。

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

该方法只会向上一级对 DOM 树进行遍历。

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

可以使用可选参数来过滤对祖先元素的搜索。

例子：返回所有<span>元素的所有祖先，并且它是<ul>元素：

$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil()返回介于两个给定元素之间的所有祖先元素。

向下遍历 DOM 树，以查找元素的后代：

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

例子：返回类名为 "1" 的所有 <p> 元素，并且它们是<div>的直接子元素：

$(document).ready(function(){
  $("div").children("p.1");
});

find()返回被选元素的后代元素，一路向下直到最后一个后代。

<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				
				//parent() 方法返回被选元素的直接父元素
				//只会向上一级对 DOM 树进行遍历。
				
				$("span").parent().css({
					"color": "red",
					//"border": "2px solid red"
				});
				//parents() 方法返回被选元素的所有祖先元素
				//它一路向上直到文档的根元素 (<html>)。
				
				$("li").parents().css({
					"color": "green",
					//"border": "2px solid green"
				})
				//返回被选元素的所有祖先元素，并且是ul元素
				
				$("li").parents("ul").css({
					//"color": "orange",
					"border": "2px solid orange"
				})				
				
				//parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
				
				$("li").parentsUntil("div").css({
					//"color": "blue",
					"border": "2px solid blue"
				})
				
				
				//children()返回被选元素的所有直接子元素。
				//只会向下一级对 DOM 树进行遍历。
				
				$("p").children().css({
					//"color": "black",
					"border": "2px solid black"
				})
				
				//find()返回被选元素的所有后代元素
				//一路向下到最后一个后代
				$("div").find("*").css({
					"color": "orange",
				});
				
				//返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
				 $("div").children("p.1").css({
					 "color": "green",
				 });				
				
			});
		</script>
	</head>
	<body>
		​
		<div class="ancestors">
			<div style="width:500px;">div (曾祖父元素)
				<ul>ul (祖父元素)
					<li>li (父元素)
						<span>span</span>
					</li>
				</ul>
			</div>
			​
			<div style="width:500px;">div (祖父元素)
				<p class="1">p (父元素)
					<span>span</span>
				</p>
			</div>
		</div>
		​
	</body>
</html>
posted @ 2020-12-22 17:34  小安不菜  阅读(108)  评论(0)    收藏  举报