jQuery层级选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <link rel="stylesheet" href="css/style.css" />
         <script src="js/jquery-1.8.3.js"></script>
         <script>
                 $(function(){
                     $("#btn1").click(function(){
                         $("body div").css("background","pink");
                     });
                     $("#btn2").click(function(){
                         $("body>div").css("background","pink");
                     });
                     $("#btn3").click(function(){
                         $("#two+div").css("background","pink");
                     });
                     $("#btn4").click(function(){
                         $("#one~div").css("background","pink");
                     });
                 });
         </script>
    </head>
    <body>
        <input type="button" id="btn1" value="选择body中所有的div元素" />
        <input type="button" id="btn2" value="找body儿子" />
        <input type="button" id="btn3" value="选择id为two 下一个兄弟元素"/>
        <input type="button" id="btn4" value="id为one的兄弟元素" />
        <div id="one">
            <div class="mini">
                111111111111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                2222222
            </div>
            <div class="mini">
                3333333
            </div>
        </div>
        <div id="three">
            <div class="mini">
                4444444
            </div>
            <div class="mini">
                5555555
            </div>
            <div class="mini">
                66666666
            </div>
        </div>
        <span id="four"></span>
    </body>
</html>
原文地址:https://www.cnblogs.com/qurui1998/p/10507079.html