jQuery中的層級選擇器（四、二）：後代元素、子元素、相鄰元素、兄弟元素
阿新 • • 發佈：2018-12-26
<!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>