jQuery选择器

学习日记之jQuery选择器

一、基本选择器

1、id选择器

方法:$("#id")

举例:$("#box1")

2、类选择器

方法:$(".class")

举例:$(".box")

3、元素选择器

方法:$("name")

举例:$("div")

4、复合选择器

方法:$("select1,select2,……selectn")

举例：$("#box1,.box")

注意:复合选择器并不是选择上所满足select条件的元素，而是把所有匹配上条件的元素的集合返回

5、通配符选择器

方法:$("*")

二、层次选择器

1、祖先后代选择器

方法:$("ancenster descendnt")
ancenster 祖先
descendnt后代

举例:$("ul li")匹配ul下所有的li

2、父子选择器

方法:$("parent>child")

举例:$("div>button")匹配div中所有的button

3、同级选择器（后一个）

方法:$("prev+next")

举例:$("#box1+div")匹配id为box1的后面一个div元素

4、同级选择器 （后面所有）

方法:$("prev~siblings")

举例:$("div~p")匹配<div>后所有的<P>

三、简单过滤器

1、first

方法:$(":first")

举例:$("div:first")匹配第一个<div>

2、last

方法:$(":last")

举例:$("div:last")匹配最后一个<div>

3、even

方法:$(":even")

举例:$("div:even")匹配下标偶数的<div> 下标从0开始

4、odd

方法:$(":odd")

举例:$("div:odd")匹配下标奇数的<div> 

5、eq

方法:$(":eq(index)")

举例:$("div:eq(1)")匹配下标为1的<div> 下标从0开始

6、gt

方法:$(":gt(index)")

举例:$("div:gt(1)")匹配下标大于1的<div>

7、lt

方法:$(":lt(index)")

举例:$("div:lt(1)")匹配下标小于1的<div>

8、header

方法:$(":header")匹配所有标题元素

9、not(selector)

方法:$(":not(selector)")

举例:$("input:not(:checked)")匹配未被选中的Input元素

10、animated

方法:$("div:animated")匹配正在执行动画的div元素