jquery学习笔记2-2：层次选择

最新推荐文章于 2024-07-16 21:46:04 发布

ve7ev

最新推荐文章于 2024-07-16 21:46:04 发布

阅读量887

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ve7ev/article/details/8640271

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

 <!DOCTYPE html>
 
<html>
  <head>
    <title>jquery层次选择</title>
    <!-- 层次选择器，通过DOM元素间的层次关系获取元素 主要的层次关系包括，后代，父子，相邻，兄弟关系-->
	<!-- 功能描述，在页面中设置四个DIV,在第二个DIV中增加一个span,然后其中再嵌一个span,全部元素初始值为隐藏，使用jquery分层选择器控制元素的显示 -->
	<script language="javascript" type="text/javascript" src="../javaScriptSrc/jquery-1.9.1.min.js"></script>
	<style type="text/css">
		body{front-size:12px;text-align:center}
		div,span{float:left;border:solid 2px #ccc;
				 margin:8px;display:none}
		.clsFraA{width:65px;height:65px}
		.clsFraP{width:45px;height:45px;background-color:#eee}
		.clsFraC{width:25px;height:25px;background-color:#ddd}
	</style>
	<script type="text/javascript">
	/*	$(function(){//匹配后代元素
			$("#divMid").css("display","block");
			$("div span").css("display","block");
		})*/
	/*	$(function(){//匹配子元素
			$("#divMid").css("display","block");
			$("div>span").css("display","block");
		})*/
	/*	$(function(){//匹配后面元素
			$("#divMid+div").css("display","block");
			$("#divMid").next().css("display","block");
		})*/
	/*	$(function(){//匹配所有后面元素
			$("#divMid~div").css("display","block");
			$("#divMid").netxAll().css("display","block");
		})*/
		$(function(){//匹配所有相邻元素
			$("#divMid").siblings("div")
			.css("display","block")
		})

	
	</script>
  </head>
  
  <body>
   		<div class="clsFraA">left</div>
   		<div class="clsFraA" id="divMid">
   			<span class="clsFraP" id="Span1">
   				<span class="clsFraC" id="Span2"></span>
   			</span>
   		</div>
   		<div class="clsFraA">Right_1</div>
   		<div class="clsFraA">Right_2</div>
  </body>
</html>