JQuery之复合选择器

最新推荐文章于 2024-04-16 03:29:12 发布

陈新月-Phyllis

最新推荐文章于 2024-04-16 03:29:12 发布

阅读量3.2k

点赞数

分类专栏： # JavaScript 文章标签： jQuer 选择

本文链接：https://blog.csdn.net/csxypr/article/details/79344320

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天小咸儿在学习JQuery基础的时候，见识到了新内容：选择器

选择器理所当然的分为：基本选择器和复合选择器，今天小咸儿就来讲述一下什么是复合选择器。

概念：JQuery复合选择器就是将多个选择器组合在一起，两个选择器之间以逗号“，”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。

简单的来说：

子代选择器：父代>子代
后代选择器：祖代后代
组合选择器：选择器1，选择器2，选择器3，….
后面兄弟选择器：当前元素~后面元素
紧跟兄弟选择器：当前元素+紧跟元素

接下来，小咸儿就来举一下具体的例子：

子代选择器：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Script/jquery-1.10.2.js"></script>
    <meta charset="utf-8" />
    <script>
        $(function () {
            $("div").css({
                border: "1px dotted red",
                margin: "10px"
            });

            //其他选择器的使用
             $(".c1>div").css("borderColor","green");  //子代变绿           
        });
    </script>
</head>
<body>
    <div></div>
    <div class="c1">
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
    <div></div>
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
    <div></div>
</body>
</html>

图片显示：子代选择器

后代选择器：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Script/jquery-1.10.2.js"></script>
    <meta charset="utf-8" />
    <script>
        $(function () {
            $("div").css({
                border: "1px dotted red",
                margin: "10px"
            });

            //其他选择器的使用            
            $(".c1 div").css("borderColor", "green");   //后代变绿

       });
    </script>
</head>
<body>
    <div></div>
    <div class="c1">
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
    <div></div>
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
    <div></div>
</body>
</html>

图片显示：后代选择器

紧跟兄弟选择器：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Script/jquery-1.10.2.js"></script>
    <meta charset="utf-8" />
    <script>
        $(function () {
            $("div").css({
                border: "1px dotted red",
                margin: "10px"
            });

            //其他选择器的使用

             $(".c1+div").css("borderColor", "green");   //紧跟兄弟变绿
            //紧跟兄弟常常使用*，即无论后面为谁跟着变化
        });
    </script>
</head>
<body>
    <div></div>
    <div class="c1">
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
    <div></div>
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
    <div></div>
</body>
</html>

图片显示：紧跟兄弟选择器

后面兄弟选择器：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Script/jquery-1.10.2.js"></script>
    <meta charset="utf-8" />
    <script>
        $(function () {
            $("div").css({
                border: "1px dotted red",
                margin: "10px"
            });

            //其他选择器的使用
            $(".c1~div").css("borderColor", "green");  //后面兄弟变绿

        });
    </script>
</head>
<body>
    <div></div>
    <div class="c1">
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
    <div></div>
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
    <div></div>
</body>
</html>

图片显示：后面兄弟选择器

除此之外呢，使用一些其他的方法也可以达到这样的效果，例如：

$(".c1").next().css("borderWidth","5px");
$(".c1").next("div").css("borderWidth","5px");
$(".c1").nextAll("div").css("borderWidth","5px");

//previous 向前
$(".c1").prev().css("borderWidth","5px");

而且还要一些好玩的方法等待着我们去实践：prevAll()、siblings()、child()

总结：在学习到新内容的时候，多多实践才会让自己发现更多对的新鲜事物，而且从不同的角度，使用不同的方式去实现，才会真正快速的掌握！

陈新月-Phyllis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
23
评论
JQuery之复合选择器

&nbsp;&nbsp;&nbsp;&nbsp;今天小咸儿在学习JQuery基础的时候，见识到了新内容：选择器&nbsp;&nbsp;&nbsp;&nbsp;选择器理所当然的分为：基本选择器和复合选择器，今天小咸儿就来讲述一下什么是复合选择器。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;概念：JQuery复合选择器就是将多
复制链接

扫一扫