JQ-层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <style type="text/css">
        body{
            background-color: #e6fbff;
            color: #000;
            font-size: 20px;
            padding: 0 30px;
        }
        li{
            list-style: none;
        }
        a{
            color: red;
            text-decoration: none;
        }
        .red{
            color: red;
        }
        .pink{
            background-color: #20ce7d;
            padding: 3px;
            color: #fff;
        }
        .box{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>层次选择器，就是通过元素之间的层次关系来获取元素。层次选择器在实际开发中，也是相当重要的。常见的层次关系包括：父子、后代、兄弟、相邻。</p>
        <p>在jQuery，层次选择器共有4种：</p>
        <p class="red">$("M N") ------ 后代选择器，选择M元素内部后代N元素（所有N元素）</p>
        <p class="red">$("M>N") ------ 子代选择器，选择M元素内部子代N元素（所有第1级N元素）</p>
        <p class="red">$("M~N") ------ 兄弟选择器，选择M元素后所有的同级N元素</p>
        <p class="red">$("M＋N") ------ 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素）</p>
        <p>注意以下2点：
        （1）$("M+N")可以使用“$(M元素).next()”代替；
        （2）$("M~N")可以使用“$(M元素).nextAll()”代替；</p>
    </div>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容