【jQuery】jQuery 中常用的基础选择器_“Allen Su”的博客-程序员宅基地_jquery并集选择器

技术标签: jQuery  jQuery中常用的基础选择器  

在介绍 jQuery 的基础选择器之前,你必须要了解 CSS 中的基础选择器,如果你对 CSS 的基础选择器不了解或者忘了,可以点击我的这篇博客 什么是 CSS 中的选择器?CSS 的选择器都有哪些?

了解了 CSS 的基础选择器后,我们再来认识 jQuery 中常用的基础选择器。

一:什么是 jQuery 选择器

jQuery 选择器是 jQuery 为我们提供的一种方法,让我们更方便的获取到页面中的元素,然后对 HTML 元素组或者单个元素进行操作。

jQuery 选择器有很多,基本兼容了 CSS1 到 CSS3 所有的选择器,除此之外,它也有一些自定义的选择器,在 jQuery 中所有的选择器都是以 $ 符号 开始:$(“选择器”)。

下面我们仅针对 jQuery 中一些常用的选择器做一下简单说明。

为了更方便理解,我们仅通过一个例子,了解这些选择器。

HTML 代码如下所示

<body>
    <div id="grandfather">
        <div id="father"><div class="son"></div>
            <div class="son"></div>
        </div>
        <div id="uncle"><p></p>
            <p></p>
        </div>
        <p id="other"></p>
    </div>
</body>

浏览器运行效果如下
在这里插入图片描述

1、元素选择器

jQuery 元素选择器基于元素名获取元素,比如我们将页面中所有 p 元素的背景色改为蓝色

jQuery 代码如下

    $(function ()
    {
    
        $("p").css("backgroundColor","blue");
    });

浏览器运行效果如下
在这里插入图片描述

2、id 选择器

jQuery id 选择器通过 HTML 元素的 id 属性选取指定的元素,页面中元素的 id 是唯一的。

比如我们将 id 属性为 uncle 的元素的背景色改为红色

jQuery 代码如下

    $(function ()
    {
    
        $("#other").css("backgroundColor","red");
    });

浏览器运行效果如下
在这里插入图片描述
不要忘记 id 名称前面要加一个 # 符号。

3、class 选择器

jQuery 的类选择器可以通过指定的 class 查找元素。

比如我们将 class 名为 son 的元素的背景色改为紫色

jQuery 代码如下

    $(function ()
    {
    
        $(".son").css("backgroundColor","purple");
    });

浏览器运行效果如下
在这里插入图片描述
不要忘记 class 名称前面要加一个 . 符号。

4、子代选择器

jQuery 子代选择器之间用 > 符号连接,只选中父级元素的亲一代。

比如我们将 id 属性名称为 grandfather 的亲一代 p 元素的背景色改为粉色

jQuery 代码如下

    $(function ()
    {
    
        $("#grandfather>p").css("backgroundColor","pink");
    });

浏览器运行效果如下
在这里插入图片描述
因为 id 属性名称为 grandfather 的亲一代 p 元素只有一个 “五”,所以只有它变成了粉色。

5、后代选择器

jQuery 后代选择器之间用空格连接,选中的是指定元素的所有后代。

比如我们将 id 属性名称为 grandfather 的所有后代 p 元素的背景色改为粉色

jQuery 代码如下

    $(function ()
    {
    
        $("#grandfather p").css("backgroundColor","pink");
    });

浏览器运行效果如下在这里插入图片描述
对比子代选择器,其实就是把 > 符号给换成了空格,两者可以对比下。

6:并集选择器

jQuery 的并集选择器指的是可以同时对多个选择器进行相同的操作,选择器之间通过英文逗号 “,” 连接。

比如我们将 id 属性名称为 father 和 uncle 的元素的背景色改为黄色

jQuery 代码如下

    $(function ()
    {
    
        $("#father,#uncle").css("backgroundColor","yellow");
    });

浏览器运行效果如下
在这里插入图片描述

7:交集选择器

jQuery 中的交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为 class 选择器,两个选择器之间不能有空格。

比如我们将标签为 div,class 名称为 son 的元素的背景色改为蓝色

jQuery 代码如下

    $(function ()
    {
    
        $("div.son").css("backgroundColor","blue");
    });

浏览器运行效果如下
在这里插入图片描述

8:通配符选择器

jQuery 中的通配符选择器用 * 号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。

比如我们将页面中所有元素的背景色都改为粉红色

jQuery 代码如下

    $(function ()
    {
    
        $("*").css("backgroundColor","pink");
    });

浏览器运行效果如下
在这里插入图片描述
常用的就简单介绍到这里,或许你已经发现了,CSS 中的选择器怎么写,在 jQuery 中就怎么写。

jQuery 中的选择器还有很多,如是你碰到了没有见过的,去查 jQuery 的官方文档就行了。

关于 jQuery 中常用的基础选择器就说到这里。


结束语

如果这篇博客有幸帮到了您,欢迎点击下方链接,和更多志同道合的伙伴一起交流,一起进步。

开发者俱乐部
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42351033/article/details/104123002

智能推荐

随便推点