jquery奇偶选择器_一文吃透jQuery选择器!

1 jQuery选择器

jQuery选择器用于选择DOM元素进行相应操作,允许通过多种方式选择,包括标签名,属性名,类名,id等对元素进行选择,基于CSS选择器.jQuery中所有的选择器都以$符号开头,后面加一对括号. jQuery选择器可以分为基本选择器,层次选择器,过滤选择器与表单选择器.

2 基本选择器

基本选择器可以分成四个:id选择器

元素选择器

类选择器

通配符选择器

组合选择器

2.1 id选择器

id选择器根据给定的id匹配一个元素,以

#

开头,如有:

则选择器

$("#div1")

会选择

如果id中含有特殊字符,比如点:

则需要使用双反斜杠转义:

$("#div1\\.1\\.1")

2.2 元素选择器

根据元素的标签名查找所有符合的元素.假设有:

1

2

3

选择器

$("div")

会选择所有div元素.

2.3 类选择器

根据给定的css类名匹配元素,以

.

开头.如有:

选择器

$(".class1")

会选择:

选择器

$(".class2")

会选择:

2.4 通配符选择器

选择所有的元素.

div

p

span

$("*")

会显示

也就是说整个都在选择范围内,不仅仅是

. 若要选择内的元素,可用

$("body *")

2.5 组合选择器

组合选择器就是多个选择器的组合,用

,

分隔每一个选择器,如有:

$("#div1,p,.class2")

会选择

3 层级选择器

层级选择器共有四种:后代选择器

子代选择器

相邻选择器

兄弟选择器.

3.1 后代选择器

根据祖先元素选择所有的后代元素,使用空格分隔,如有

$("#div1 div")

会选择

3.2 子代选择器

选择给定父元素下的所有子元素,使用

>

分隔,同样上面的例子:

$("#div1>div")

会选择

两者的区别在于后代选择器会选择所有的后代,不管里面有多少后代(层),而子选择器只会选择直接后代,也就是只选择"一代"后代(层).

3.3 相邻选择器

选择紧接在指定元素后面的元素,用

+

分隔,如有

$("#div1+p")

会选择

可用

.next()

代替,如上面的例子可以变为

$("#div1").next()

3.4 兄弟选择器

选择之后的所有兄弟元素,用

~

分隔,如有

则

$("div~p")

会选择

可用

.nextAll()

代替,如上面的例子可以表示为:

$("div").nextAll("p")

如果没有加上p选择器:

$("div").nextAll()

会选择

等价于

$("div~*")

与相邻选择器的区别:兄弟选择器会选择后面所有的兄弟,而相邻选择器只选择第一个兄弟.

4 过滤选择器

过滤选择器种类最多,可以分为:基本过滤器

内容过滤器

可见性过滤器

属性过滤器

子元素过滤器

表单对象属性过滤器

下面一个个进行说明.

4.1 基本过滤器

根据某类过滤规则进行选择,以

:

开头.

4.1.1 两端类

html:

选择器

$("div>p:first")

$("div>p:last")

4.1.2 范围索引类

注意索引从0开始,要与下面的:nth-child/:nth-last-child/:nth-of-type/:n-last-of-type区分. html:

选择器

$("div>p:eq(3)")

$("div>p:lt(2)")

$("div>p:gt(4)")

4.1.3 奇偶类

选择索引值为奇/偶的元素,从0开始计数.

html:

选择器:

$("div>p:odd")

$("div>p:even")

odd为什么是246?even为什么是135? 难道结果错了?

并不是,下标从0开始计数,下标为0的

的id为p1,算进去偶数里了.

4.1.4 其他

挑取一些简单演示,html:

选择器:

$(":header")

$(":root div")

$("div:not(:lang(zh-CN))")

4.2 内容过滤器

四种:

html:

123

123

选择器:

$("body *:contains(123)")

$("body *:has(#div3)")

$("body *:empty")

$("div:parent")

4.3 可见性过滤器

html:

选择器:

$("body *:hidden");

$("body *:visible");

4.4 属性过滤器

属性过滤器针对元素的属性进行过滤,包括有没有该属性,该属性的值,以某些值开头/结尾,包含某些值等,使用

[]

表示属性过滤器.

html:

选择器:

$("[id]")

$("[id$=3]")

$("body *[name!=div2]")

$("body *[name*=div]")

4.5 子元素过滤器

可以按照索引顺序(即第一个,倒数第几个等)或者按照类型或者按照唯一性对子元素进行过滤.

4.5.1 索引过滤器

4.5.1.1 first-child与last-child

先来看看first-child与last-child:

选择器:

$("div p:first-child")

$("div p:last-child")

注意与:first/:last的区别,:first/:last只会选择整个父级元素的第一个/最后一个元素,但是:first-child/:last-child会选择每个父级元素的第一个/最后一个元素. :first/:last把所有符合的元素看作一个整体,即使其中有并列的父级元素,而:first-child/:last-child把每个父级元素单独看待,选择每个父级元素的第一个/最后一个元素.

4.5.1.2 nth-child与nth-last-child(1.9+)

nth-child选择父元素下第n个元素,注意,从1开始计数.

选择器:

$("div p:nth-child(3)")

注意与:eq的区别,有点类似:first/:first-child的区别,:eq会把所有符合条件的元素看作一个整体,而且不要忘记:eq是从0开始计数.

另一方面,nth-child支持奇偶与代数表达式,比如:

选择器:

$("div p:nth-child(odd)")

$("div p:nth-child(even)")

$("div p:nth-child(3n+1)")

$("div p:nth-child(4n-3)")

计数也是从1开始. nth-last-child与nth-child类似,需要1.9以上的版本,看名字就知道,是选择倒数第n个的,同样支持奇偶与代数表达式.

$("div p:nth-last-child(2)")

$("div p:nth-last-child(odd)")

$("div p:nth-last-child(even)")

$("div p:nth-last-child(3n+1)")

对于nth-last-child的odd/even/代数表达式来说,从最后一个符合条件的开始选择,但是按原来的顺序排列.

4.5.2 类型过滤器(1.9+)

有四种::first-of-type

:last-of-type

:nth-of-type

:nth-last-of-type

first-of-type会选择符合条件的元素的父元素的第一个该类型的子元素. 例如,

选择器:

$("p:first-of-type")

若使用id选择器:

$("#p2:first-of-type")

则结果为空.

为什么? 因为此时选择的是id为p2的元素,但是这个

的前面有一个

也就是说

不是第一个孩子,因此选择为空,此时若把第一个孩子注释:

则

$("#p2:first-of-type")

会选择

多个父级元素也是一样的道理:

$(".a:first-of-type")

last-of-type/nth-of-child/nth-last-of-type类似,要注意的是nth-of-child/nth-last-of-type都支持奇偶与代数表达式,计数从1开始.

4.5.3 唯一过滤器

两种:only-child

only-of-type(1.9+)

如果某个元素是它父元素的唯一子元素,则only-child会选择该(子)元素.

选择器

$("div p:only-child")

会选择

注意文本并不会影响选择的结果,也就是说,改成

456

123

456

后,选择器不变,选择的结果只是p里面多了文字:

而如果某个元素的父元素只有唯一一个该元素类型的子元素,则only-of-type会选择该元素,注意是类型,不是数量. 上面的only-child指的是数量,也就是只有一个孩子,这里only-of-type指的是类型,只有一个这种类型的孩子,而不管孩子数量.

$("div p:only-of-type")

会选择

而如果选择器换成only-child:

$("div p:only-child")

则会选择

4.6 表单对象属性过滤器

选择以下三种状态的元素:可用

不可用

选中

$("body *:enabled")

$(":disabled")

$(":selected")

$(":checked")

5 表单选择器

5.1 文本框类

5.2 选择框类

5.3 按钮类

5.4 其他

5.5 例子

$(":text")

$(":password")

$(":radio")

$(":checkbox")

$(":submit")

$(":reset")

$(":button")

$(":image")

$(":file")

6 总结

jQuery选择器其实很简单的哈哈.

如果觉得有用或者喜欢请点个赞,谢谢.