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

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

jquery对象过滤 jquery过滤选择器_jQuery

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

位置过滤选择器

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

选择器

返回值

描述

:first

单个元素

选择第一个元素

:last

单个元素

返回最后一个元素

:not(selector)

元素集合

从一组元素中排除与给定选择器匹配的元素,返回不匹配的元素

:even

元素集合

返回索引是偶数的所有元素,索引从0开始

:odd

元素集合

返回索引是奇数的所有元素,索引从0开始

:eq(index)

元素集合

返回索引等于index的所有元素,索引从0开始

:gt(index)

元素集合

返回索引大于index的所有元素,索引从0开始

:lt(index)

元素集合

返回索引小于index的所有元素,索引从0开始

:header

元素集合

选取所有的标题元素

:animated

元素集合

返回当前正在执行动画的所有元素

:first

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

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

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

jquery对象过滤 jquery过滤选择器_jQuery

:last

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

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

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

jquery对象过滤 jquery过滤选择器_jQuery

:not(selector)

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

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

下图为返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:even

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

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

下图为返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:odd

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

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

下图为返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:eq(index)

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

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

下图为返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:gt(index)

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

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

下图为返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:lt(index)

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

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

下图为返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:header

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

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

下图为返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:animated

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

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

内容过滤选择器

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

选择器

返回值

描述

:contains(text)

元素集合

返回包含文本内容为text的所有元素

:empty

元素集合

返回不包含文本或者子元素的空元素

:has(selector)

元素集合

返回含有包含匹配选择器元素的所有元素

:parent

元素集合

返回含有子元素或文本的元素

:contains(text)

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

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

下面是返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:empty

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

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

下面是返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:has(selector)

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

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

下面是返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:parent

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

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

下面是返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

可见性过滤选择器

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

选择器

返回值

描述

:hidden

元素集合

返回所有不可见的元素

:visible

元素集合

返回所有可见的元素

子元素过滤选择器

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

选择器

返回值

描述

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

元素集合

返回一组元素中的第index个子元素,或奇偶元素,或指定模式的元素,index从1开始计算

:first-child

元素集合

返回一组元素中的第1个子元素

:last-child

元素集合

返回一组元素中的最后一个子元素

:only-child

元素集合

如果某个元素是它的父元素的唯一子元素,这元素会被返回

: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();

下面是返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:first-child

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

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

下面是返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:last-child

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

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

下面是返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

:only-child

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

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

下面是返回的结果:

jquery对象过滤 jquery过滤选择器_jQuery

表单对象属性过滤选择器

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

选择器

返回值

描述

:enabled

元素集合

返回所有可用的元素

:disabled

元素集合

返回所有被禁用的元素

:checked

元素集合

返回单选框或复选框被选中的元素

:selected

元素集合

返回下拉列表被选中的元素

相关阅读