JQuery遍历后代元素

最新推荐文章于 2024-08-12 06:15:11 发布

原创最新推荐文章于 2024-08-12 06:15:11 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用JQuery中的children()和find()方法来遍历DOM树中的后代元素，通过具体示例展示了如何选择并修改指定的子元素或所有后代元素的样式。

JQuery遍历后代元素

向下遍历dom树

1.children()

2.find()

实例：

<script>
		$(function(){
			$(function(){
				$(".btn1").click(function(){
					$("div").children("p.p1").css({"color":"red","border":"2px solid red"});
				});
			});
			$(".btn2").click(function(){
				/*$("p").css({"color":"red","border":"2px solid red"});*/
				$("div").children("p").css({"color":"red","border":"2px solid red"});
			});
			$(".btn3").click(function(){
				$("div").find("span").css({"color":"red","border":"2px solid red"});
			});
			$(".btn4").click(function(){
				$("div").find("*").css({"color":"red","border":"2px solid red"});
			});
		});
	</script>
<style type="text/css">
	.descendants *{
		display: block;
		border: 1px solid green;
		color: green;
		margin:5px;
		padding:10px;
	}
</style>
<body>
	<div class="descendants" style="width: 500px;">div (当前元素)
		<p class="p1">p (儿子元素)
			<span>span (孙子元素)</span>
		</p>
		<p class="p2">p (儿子元素)
			<span>span (孙子元素)</span>
		</p>
		<button class="btn1">改变第一个儿子P的样式</button><br>
		<button class="btn2">改变所有儿子P的样式</button><br>
		<button class="btn3">使用find改变span的样式</button>
		<button class="btn4">使用find改变所有后代元素的样式</button>
	</div>
</body>