jQuery的层次选择器

最新推荐文章于 2024-01-14 11:54:30 发布

hbj_曙光

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量374

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u011240216/article/details/71425664

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery的层次选择器：
这里写图片描述

  <!DOCTYPE HTML>  
    <html>  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
            <title>Untitled Document</title>  
            <style type="text/css">  
                div, span, p {  
                    width: 140px;  
                    height: 140px;  
                    margin: 5px;  
                    background: #aaa;  
                    border: #000 1px solid;  
                    float: left;  
                    font-size: 17px;  
                    font-family: Verdana;  
                }  

                div.mini {  
                    width: 55px;  
                    height: 55px;  
                    background-color: #aaa;  
                    font-size: 12px;  
                }  

                div.hide {  
                    display: none;  
                }             
            </style>  

            <!-- 导入 jQuery 库 -->  
            <script type="text/javascript" src="jquery-1.12.4.min.js"></script>  
            <script type="text/javascript">  

                $(function(){  
                    $("#btn1").click(
                            function () {

                        $("body div").css("background","red");

                    });
                    $("#btn2").click(
                            function () {

                        $("body>div").css("background","red");     
                    });
                    $("#btn3").click(
                            function () {

                        $("#one+div").css("background","red");     
                    });
                    $("#btn4").click(
                            function () {

                        $("#two~div").css("background","red");        
                    });
                    $("#btn5").click(
                            function () {

                        $("#two").siblings("div").css("background","red");     
                    });
                    $("#btn6").click(
                            function () {
                    //以下选择器选择的是近邻 #one 的 span 元素, 若该span
                    //和 #one 不相邻, 选择器无效. 
                    //$("#one + span").css("background", "red");
                        $("#one") .nextAll("span:first").css("background","red");      
                    });
                    $("#btn7").click(
                            function () {

                        $("#two").prevAll("div").css("background","red");      
                    });



                })  

            </script>  

        </head>  
        <body>          
            <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
            <input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />
            <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
            <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
            <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
            <input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
            <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" /> 

            <br><br>  
            <div class="one" id="one">  
                id 为 one,class 为 one 的div  
                <div class="mini">class为mini</div>  
            </div>  
            <div class="one" id="two" title="test">  
                id为two,class为one,title为test的div  
                <div class="mini" title="other">class为mini,title为other</div>  
                <div class="mini" title="test">class为mini,title为test</div>  
            </div>  
            <div class="one">  
                <div class="mini">class为mini</div>  
                <div class="mini">class为mini</div>  
                <div class="mini">class为mini</div>  
                <div class="mini"></div>  
            </div>  
            <div class="one">  
                <div class="mini">class为mini</div>  
                <div class="mini">class为mini</div>  
                <div class="mini">class为mini</div>  
                <div class="mini" title="tesst">class为mini,title为tesst</div>  
            </div>  
            <div style="display:none;" class="none">style的display为"none"的div</div>  
            <div class="hide">class为"hide"的div</div>  
            <div>  
                包含input的type为"hidden"的div<input type="hidden" size="8">  
            </div>  
            <span id="span">^^span元素^^</span>  
        </body>  
    </html>

运行效果：
1.
这里写图片描述
2.

3.

4.

5.

6.

7.

hbj_曙光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的层次选择器

jQuery的层次选择器： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title>
复制链接

扫一扫

专栏目录