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

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

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

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

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

HTML 代码如下所示

    
        我是第 1 个 li 元素
        我是第 2 个 li 元素
        我是第 3 个 li 元素
        我是第 4 个 li 元素
        我是第 5 个 li 元素
        我是第 6 个 li 元素
    

常用组合一 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 代码所示

	
    	五笔输入法
    	拼音输入法
    	双拼
    	全拼
	

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

jQuery 代码如下

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

浏览器运行效果如下

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

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

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

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