选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。因此，如果能熟练的使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。jQuery选择器完全继承了CSS的风格。利用jQuery选择器，可以非常便捷的找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。

jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。

1.基本选择器

选择器

描 述

返 回

示 例

#id

匹配给定的id

单个元素

$(“header”)

.class

匹配给定的类名

集合元素

$(“.test”)

E

匹配给定的标签名

集合元素

$(“div”)

*

匹配所有元素

集合元素

$(“*’)

E, .class, E…

匹配给定的集合

集合元素

$(“span, .tiPS”)

2.层次选择器

选择器

描 述

返 回

示 例

$(“ancestor descendant”)

匹配ancestor里的所有
descendant(后代)元素

集合元素

$(“body div”)

$(“parent>child”)

匹配parent下的所有
child(子)元素

集合元素

$(“div>span”)

$(“prev+next”)

匹配紧接在prev后的
next元素

集合元素

$(“.error+span”)

$(“prev~siblings”)

匹配prev后的所有
siblings元素

集合元素

$(“span~a”)

3.过滤选择器

3.1 基本过滤选择器

选择器

描 述

返 回

示 例

:first

匹配第一个元素

单个元素

$(“div:first”)

:last

匹配最后一个元素

单个元素

$(“span:last”)

:even

匹配索引是偶数的元素
索引从0开始

集合元素

$(“li:even”)

: odd

匹配索引是奇数的元素
索引从0开始

集合元素

$(“li:odd”)

:eq(index)

匹配索引等于index的元
素(索引从0开始)

单个元素

$(“input:eq(2)”)

:gt(index)

匹配索引大于index的元
素(索引从0开始)

集合元素

$(“input:gt(1)”)

:lt(index)

匹配索引小于index的元
素(索引从0开始)

集合元素

$(“input:lt(5)”)

:header

匹配所有h1,h2…等
标题元素

集合元素

$(“:header”)

:animated

匹配所有正在执行
动画的元素

集合元素

$(“div:animated”)

3.2 内容过滤选择器

选择器

描 述

返 回

示 例

:contains(text)

匹配含有文本内容text
的元素

集合元素

$(“p:contains(今天)”)

:empty

匹配不含子元素或
文本元素的空元素

集合元素

$(“p:empty”)

:has(selector)

匹配包含selector元素
的元素

集合元素

$(“div:has(span)”)

:parent

匹配含有子元素或文本
的元素

集合元素

$(“div:parent”)

3.3 可见性过滤选择器

选择器

描 述

返 回

示 例

:hidden

匹配所有不可见
的元素

集合元素

$(“:hidden”)

:visible

匹配所有可见元素

集合元素

$(“:visible”)

3.4 属性过滤选择器

选择器

描 述

返 回

示 例

[attr]

匹配拥有此属性
的元素

集合元素

$(“img[alt]“)

[attr=value]

匹配属性值为value
的元素

集合元素

$(“a[title=test]“)

[attr!=value]

匹配属性值不等于
value的元素

集合元素

$(“a[title!=test]“)

[attr^=value]

匹配属性值以value
开头的元素

集合元素

$(“img[alt^=welcome]“)

[attr$=value]

匹配属性值以value
结尾的元素

集合元素

$(“img[alt$=last]“)

[attr*=vlaue]

匹配属性值中含有
value的元素

集合元素

$(“div[title*=test]“)

[attr1][attr2]…

通过多个属性
进行匹配

集合元素

$(“div[id][title*=test]“)

3.5 子元素过滤选择器

选择器

描 述

返 回

示 例

:nth-child

匹配每个父元素下的
第index个子元素
索引从1开始

集合元素

$(“div:nth-child(2)”)

:first-child

匹配每个父元素的
第一个子元素

集合元素

$(“div:first-child”)

:last-child

匹配每个父元素的
最后一个子元素

集合元素

$(“div:last-child”)

: only-child

某元素是它父元素中
的唯一的子元素
则匹配它

集合元素

$(“div:only-child”)

3.6 表单对象属性过滤选择器

选择器

描 述

返 回

示 例

:enabled

匹配所有可用元素

集合元素

$(“form :enabled”)

:disabled

匹配所有不可用
的元素

集合元素

$(“form :disabled”)

:checked

匹配所有被选中的元素
(含单选框，复选框)

集合元素

$(“input:checked”)

:selected

匹配所有被选中的
选项元素

集合元素

$(“select :selected”)

4.表单选择器

选择器

描 述

返 回

示 例

:input

匹配所有input, textarea,
select, button元素

集合元素

$(“input”)

:text

匹配所有文本框

集合元素

$(“:text”)

:password

匹配所有密码框

集合元素

$(“:password”)

:radio

匹配所有单选框

集合元素

$(“:radio”)

:checkbox

匹配所有所有多选框

集合元素

$(“:checkbox”)

:submit

匹配所有提交按钮

集合元素

$(“:submit”)

:image

匹配所有图像按钮

集合元素

$(“:image”)

:reset

匹配所有重置按钮

集合元素

$(“:reset”)

:button

匹配所有按钮

集合元素

$(“:button”)

:file

匹配所有上传域

集合元素

$(“:file”)