jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

最新推荐文章于 2024-01-27 23:04:39 发布

五彩世界

最新推荐文章于 2024-01-27 23:04:39 发布

阅读量8k

点赞数 2

分类专栏：前台

本文链接：https://blog.csdn.net/qq_36791569/article/details/81070991

版权

前台专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>层次选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei"
    	}
    	.divCls {
    		width:180px;
    		height:180px;
    		color: white;
    		border: solid 1px white;
    		margin-left: 10px;
    		float: left;
    	}
    	.subDivCls {
    		width:60px;
    		height:60px;
    		color:white;
    		border: solid 1px white;
    		font-size: 12px;
    		margin: 5px;
    		float: right;
    	}
    	.spanCls{
    		color:white;
    		border: solid 1px white;
    		margin: 5px;
    		float: left;
    		height: 50px;
    	}
    	div span{
    		border: solid 1px white;
    		font-size: 12px;
    		margin:5;
    	}
    	.cGreen{background-color: #4CA902}
    	.cPink{background-color: #ED4A9F}
    	.cBlue{background-color: #0092E7}
    	.cCyan{background-color: #01A6A2}
    	.cYellow{background-color: #DCA112}
    	.cRed{background-color: #B7103B}
    	.cPurple{background-color: #792F7C}
    	.cBlack{background-color: #110F10}
    	.hide{display: none;}
    </style>
    <script type="text/javascript">
    	/* 层级选择器：
				通过DOM元素之间的层次关系来获取特定的元素，
			例如后代元素，子元素，相邻元素和兄弟元素。
			1.后代元素选择器：
				选取这个div中所有的span(不论其中嵌了多少层)
				#div2 span、#div2 .span1、#div2 #span2  
			2.子元素选择器：
				选中当前div下的第一层元素。->元素集合
				#div2 > span、#div2 > .span1
			3.相邻元素：
				当前元素同层级的相邻的兄弟元素。->元素集合
				#div2 + 、#div2 + div
			4.兄弟元素：
				当前元素同层级的所有兄弟元素。->元素集合
				
    	*/
    	$(document).ready(function() {
			/* <input type="button" id="btn1" value="选取id为div2的所有span后代元素"> */
			// 后代选择器
			$("#btn1").click(function() {
				/*
				$("#div2 ")：单一个空格，表示取所有的子元素；
				如果要取特定标签的元素、特定id的元素或特定class的元素
				要加上对应的名称。
				
				注意：可以无限往后嵌套。
				*/
				// $("#div2 ").addClass("cBlack");
				// $("#div2 #span1").addClass("cBlack");
				// $("#div2 .subDivCls").addClass("cBlack");
				$("#div2 span").addClass("cBlack");
			});
			
			/* <input type="button" id="btn2" value="选取id为div2的所有span子元素"> */
			// 子元素选择器
			$("#btn2").click(function() {
				$("#div2 > span").addClass("cBlack");
			});
			
			/* <input type="button" id="btn3" value="选取id为div2的下一个div兄弟元素"> */
			/*
			下一个兄弟元素
			相邻元素选择器，只能下一个
			*/
			$("#btn3").click(function() {
				// $("#div2 + div").addClass("cBlack");
				/* 在下觉得用上面的写法较好，因为是下一个兄弟元素
				    并不一定就是div，因为只能取next位置的元素节点，所以不如省略标签名称
				    正确率更高，也不容易引起歧义。*/			
				// 注意：只有next：+；没有$("#div2 -").addClass("cBlack");这种写法！  :(
				$("#div2 +").addClass("cBlack");
				// 但是其实 #div2 + div 也有一个好处，先确认next元素为div元素才会选中，不然不会选中！
			});
			
			/* <input type="button" id="btn4" value="选取id为div2之后的所有div兄弟元素"> */
			// 兄弟选择器，只能从当前开始，同级往后。
			$("#btn4").click(function() {
				/*
				此方法获取了当前div2之后的所有的兄弟节点元素(注意是之后的！)
				什么都不写的话，就获取了所有，如果想要获取特定类型的标签节点。
				就要加上对应的节点名称，例如题上的div2之后的所有的div
				*/
				// $("#div2 ~").addClass("cBlack");
				$("#div2 ~ div").addClass("cBlack");
			});
			
			/* <input type="button" id="btn5" value="选取id为div2的所有div兄弟元素"> */
			/* 
			此方法不是层级选择器中有的，是拓展的，
			为了补充上面的只能选择之后的兄弟标签，
			那么现在通过这个补充的方法就可以选择
			到所有的兄弟标签了。
			sbilings()：获取所有的兄弟标签的方法
			*/ 
			$("#btn5").click(function() {
				// 选择所有的兄弟标签
				// $("#div2").siblings().addClass("cBlack");
				// 只要兄弟标签中的div标签
				$("#div2").siblings("div").addClass("cBlack");
			});
		});
    </script>
</head>
  <body>
    <div id="div1" class="divCls cGreen">id 为div1 的div<br><br>
    	<div class="subDivCls">class为subDivCls的div</div>
   	</div>
    <div id="div2" class="divCls cPink">id 为div2 的div
    	<br><br>
    	<span id="span1">div2里面的span,id为span1</span>
    	<br><br>
    	<div class="subDivCls" style="float:left;">class为subDivCls的div</div>
    	<div class="subDivCls">subDivCls<br>
    		<span id="span2">span2</span>
    	</div>
    </div>
    <div id="div3" class="divCls cBlue" title="itcast">
    id 为div3 的div，title为itcast，包含隐藏输入框
		<input type="hidden" value="hello">    	
    </div>
    <span class="spanCls cRed">div3的兄弟元素span</span>
    <div id="div4" class="divCls cYellow">id 为div4 的div<br>
	    <div class="subDivCls" style="float:left;">subDivCls<br>
    		<span id="span2">span4</span></div>
	    <div class="subDivCls" title="itcast">title为itcast</div>
	    <div class="subDivCls" style="float:left;">class为subDivCls的div</div>
	    <div class="subDivCls"></div>
    </div>
    <div class="divCls cCyan hide">class设置为隐藏的，隐藏div</div>
    <div class="divCls cPurple" style="display: none">style的display为none的隐藏div</div>
    <div style="clear: both;"></div>
    <br><br>
    <hr>
    <input type="button" id="btn1" value="选取id为div2的所有span后代元素">
    <input type="button" id="btn2" value="选取id为div2的所有span子元素">
    <input type="button" id="btn3" value="选取id为div2的下一个div兄弟元素">
    <input type="button" id="btn4" value="选取id为div2之后的所有div兄弟元素">
    <input type="button" id="btn5" value="选取id为div2的所有div兄弟元素">
  </body>
</html>

五彩世界

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;层次选择器&lt;/title&gt;&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;script type="te
复制链接

扫一扫