jQuery选择器.docx

prev+next

prev和next是两个同级别的元素.选中在prev元素后面的next元素.

$（"#hibiscus+img"）选在id为hibiscus元素后面的img对象.

prev~siblings

选择prev后面的根据siblings过滤的元素

注:

siblings是过滤器

$（"#someDiv~[title]"）选择id为someDiv的对象后面所有带有title属性的元素

3.基本过滤器BasicFilters

名称

说明

举例

:

first

匹配找到的第一个元素

查找表格的第一行:

$（"tr:

first"）

:

last

匹配找到的最后一个元素

查找表格的最后一行:

$（"tr:

last"）

:

not（selector）

去除所有与给定选择器匹配的元素

查找所有未选中的input元素:

$（"input:

not（:

checked）"）

:

even

匹配所有索引值为偶数的元素，从0开始计数

查找表格的1、3、5...行:

$（"tr:

even"）

:

odd

匹配所有索引值为奇数的元素，从0开始计数

查找表格的2、4、6行:

$（"tr:

odd"）

:

eq（index）

匹配一个给定索引值的元素

注:

index从0开始计数

查找第二行:

$（"tr:

eq

（1）"）

:

gt（index）

匹配所有大于给定索引值的元素

注:

index从0开始计数

查找第二第三行，即索引值是1和2，也就是比0大:

$（"tr:

gt（0）"）

:

lt（index）

选择结果集中索引小于N的elements

注:

index从0开始计数

查找第一第二行，即索引值是0和1，也就是比2小:

$（"tr:

lt

（2）"）

:

header

选择所有h1,h2,h3一类的header标签.

给页面内所有标题加上背景色:

$（":

header"）.css（"background","#EEE"）;

:

animated

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

只有对不在执行动画效果的元素执行一个动画特效:

$（"#run"）.click（function（）{

$（"div:

not（:

animated）"）.animate（{left:

"+=20"},1000）;

}）;

4.内容过滤器ContentFilters

名称

说明

举例

:

contains（text）

匹配包含给定文本的元素

查找所有包含"John"的div元素:

$（"div:

contains（'John'）"）

:

empty

匹配所有不包含子元素或者文本的空元素

查找所有不包含子元素或者文本的空元素:

$（"td:

empty"）

:

has（selector）

匹配含有选择器所匹配的元素的元素

给所有包含p元素的div元素添加一个text类:

$（"div:

has（p）"）.addClass（"test"）;

:

parent

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

查找所有含有子元素或者文本的td元素:

$（"td:

parent"）

5.可见性过滤器VisibilityFilters

名称

说明

举例

:

hidden

匹配所有的不可见元素

注:

在1.3.2版本中,hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSSvisibility属性让其不显示但是占位,则不输入hidden.

查找所有不可见的tr元素:

$（"tr:

hidden"）

:

visible

匹配所有的可见元素

查找所有可见的tr元素:

$（"tr:

visible"）

6.属性过滤器AttributeFilters

名称

说明

举例

[attribute]

匹配包含给定属性的元素

查找所有含有id属性的div元素:

$（"div[id]"）

[attribute=value]

匹配给定的属性是某个特定值的元素

查找所有name属性是newsletter的input元素:

$（"input[name='newsletter']"）.attr（"checked",true）;

[attribute!

=value]

匹配给定的属性是不包含某个特定值的元素

查找所有name属性不是newsletter的input元素:

$（"input[name!

='newsletter']"）.attr（"checked",true）;

[attribute^=value]

匹配给定的属性是以某些值开始的元素

$（"input[name^='news']"）

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

查找所有name以'letter'结尾的input元素:

$（"input[name$='letter']"）

[attribute*=value]

匹配给定的属性是以包含某些值的元素

查找所有name包含'man'的input元素:

$（"input[name*='man']"）

[attributeFilter1][attributeFilter2][attributeFilterN]

复合属性选择器，需要同时满足多个条件时使用。

找到所有含有id属性，并且它的name属性是以man结尾的:

$（"input[id][name$='man']"）

7.子元素过滤器ChildFilters

名称

说明

举例

:

nth-child（index/even/odd/equation）

匹配其父元素下的第N个子或奇偶元素

':

eq（index）'只匹配一个元素，而这个将为每一个父元素匹配子元素。

:

nth-child从1开始的，而:

eq（）是从0算起的！

可以使用:

nth-child（even）

:

nth-child（odd）

:

nth-child（3n）

:

nth-child

（2）

:

nth-child（3n+1）

:

nth-child（3n+2）

在每个ul查找第2个li:

$（"ulli:

nth-child

（2）"）

:

first-child

匹配第一个子元素

':

first'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

在每个ul中查找第一个li:

$（"ulli:

first-child"）

:

last-child

匹配最后一个子元素

':

last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

在每个ul中查找最后一个li:

$（"ulli:

last-child"）

:

only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

在ul中查找是唯一子元素的li:

$（"ulli:

only-child"）

8.表单选择器Forms

名称

说明

解释

:

input

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

查找所有的input元素:

$（":

input"）

:

text

匹配所有的文本框

查找所有文本框:

$（":

text"）

:

password

匹配所有密码框

查找所有密码框:

$（":

password"）

:

radio

匹配所有单选按钮

查找所有单选按钮

:

checkbox

匹配所有复选框

查找所有复选框:

$（":

checkbox"）

:

submit

匹配所有提交按钮

查找所有提交按钮:

$（":

submit"）

:

image

匹配所有图像域

匹配所有图像域:

$（":

image"）

:

reset

匹配所有重置按钮

查找所有重置按钮:

$（":

reset"）

:

button

匹配所有按钮

查找所有按钮:

$（":

button"）

:

file

匹配所有文件域

查找所有文件域:

$（":

file"）

9.表单过滤器FormFilters

名称

说明

解释

:

enabled

匹配所有可用元素

查找所有可用的input元素:

$（"input:

enabled"）

:

disabled

匹配所有不可用元素

查找所有不可用的input元素:

$（"input:

disabled"）

:

checked

匹配所有选中的被选中元素（复选框、单选框等，不包括select中的option）

查找所有选中的复选框元素:

$（"input:

checked"）

:

selected

匹配所有选中的option元素

查找所有选中的选项元素:

$（"selectoption:

selected"）

六jQuery选择器实验室

jQuery选择器实验室使用的是"jQuery实战"一书中的代码,感觉对于学习选择器很有帮助.

在实验室页面的"Selector"输入框中输入jQuery选择器表达式,所有匹配表达式的元素会显示红框:

如上图所示,在输入".myList"后点击"Apply",下面的输出框会显示运行结果,右侧会将选中的元素用红框显示.

代码在本章最后可以下载.

七.API文档

jQuery官方API:

中文在线API:

中文jQuery手册下载:

八.总结

本章节讲解的jQuery依然属于基础支持,所以没有太多的应用实例.虽然基础但是很难一次全部记住,jQuery选择器可以说是最考验一个人jQuery功力的地方.下一章我们讲解如何操作jQuery包装集以及动态创建新元素.

本章代码下载: