锋利的jquery学习笔记-write less do more-层次选择器

最新推荐文章于 2020-12-05 23:34:05 发布

FightingITPanda

最新推荐文章于 2020-12-05 23:34:05 发布

阅读量175

点赞数 1

本文链接：https://blog.csdn.net/fightingitpanda/article/details/80264053

版权

//层级选择器后代元素、子元素、相邻元素、同辈元素

页面代码
<head>
        <script src = "jquery.js"></script>
        <script src = "test.js"></script>
        <style>
            span{
                width:140px;
                height:140px;
                margin:5px;
                background:orchid;
                border:#000 1px solid;
                float :left;
                font-size :17px;
                font-family :verdana;
            }
            div.min {
                width:55px;
                height:55px;
                background-color: #aaa;
                font-size:12px;
            }
            div.hide {
                display:none;
            }
            .one{
                width:140px;
                height:140px;
                margin:5px;
                background:greenyellow;
                border:royalblue 5px solid;
                float :left;
                font-size :17px;
                font-family :verdana;
            }
            .min{
                width:140px;
                height:140px;
                margin:5px;
                background:#aaa;
                border:#000 2px solid;
                float :left;
                font-size :17px;
                font-family :verdana;
            }
        </style>
    </head>
<body>

    <div class= one id = one >
        id为one、class为one的div
        <div class =min>class 为min的div</div>
    </div>
    <div class = one id = two title = test>
        id为two class为one title为test的div
        <div class = min title=other>class为min title为other的div</div>
        <div class = min title = test>class 为min title为test的div</div>
    </div>
    <div class =one >
        <div class = min>class 为min的div</div>
        <div class = min>class为min的div</div>
        <div class = min>class 为min的div</div>
        <div class = min></div>
    </div>
    <div class =one >
        <div class = min>class 为min的div</div>
        <div class = min>class为min的div</div>
        <div class = min>class 为min的div</div>
        <div class = min title=test> class为min title为test的div</div>
    </div>
    <div style = "display :none;" class = none>
        style的display为none的div
    </div>
    <div class = hide>class 为hide的div</div>
    <div>
        包含input的type为hideen的div<input type =hidden size=8/>

    </div>
    <span id = mover>正在执行动画的span元素</span>
    <button onclick="panda3()">点我 点我</button>

function panda3(){
    //层级选择器  后代元素、子元素、相邻元素、同辈元素
//  $("body div").css("background","pink");//后代元素   获取body下所有的div 包括div里嵌套的div
    //$("body>div").css("background","deeppink");//子元素  获取body下第一层子div
    //$("#one+div").css("background","#000000");//相邻元素 获取id为one元素后第一个元素
    //$("#one").next("div").css("background","#000000");
    //$("#one ~div").css("background","aquamarine");//同辈元素  获取id为one元素后所有div元素
    //$("#one").nextAll("div").css("background","aquamarine");
    $("#one").siblings("div").css("background","aquamarine");// 获取前后所有同辈元素
    }

这里写图片描述

**tip:
这里讲一下**
1.$("body div") 和 $("body > div")的区别
$("body div")获取body下所有div，包括div里嵌套的div，或者其它元素里嵌套的div
$("body > div") 获取body里第一层div 不包括嵌套的子div

2.$("#one+div") 相当于$("#one").next("div") 后者常用
$("#one~div")相当于$("#one").nextAll("div") 后者常用

3.$("#one").nextAll("div") 和$("#one").siblings("div")的区别
$("#one").nextAll("div")获取id为one的元素往后所有同级div
$("#one").siblings("div") 获取id为one元素前后所有同级div