jQuery Review Powerful JQuery Selector_jquery

选择表达式

说明

举例

#id

根据给定的ID匹配一个元素用#

$("#testDiv2")  获取ID为testDiv2的元素

.class

根据给定的类匹配元素(也就是取class的值)用.

$(".myDiv")    获取class为myDiv的一组元素

element

根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等)

$("div")    获取所有的div元素

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开

$("#testDiv2,p")

$("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素

*

选择所有的元素

$("*")

选择表达式

说明

举例

:first

匹配找到的第一个元素

$("div:first")

:last

匹配找到的最后一个元素

$("div:last")

:eq(index)

匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始

$("div:eq(1)")

:gt(index)

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

$("div:gt(0)")    查找第1个以后的元素

:lt(index)

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

$("div:lt(2)")     查找第一行和第二行的元素

:even

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

$("div:even")
查找第1,3,5个div

:odd

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

$("div:odd")
查找第2,4个div

:not(selector)

去除所有与给定选择器匹配的元素
selector为表达式,可以是属性里面的一个值

$("input:not(:checked)")
查找所有未选中的input 元素[注 :checked为自定义筛选选择器,后面会讲到]

:header

匹配如 h1, h2, h3之类的标题元素

$(":header").css("background", "#EEE");
添加样式

:animated

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

暂无例子

选择表达式

说明

举例

:contains(text)

匹配包含给定文本的元素,只要里面出现即可

$("p:contains('段落')")
找带有段落字样的p元素

:empty

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

$("div:empty")

:has(selector)

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

$("div:has('p')")

:parent

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

$("div:parent")

Selector

Description

Example

:first-child

Match the first child element

$("ul li:first-child")//Find the first li in each ul

:last-child

matches the last child element

$("ul li:last-child")//Find the last li in each ul

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

matches the Nth child or odd-even element under its parent element

':eq(index)' only matches one element, while this one will match child elements for every parent element. :nth-child starts from 1, and :eq() starts from 0!

You can use:
nth-child(even)//even rows

:nth-child(odd)//odd rows
:nth-child(3n):nth-child(2)//index 2
:nth-child(3n 1)
:nth-child(3n 2)

$("ul li:nth-child(2)")//Find the 2nd li in each ul

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

matches the Nth child or odd-even element under its parent element

$("ul li:nth-child(2)")//Find the 2nd li in each ul

:only-child

If an element is the only child element of the parent element, it will be matched

If the parent element contains other elements, it will not be matched.

$("ul li:only-child")//Find li which is the only child element in ul

Selector

Description

Example

:hidden

matches all invisible elements. If the type attribute of the input element is "hidden", it will also be matched to

$("div:hidden")

:visible

Match all visible elements

$("div:visible")//Elements to match

$(".divH:visible")//Class to match