jQuery层次选择器 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>层次选择器</title>
    <script src="../../JQuery/jquery-2.1.4.min.js"></script>
    <link href="../../CSS/2-6.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () { //匹配后代元素
            $("#divMid").css("display", "block");
            $("div span").css("display", "block");
        })
        $(function () { //匹配子元素
            $("#divMid").css("display", "block");
            $("div>span").css("display", "block");
        })
        $(function () { //匹配后面元素
            $("#divMid + div").css("display", "block");
            $("#divMid").next().css("display", "block");
        })
        $(function () { //匹配所有后面元素
            $("#divMid ~ div").css("display", "block");
           // $("#divMid").nextAll().css("display", "block");
        })
        $(function () { //匹配所有相邻元素
            $("#divMid").siblings("div").css("display", "block");
        })
    </script>
</head>
<body>
    <div class="clsFraA">Left</div>
    <div class="clsFraA" id="divMid">
        <span class="clsFraP" id="Span1">
            <span class="clsFraC" id="Span2"></span>
        </span>
    </div>
    <div class="clsFraA">Right_1</div>
    <div class="clsFraA">Right_2</div>
</body>
</html>

 

posted @ 2015-07-28 09:03  赵孟蒙  Views(226)  Comments(0)  Edit  收藏  举报