第六章 jQuery选择器
一,jQuery选择器的概念。
1.jquery的选择器和 css 很相近
css中的选择器是用
.a{} 类选择器
#a{} 是id选择器
a{} 是标签选择器
当然 div a.a{} 也可以使用 div>a{} 来表示
2.选择器的容错性
即使页面没有这个元素,jQuery也不会报错
那么我们可以把一大堆jquery放到页面,减少了开发时间
3jquery的优势
写法简洁,处理机制完善。
二jquery的选择器类型
基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。
1、ID选择器 #id
描述:根据给定的id匹配一个元素, 返回单个元素(注:在网页中,id名称不能重复)
示例:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test") 选取 id 为 …(".test") 选取所有class为test的元素
3、元素(标签)选择器 element
描述:根据给定的元素名匹配元素,返回元素集合
示例:$(“p”) 选取所有的
元素
(
"
d
i
v
"
)
:
选
取
所
有
的
d
i
v
标
签
4
、
∗
描
述
:
匹
配
所
有
元
素
,
返
回
元
素
集
合
示
例
:
("div") :选取所有的div标签 4、* 描述:匹配所有元素,返回元素集合 示例:
("div"):选取所有的div标签4、∗描述:匹配所有元素,返回元素集合示例:("") 选取所有的元素
5、selector1,selector2,…,selectorN(并集选择器)
描述:将每个选择器匹配到的元素合并后一起返回,返回合并后的元素集合
示例:
(
"
p
,
s
p
a
n
,
p
.
m
y
C
l
a
s
s
"
)
选
取
所
有
<
p
>
,
<
s
p
a
n
>
和
c
l
a
s
s
为
m
y
C
l
a
s
s
的
<
p
>
标
签
的
元
素
集
合
二
、
层
次
选
择
器
层
次
选
择
器
根
据
层
次
关
系
获
取
特
定
元
素
。
1
、
后
代
选
择
器
示
例
:
("p,span,p.myClass") 选取所有<p>,<span>和class为myClass的<p>标签的元素集合 二、层次选择器 层次选择器根据层次关系获取特定元素。 1、后代选择器 示例:
("p,span,p.myClass")选取所有<p>,<span>和class为myClass的<p>标签的元素集合二、层次选择器层次选择器根据层次关系获取特定元素。1、后代选择器示例:(“p span”) 选取
元素里的所有的元素(注:后代选择器选择父元素所有指定选择的元素,不管是儿子级,还是孙子级)
2、子选择器
(
"
p
a
r
e
n
t
>
c
h
i
l
d
"
)
示
例
:
("parent>child") 示例:
("parent>child")示例:(“p>span”) 选择
元素下的所有元素 (注:子选择器只选择直属于父元素的子元素)
3、同辈选择器
(
"
p
r
e
v
+
n
e
x
t
"
)
描
述
:
选
取
紧
接
在
p
r
e
v
元
素
后
的
n
e
x
t
元
素
,
返
回
元
素
集
合
示
例
:
("prev+next") 描述:选取紧接在prev元素后的next元素,返回元素集合 示例:
("prev+next")描述:选取紧接在prev元素后的next元素,返回元素集合示例:(".one+p") 选取class为one的下一个
同辈元素集合
4、同辈选择器
(
"
p
r
e
v
s
i
b
l
i
n
g
s
"
)
描
述
:
选
取
p
r
e
v
元
素
后
的
所
有
s
i
b
l
i
n
g
s
元
素
,
返
回
元
素
集
合
示
例
:
("prev~siblings") 描述:选取prev元素后的所有siblings元素,返回元素集合 示例:
("prev siblings")描述:选取prev元素后的所有siblings元素,返回元素集合示例:("#two~p")选取id为two的元素后所有
同辈元素集合
三、过滤选择器
1>基本过滤选择器
1、 :first
描述:选取第一个元素,返回单个元素
示例:
(
"
p
:
f
i
r
s
t
"
)
选
取
所
有
<
p
>
元
素
中
第
一
个
<
p
>
元
素
2
、
:
l
a
s
t
描
述
:
选
取
最
后
一
个
元
素
,
返
回
单
个
元
素
示
例
:
("p:first") 选取所有<p>元素中第一个<p>元素 2、 :last 描述:选取最后一个元素,返回单个元素 示例:
("p:first")选取所有<p>元素中第一个<p>元素2、:last描述:选取最后一个元素,返回单个元素示例:(“p:last”) 选取所有
元素中最后一个
元素
3、 :not(selector)
描述:去除所有与给定选择器匹配的元素,返回元素集合
示例:
(
"
i
n
p
u
t
:
n
o
t
(
.
m
y
C
l
a
s
s
)
"
)
选
取
c
l
a
s
s
不
是
m
y
C
l
a
s
s
的
<
i
n
p
u
t
>
元
素
4
、
:
e
v
e
n
描
述
:
选
取
索
引
是
偶
数
的
所
有
元
素
,
索
引
从
0
开
始
,
返
回
元
素
集
合
5
、
:
o
d
d
描
述
:
选
取
索
引
是
奇
数
的
所
有
元
素
,
索
引
从
0
开
始
,
返
回
元
素
集
合
6
、
:
e
q
(
i
n
d
e
x
)
描
述
:
选
取
索
引
等
于
i
n
d
e
x
的
元
素
,
索
引
从
0
开
始
,
返
回
单
个
元
素
7
、
:
g
t
(
i
n
d
e
x
)
描
述
:
选
取
索
引
大
于
i
n
d
e
x
的
元
素
,
索
引
从
0
开
始
,
返
回
元
素
集
合
8
、
:
l
t
(
i
n
d
e
x
)
描
述
:
选
取
索
引
小
于
于
i
n
d
e
x
的
元
素
,
索
引
从
0
开
始
,
返
回
元
素
集
合
9
、
:
f
o
c
u
s
描
述
:
选
取
当
前
获
取
焦
点
的
元
素
2
>
内
容
过
滤
选
择
器
1
、
:
c
o
n
t
a
i
n
s
(
t
e
x
t
)
描
述
:
选
取
含
有
文
本
内
容
为
t
e
x
t
的
元
素
,
返
回
元
素
集
合
示
例
:
("input:not(.myClass)") 选取class不是myClass的<input>元素 4、 :even 描述:选取索引是偶数的所有元素,索引从0开始,返回元素集合 5、 :odd 描述:选取索引是奇数的所有元素,索引从0开始,返回元素集合 6、 :eq(index) 描述:选取索引等于index的元素,索引从0开始,返回单个元素 7、 :gt(index) 描述:选取索引大于index的元素,索引从0开始,返回元素集合 8、 :lt(index) 描述:选取索引小于于index的元素,索引从0开始,返回元素集合 9、 :focus 描述:选取当前获取焦点的元素 2>内容过滤选择器 1、:contains(text) 描述:选取含有文本内容为text的元素,返回元素集合 示例:
("input:not(.myClass)")选取class不是myClass的<input>元素4、:even描述:选取索引是偶数的所有元素,索引从0开始,返回元素集合5、:odd描述:选取索引是奇数的所有元素,索引从0开始,返回元素集合6、:eq(index)描述:选取索引等于index的元素,索引从0开始,返回单个元素7、:gt(index)描述:选取索引大于index的元素,索引从0开始,返回元素集合8、:lt(index)描述:选取索引小于于index的元素,索引从0开始,返回元素集合9、:focus描述:选取当前获取焦点的元素2>内容过滤选择器1、:contains(text)描述:选取含有文本内容为text的元素,返回元素集合示例:(“p:contains(‘我’)”) 选取含有文本“我”的元素
2、:empty
描述:选取不包含子元素或者文本元素的空元素,返回元素集合
示例:
(
"
p
:
e
m
p
t
y
"
)
选
取
不
包
含
子
元
素
或
者
文
本
元
素
的
空
<
p
>
元
素
(
<
p
>
<
/
p
>
)
3
、
:
h
a
s
(
s
e
l
e
c
t
o
r
)
描
述
:
选
取
含
有
选
择
器
所
匹
配
的
元
素
的
元
素
,
返
回
元
素
集
合
示
例
:
("p:empty") 选取不包含子元素或者文本元素的空<p>元素(<p></p>) 3、:has(selector) 描述:选取含有选择器所匹配的元素的元素,返回元素集合 示例:
("p:empty")选取不包含子元素或者文本元素的空<p>元素(<p></p>)3、:has(selector)描述:选取含有选择器所匹配的元素的元素,返回元素集合示例:(“p:has§”) 选取含有
元素的
元素(
)
4、:parent
描述:选取含有子元素或者文本的元素,返回元素集合
示例:
(
"
p
:
p
a
r
e
n
t
"
)
选
取
含
有
子
元
素
或
者
文
本
元
素
的
<
p
>
元
素
(
<
p
>
<
p
/
>
<
/
p
>
或
者
<
p
>
文
本
<
/
p
>
)
3
>
可
见
性
过
滤
选
择
器
1
、
:
h
i
d
d
e
n
描
述
:
选
取
所
有
不
可
见
的
元
素
,
返
回
元
素
集
合
2
、
:
v
i
s
i
b
l
e
描
述
:
选
取
所
有
可
见
的
元
素
,
返
回
元
素
集
合
4
>
属
性
过
滤
选
择
器
(
返
回
元
素
集
合
)
1
、
[
a
t
t
r
i
b
u
t
e
]
示
例
:
("p:parent") 选取含有子元素或者文本元素的<p>元素(<p><p/></p>或者<p>文本</p>) 3>可见性过滤选择器 1、:hidden 描述:选取所有不可见的元素,返回元素集合 2、:visible 描述:选取所有可见的元素,返回元素集合 4>属性过滤选择器(返回元素集合) 1、[attribute] 示例:
("p:parent")选取含有子元素或者文本元素的<p>元素(<p><p/></p>或者<p>文本</p>)3>可见性过滤选择器1、:hidden描述:选取所有不可见的元素,返回元素集合2、:visible描述:选取所有可见的元素,返回元素集合4>属性过滤选择器(返回元素集合)1、[attribute]示例:(“p[id]”) 选取拥有id属性的p元素
2、[attribute=value]
示例:
(
"
i
n
p
u
t
[
n
a
m
e
=
t
e
x
t
]
"
)
选
取
拥
有
n
a
m
e
属
性
等
于
t
e
x
t
的
i
n
p
u
t
元
素
3
、
[
a
t
t
r
i
b
u
t
e
!
=
v
a
l
u
e
]
示
例
:
("input[name=text]") 选取拥有name属性等于text的input元素 3、[attribute!=value] 示例:
("input[name=text]")选取拥有name属性等于text的input元素3、[attribute!=value]示例:(“input[name!=text]”) 选取拥有name属性不等于text的input元素
4、[attribute^=value]
示例:
(
"
i
n
p
u
t
[
n
a
m
e
=
t
e
x
t
]
"
)
选
取
拥
有
n
a
m
e
属
性
以
t
e
x
t
开
始
的
i
n
p
u
t
元
素
5
、
[
a
t
t
r
i
b
u
t
e
("input[name^=text]") 选取拥有name属性以text开始的input元素 5、[attribute
("input[name=text]")选取拥有name属性以text开始的input元素5、[attribute=value]
示例:
(
"
i
n
p
u
t
[
n
a
m
e
("input[name
("input[name=text]") 选取拥有name属性以text结束的input元素
6、[attribute=value]
示例:
(
"
i
n
p
u
t
[
n
a
m
e
∗
=
t
e
x
t
]
"
)
选
取
拥
有
n
a
m
e
属
性
含
有
t
e
x
t
的
i
n
p
u
t
元
素
7
、
[
a
t
t
r
i
b
u
t
e
=
v
a
l
u
e
]
示
例
:
("input[name*=text]") 选取拥有name属性含有text的input元素 7、[attribute~=value] 示例:
("input[name∗=text]")选取拥有name属性含有text的input元素7、[attribute =value]示例:(“input[class~=text]”) 选取拥有class属性以空格分割的值中含有text的input元素
8、[attribute1][attribute2][attributeN]
描述:合并多个属性过滤选择器
5>表单对象属性过滤选择器(返回元素集合)
1、:enabled
描述:选取所有可用元素
2、:disabled
描述:选取所有不可用元素
3、:checked
描述:选取所有被选中的元素(单选框,复选框)
示例:
(
"
i
n
p
u
t
:
c
h
e
c
k
e
d
"
)
选
取
所
有
被
选
中
的
<
i
n
p
u
t
>
元
素
4
、
:
s
e
l
e
c
t
e
d
描
述
:
选
取
所
有
被
选
中
的
选
项
元
素
(
下
拉
列
表
)
示
例
:
("input:checked") 选取所有被选中的<input>元素 4、:selected 描述:选取所有被选中的选项元素(下拉列表) 示例:
("input:checked")选取所有被选中的<input>元素4、:selected描述:选取所有被选中的选项元素(下拉列表)示例:(“select option:selected”) 选取所有被选中的选项元素
四、表单选择器(返回元素集合,使用相似)
1、:text
描述:选择所有的单行文本框
示例:$(":text")选取所有的单行文本框
2、:password
描述:选择所有的密码框
3、:button
描述:选择所有的按钮
4、:checkbox
描述:选择所有的多选框
注意:编写选择器时要注意特殊符号和空格。