加载中......
搜索
注册登录 快速发布
输入验证码，即可复制
微信扫码下载好向圈APP, 登陆后即可进入消息页面查看验证码
只需要3秒时间
使用道具
老六六

2022-08-04 22:43

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

    <!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");                        });

jQuery中的层级选择器：后代元素、子元素、相邻元素、兄弟元素-1.jpg


    </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>
# 元素 # jQuery # 选择器 # 后代 # 层级
广告圈
12416 查看 0 0 反对

说说我的看法高级模式

您需要登录后才可以回帖 登录|立即注册

全部评论

还没人评论此主题哦

相关阅读

广告圈

广告圈

帖子 892422

 加入 720132
百度地图|小黑屋|好向圈 |网站地图
版权所有 © 好向圈 | 侵权投诉 |商务合作 |封禁账号 | 苏ICP备19075825号

苏公网安备 32010402001296号