3.2 JQ的层次选择器

最新推荐文章于 2024-06-08 19:06:47 发布

P_ning

最新推荐文章于 2024-06-08 19:06:47 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/P_ning/article/details/96839989

jQuery 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的页面元素背景色变化示例，通过不同的按钮点击事件触发各种选择器来定位并改变特定元素的背景颜色，包括子代、后代及相邻兄弟选择器。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
					height: 100px;
					width: 100px;
					border: 1px solid red;
					margin: 10px;
					display: inline-block;
				}
			#c{
					height: 20px;
					width: 20px;
					margin: 10px;				
					display: inline-block;
				}	
		</style>
	</head>
	<body>
		<script type="text/javascript" src="../../js库/jquery-2.1.0.js"></script>
		<script>
//恢复初始颜色
		$(function(){
			$("#btn").click(function(){
				$("*").css("background-color","while");
			});
		});
//子代选择器	
		$(function(){
			$("#btn1").click(function(){
				$("div>div").css("background-color","yellow");
			});
		});//找出div的div子标签	
//后代选择器
		$(function(){
			$("#btn2").click(function(){
				$(".c1 .c2").css("background-color","yellow");
			});
		});	//找出类为c1的标签的子类为c2的标签
//相邻兄弟选择器
		$(function(){
			$("#btn3").click(function(){
				$("#c+#c").css("background-color","yellow");
			});
		});//找到id为c且前一个标签id为c的标签
//更多选择器可看css的选择器篇,用法基本相同
		</script>
		
		<input type="button" value="恢复初始颜色" id="btn"/>
		<input type="button" value="子元素选择器" id="btn1"/>
		<input type="button" value="子类选择器" id="btn2"/>
		<input type="button" value="相邻兄弟选择器" id="btn3"/>

		<br />
		<div>
			<div id="c"></div>
		</div>
		
		<div class="c1">
			<div class="c2" id="c"></div>
		</div>
		
		<div>
			<div id="c"></div>
			<div id="c"></div>
			<div id="c"></div>
		</div>
	</body>
</html>