【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器（基本筛选器）

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

jQuery 中除了一些基本选择器，也有一些过滤选择器，本篇博客仅挑选其中的几个简单说明一下，其它的大家可以点击 jQuery API 中文文档了解。

jQuery 中的过滤选择器都是以英文冒号 “:” 开始，然后写上对应的选择器。

这里通过一个例子说明一下 jQuery 中的过滤选择器

HTML 代码如下所示

<body><ul><li>我是第 1 个 li 元素</li><li>我是第 2 个 li 元素</li><li>我是第 3 个 li 元素</li><li>我是第 4 个 li 元素</li><li>我是第 5 个 li 元素</li><li>我是第 6 个 li 元素</li></ul>
</body>

文章目录

常用组合一
- 1-1、:even 匹配所有索引值为偶数的元素
- 1-2、:odd 匹配所有索引值为奇数的元素
常用组合二
- 2-1、:first 获取第一个元素
- 2-2、:last 获取最后一个元素
常用组合三
- 3-1、:gt 获取所有大于指定索引值的元素
- 3-2、:lt 获取所有小于指定索引值的元素
其它
- 1、:eq 获取一个指定索引值的元素
- 2、:header 获取如 h1, h2, h3之类的标题标签

常用组合一

1-1、:even 匹配所有索引值为偶数的元素

:even 选择器可以匹配所有索引值（下标）为偶数的元素，从 0 开始计数。

比如我们查找所有下标为偶数的 li 元素，并使其背景色为蓝色。

jQuery 代码

    $(function (){$("li:even").css("backgroundColor","blue");});

浏览器运行效果如下

因为第一个 li 元素的下标是 0 ，第二个 li 元素的下标是 1，第三个 li 元素的下标是 2 …… 第六个 li 元素的下标是 5，所以我们看到的好像是"奇数"行的颜色变了，要注意是从下标是偶数的开始，这点需要特别说明下。

1-2、:odd 匹配所有索引值为奇数的元素

:odd 选择器可以匹配所有索引值（下标）为奇数的元素，从 0 开始计数。

比如我们查找所有下标为奇数的 li 元素，并使其背景色为红色。

jQuery 代码如下

    $(function (){$("li:even").css("backgroundColor","blue");$("li:odd").css("backgroundColor","red");});

浏览器运行效果如下

可以看到下标为 1 3 5 的 li 元素的背景色变成了红色，这也是一个隔行变色的案例。

常用组合二

2-1、:first 获取第一个元素

:first 选择器用于获取第一个元素。

比如我们获取到第一个 li 元素，并且设置它的文本颜色为红色。

jQuery 代码

    $(function (){$("li:first").css("color","red");});

浏览器运行效果如下

2-2、:last 获取最后一个元素

:last 选择器用于获取最后一个元素。

比如我们获取到最后一个 li 元素，并且设置它的文本颜色为蓝色。

jQuery 代码

    $(function (){$("li:last").css("color","blue");});

浏览器运行效果如下

常用组合三

3-1、:gt 获取所有大于指定索引值的元素

:gt 选择器用于获取所有大于指定索引值的元素，因为是大于，所以不包含索引值对应的元素对象。

比如我们希望将索引值大于 2 的所以元素的字体改为隶书。

jQuery 代码

    $(function (){$("li:gt(2)").css("fontFamily","隶书");});

浏览器运行效果如下

3-2、:lt 获取所有小于指定索引值的元素

:lt 选择器用于获取所有小于指定索引值的元素，因为是小于，所以也不包含索引值对应的元素对象。

比如我们希望将索引值小于 3 的所以元素的字体改为宋体。

jQuery 代码

    $(function (){$("li:lt(3)").css("fontFamily","宋体");});

浏览器运行效果如下

其它

1、:eq 获取一个指定索引值的元素

:eq 选择器用于获取一个指定索引值的元素，这无疑是很方便的。

比如我们想把索引值为 4 的元素的字体大小调整为 20。

jQuery 代码

    $(function (){$("li:eq(4)").css("fontSize","20px");});

浏览器运行效果如下

2、:header 获取如 h1, h2, h3之类的标题标签

:header 选择器可以获取标题标签。

如下 HTML 代码所示

 <body><h3>五笔输入法</h3><p>拼音输入法</p><h4>双拼</h4><h5>全拼</h5></body>

我们给标题标签添加一个粉色的背景色

jQuery 代码如下

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

浏览器运行效果如下

ok，关于 jQuery 中的过滤选择器就简单说到这里。

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

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

结束语

技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。

最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。