jQuery温习篇强大的JQuery选择器_jquery

选择表达式

说明

举例

#id

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

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

.class

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

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

element

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

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

selector1,selector2,selectorN

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

$("#testDiv2,p")

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

*

选择所有的元素

$("*")

选择表达式

说明

举例

:first

匹配找到的第一个元素

$("p:first")

:last

匹配找到的最后一个元素

$("p:last")

:eq(index)

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

$("p:eq(1)")

:gt(index)

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

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

:lt(index)

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

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

:even

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

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

:odd

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

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

:not(selector)

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

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

:header

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

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

:animated

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

暂无例子

选择表达式

说明

举例

:contains(text)

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

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

:empty

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

$("p:empty")

:has(selector)

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

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

:parent

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

$("p:parent")

选择器

说明

举例

:first-child

匹配第一个子元素

$("ul li:first-child")//在每个 ul 中查找第一个 li

:last-child

匹配最后一个子元素

$("ul li:last-child")//在每个 ul 中查找最后一个 li

: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)//索引为2的
:nth-child(3n+1)
:nth-child(3n+2)

$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

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

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

$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

:only-child

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

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

$("ul li:only-child")//在 ul 中查找是唯一子元素的 li

选择器

说明

举例

:hidden

匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

$("p:hidden")

:visible

匹配所有的可见元素

$("p:visible")//元素来匹配

$(".pH:visible")//根据class来匹配