6. jQuery层次选择器

最新推荐文章于 2023-06-19 11:20:18 发布

大都督老师

最新推荐文章于 2023-06-19 11:20:18 发布

阅读量166

点赞数

分类专栏： jQuery 文章标签： jQuery

越努力越幸运。

本文链接：https://blog.csdn.net/qq_37335220/article/details/84592922

版权

jQuery 专栏收录该内容

103 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>使用jQuery层次选择器</title>
     <style type="text/css">
           body{font-size:12px;text-align:center}
           div,span{float:left;border:solid 1px #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>
</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>

<script src="../jquery.min.js"></script>
<script type="text/javascript">
 	$(function(){
		//匹配所有相邻div元素
		$("#divMid").siblings("div").css("display", "block");
	})  
/* 	$(function(){
		//匹配所有后面元素
		//$("#divMid ~ div").css("display", "block");
		$("#divMid").nextAll("div").css("display", "block");
	})  */
/* 	$(function(){
		//匹配后面元素
		//$("#divMid + div").css("display", "block");
		$("#divMid").next().css("display", "block");
	})  */
/* 	$(function(){
		//匹配后代元素
		$("#divMid").css("display", "block");
		$("div span").css("display", "block");
	})  */
/* 	$(function(){
		//匹配子元素
		$("#divMid").css("display", "block");
		$("div>span").css("display", "block");
	}) */
</script>
</body>
</html>