- <!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”>
- $(document).ready(function() {
- // 后代选择器
- $(“#btn1”).click(function() {
- // $(“#div2 “).addClass(“cBlack”);
- // $(“#div2 #span1”).addClass(“cBlack”);
- // $(“#div2 .subDivCls”).addClass(“cBlack”);
- $(“#div2 span”).addClass(“cBlack”);
- });
- // 子元素选择器
- $(“#btn2”).click(function() {
- $(“#div2 > span”).addClass(“cBlack”);
- });
- $(“#btn3”).click(function() {
- // $(“#div2 + div”).addClass(“cBlack”);
- // 注意：只有next：+；没有$(“#div2 -“).addClass(“cBlack”);这种写法！ :(
- $(“#div2 +”).addClass(“cBlack”);
- // 但是其实 #div2 + div 也有一个好处，先确认next元素为div元素才会选中，不然不会选中！
- });
- // 兄弟选择器，只能从当前开始，同级往后。
- $(“#btn4”).click(function() {
- // $(“#div2 ~”).addClass(“cBlack”);
- $(“#div2 ~ div”).addClass(“cBlack”);
- });
- $(“#btn5”).click(function() {
- // 选择所有的兄弟标签
- // $(“#div2”).siblings().addClass(“cBlack”);
- // 只要兄弟标签中的div标签
- $(“#div2”).siblings(“div”).addClass(“cBlack”);
- });
- </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>