jQuery教程-jQuery过滤选择器

jQuery的过滤选择器主要是通过过滤规则来筛选我们所需要的元素，过滤的规则和CSS中伪类选择器的语法相同。按照不同的过滤规则，过滤选择器又可以分为位置过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象过滤选择器。

为了演示过滤选择器的效果，我们也制作了一个DEMO。这个DEMO的界面如下图所示：

点击DEMO中的左侧的按钮可以对各种过滤选择器进行测试，并可以看到可视化的选择效果。你可以在线查看这个DEOM，或者下载到你的电脑中查看。

位置过滤选择器

jQuery的位置过滤选择器有以下几种：

:first

:first选择器选择一组元素的第一个元素。例如要选择ul#bar元素中的第一个li元素：

$('ul#bar li:first').highlight();                              
                            

查看DEMO中的小圆的颜色变化，可以发现第一个小圆的背景色被设置为红色，字体颜色被设置为白色。

:last

:last选择器选择一组元素的最后一个元素。例如要选择ul#bar元素中的最后一个li元素：

$('ul#bar li:last').highlight();                              
                            

查看DEMO中的小圆的颜色变化，可以发现最后一个小圆的背景色被设置为红色，字体颜色被设置为白色。

:not(selector)

:not(selector)选择器从一组元素中排除与给定选择器匹配的元素，返回不匹配的元素。例如要选择ul#bar元素中不是li.circle5元素的所有元素：

$('ul#bar li:not(.circle5)').highlight();                              
                            

下图为返回的结果：

:even

:even选择器从一组元素中返回索引是偶数的所有元素，索引从0开始。例如要选择ul#bar元素中的偶数项li元素：（特别要注意索引从0开始）

$('ul#bar li:even').highlight();                              
                            

下图为返回的结果：

:odd

:odd选择器从一组元素中返回索引是奇数的所有元素，索引从0开始。例如要选择ul#bar元素中的奇数项li元素：

$('ul#bar li:odd').highlight();                              
                            

下图为返回的结果：

:eq(index)

:eq(index)选择器从一组元素中返回索引等于index的所有元素，索引从0开始。例如要选择ul#bar元素中索引等于3的li元素：

$('ul#bar li:eq(3)').highlight();                              
                            

下图为返回的结果：

:gt(index)

:gt(index)选择器从一组元素中返回索引大于index的所有元素，索引从0开始。例如要选择ul#bar元素中索引大于3的li元素：

$('ul#bar li:gt(3)').highlight();                              
                            

下图为返回的结果：

:lt(index)

:lt(index)选择器从一组元素中返回索引小于index的所有元素，索引从0开始。例如要选择ul#bar元素中索引小于3的li元素：

$('ul#bar li:lt(3)').highlight();                              
                            

下图为返回的结果：

:header

:header选择器选取所有的标题元素。例如下面的例子：

$('ul#bar li:header').highlight();                              
                            

下图为返回的结果：

:animated

:animated选择器返回当前正在执行动画的所有元素。例如下面的例子：

$('ul li:animated').highlight();                              
                            

内容过滤选择器

jQuery的内容过滤器有以下几种：

:contains(text)

:contains(text)选择器返回包含文本内容为text的所有元素。例如要选择ul#foo中包含有文本6的li元素：

$('ul li:contains("6")').highlight();                              
                            

下面是返回的结果：

:empty

:empty选择器返回不包含文本或者子元素的空元素。例如要选择ul#foo中空的li元素：

$('ul li:empty').highlight();                              
                            

下面是返回的结果：

:has(selector)

:has(selector)选择器返回含有包含匹配选择器元素的所有元素。例如要选择ul#foo中包含i元素的li元素：

$('ul li:li:has(i)').highlight();                              
                            

下面是返回的结果：

:parent

:parent选择器返回含有子元素或文本的元素。例如要选择ul#foo所有包含子元素或文本元素的li元素：

$('ul li:li:parent').highlight();                              
                            

下面是返回的结果：

可见性过滤选择器

jQuery的可见性过滤器有以下2种。可见性过滤器根据元素是否可见来选择元素。

子元素过滤选择器

jQuery的子元素过滤选择器有以下几种：

:nth-child(index/even/odd/equation)

:nth-child()选择器返回一组元素中的第index个子元素，或奇偶元素，或指定模式的元素，index从1开始计算。:nth-child()非常有用，它有以下几种功能：

• :nth-child(index)：返回一组元素中索引为index的元素，索引从1开始。
• :nth-child(even)：返回一组元素中索引为偶数的元素，索引从1开始。
• :nth-child(odd)：返回一组元素中索引为奇数的元素，索引从1开始。
• :nth-child(equation)：equation为指定的模式，例如：
  • :nth-child(2)：返回一组元素中索引为2的元素。
  • :nth-child(2n)：返回一组元素中索引为2的倍数元素。
  • :nth-child(3n+1)：返回一组元素中索引为3的倍数加1（3n+1）的元素。

例如选择ul#bar元素中索引为（3n+1）的所有元素，得到下面的结果：

$('ul li:nth-child(3n+1)').highlight();                              
                            

下面是返回的结果：

:first-child

:first-child选择器返回一组元素中的第1个子元素。例如要选择ul#bar元素中的第一个li元素：

$('ul li:first-child').highlight();                              
                            

下面是返回的结果：

:last-child

:last-child选择器返回一组元素中的最后1个子元素。例如要选择ul#bar元素中的最后一个li元素：

$('ul li:last-child').highlight();                              
                            

下面是返回的结果：

:only-child

:only-child选择器返回是父元素唯一子元素的元素。例如要选择是唯一子元素的li元素：

$('ul li:only-child').highlight();                              
                            

下面是返回的结果：

表单对象属性过滤选择器

表单对象属性过滤选择器主要用于对表单元素的过滤选择。有以下几种：

相关阅读

• jQuery教程-jQuery简介
• jQuery教程-jQuery基本选择器

查看演示 下载地址