当前位置主页 > 资料库 > 前端教程 > jQuery教程-jQuery过滤选择器

jQuery教程-jQuery过滤选择器

2016-02-02

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

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

jquery过滤选择器-1

点击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过滤选择器-2

:last

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

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

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

jquery过滤选择器-3

:not(selector)

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

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

下图为返回的结果:

jquery过滤选择器-4

:even

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

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

下图为返回的结果:

jquery过滤选择器-5

:odd

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

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

下图为返回的结果:

jquery过滤选择器-6

:eq(index)

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

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

下图为返回的结果:

jquery过滤选择器-7

:gt(index)

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

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

下图为返回的结果:

jquery过滤选择器-8

:lt(index)

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

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

下图为返回的结果:

jquery过滤选择器-9

:header

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

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

下图为返回的结果:

jquery过滤选择器-10

: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过滤选择器-11

:empty

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

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

下面是返回的结果:

jquery过滤选择器-12

:has(selector)

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

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

下面是返回的结果:

jquery过滤选择器-13

:parent

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

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

下面是返回的结果:

jquery过滤选择器-14

可见性过滤选择器

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过滤选择器-15

:first-child

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

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

下面是返回的结果:

jquery过滤选择器-16

:last-child

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

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

下面是返回的结果:

jquery过滤选择器-17

:only-child

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

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

下面是返回的结果:

jquery过滤选择器-18

表单对象属性过滤选择器

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

选择器 返回值 描述
:enabled 元素集合 返回所有可用的元素
:disabled 元素集合 返回所有被禁用的元素
:checked 元素集合 返回单选框或复选框被选中的元素
:selected 元素集合 返回下拉列表被选中的元素
相关阅读

查看演示 下载地址

Previous:
上一篇:jQuery教程-jQuery基本选择器
Next:
下一篇:jQuery教程-jQuery表单选择器
返回顶部