jQuery选择器之层次选择器

最新推荐文章于 2024-09-14 18:52:56 发布

JhonXie

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量81

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/johnvwan/p/9581751.html

版权

本文接上篇聊聊层次选择器。

二.层次选择器

层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表所示：

示例代码：

<head>
    <title> 使用 jQuery 层次选择器 </title>
    <script language="javascript" type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
    <style type="text/css">
        body {
            font-size: 12px;
            text-align: center
        }

        div,
        span {
            float: left;
            border: solid 1px #ccc;
            margin: 8px;
            display: none
        }

        .clsFraA {
            width: 65px;
            height: 65px
        }

        .clsFraP {
            width: 45px;
            height: 45px;
            background-color: #eee
        }

        .clsFraC {
            width: 25px;
            height: 25px;
            background-color: #ddd
        }
    </style>
    <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>