【jQuery 教程系列第 9 篇】jQuery 中常用的基础选择器

这是【jQuery 教程系列第 9 篇】，如果觉得有用的话，欢迎关注专栏。

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

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

一：什么是 jQuery 选择器

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

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

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

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

HTML 代码如下所示

    
        一
            二
            二
        
        三
            四
            四
        
        五
    

浏览器运行效果如下

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 中常用的基础选择器就说到这里。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。 最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。