<!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>
