jQuery层次选择器

时间：2024-01-06 20:37:20
<!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>

相关文章