jQuery選擇器之層次選擇器

weixin_34104341發表於2020-04-07
jQuery

本文接上篇聊聊層次選擇器。

 

二.層次選擇器

層次選擇器通過 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>

 

 

 好了，本篇文章就介紹到這兒，歡迎大家留言交流；喜歡或有幫助到您的話，點個贊或推薦支援一下！

 

轉載於:https://www.cnblogs.com/johnvwan/p/9581751.html

相關文章