020-jQuery遍历-后代-CFANZ编程社区

020-jQuery遍历-后代
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$("div").children().css({
					"color":"red",
					"border":"2px solid red"
					});
					$("div").children("p.1").css({
						"color":"red",
						"border":"2px solid blue"
					});
					$("div").find("span").css({
						"color":"red",
						"border":"2px solid yellow"
					});
					$("div").find("*").css({
						"color":"red",
						"border":"2px solid green"
					});
			});
		</script>
		<style>
			.descendants *{
				display: block;
				border: 2px solid #000000;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>
	<!--
	jQuery遍历-后代
		后代是子,孙,曾孙等等.
		通过jQuery,您能够向下遍历DOM树,以查找元素的后代
		向下遍历jQuery,您能够通过向下遍历DOM树,以查找元素的后代
	向下遍历DOM树
		下面是两个用于向下遍历DOM树的jQuery方法:
		- children()
		- find()
	jQuery children()方法
		children()方法返回被选元素的所有直接子元素
		该方法只会向下一级对DOM树进行遍历
		下面的例子返回每一个<div>元素的所有直接子元素:
		$("div").children().css({
			"color":"red",
			"border":"2px solid red"
			});
		您也可以使用可选参数来过滤对子元素的搜索.
		下面的例子返回类名为1的所有<P>元素,并且他们是<div>的直接子元素
		$("div").children("p.1").css({
			"color":"red",
			"border":"2px solid blue"
		});
	jQuery find()方法
		find()方法返回被选元素的后代元素,一路向下直到最后一个后代
		下面的例子返回属于<div>后代的所有<span>元素:
		实例:
		$("div").find("span").css({
			"color":"red",
			"border":"2px solid yellow"
		});
		下面例子返回<div>所有后代
		实例
		$("div").find("*").css({
			"color":"red",
			"border":"2px solid green"
		});
	-->
	<body>
		<div class="descendants" style="width:500px">
			div (当前元素)
			<p class="1">
				p (儿子元素)
				<span>
					span (孙子元素)
				</span>
			</p>
			<p>
				p (儿子元素)
				<span>
					span (孙子元素)
				</span>
			</p>
		</div>
	</body>
</html>
0 条评论