3.2.3 以CSS选择器访问DOM元素
每个CSS 选择器可以对应一个或多个HTML 元素,如果以该CSS 选择器作为参数,$(selector)将可以获取由该选择器对应的一个或多个HTML元素包装成的jQuery对象。
jQuery选择符
与前面的CSS选择器类似的是,$()可支持如下几种参数形式。
id选择符
| 选择符 |
描述 |
#id |
返回由指定id对应的HTML元素包装成的jQuery对象。类似于CSS中id选择器的功能。 |
标签名选择符
| 选择符 |
描述 |
tagName |
返回由所有tagName标签对应的所有HTML元素包装成的jQuery对象数组。类似于CSS中元素选择器的功能。 |
标签名属性名选择符
| 选择符 |
描述 |
tagName[attribute] |
返回由tagName标签生成且由包含attribute属性的所有HTML元素包装成的jQuery对象数组。以下几个都类似于CSS中属性选择器的功能。 |
标签名属性名属性值选择符
| 选择符 |
描述 |
tagName[attribute=value] |
返回由tagName标签生成且由attribute属性**等于value**的所有HTML元素包装成的jQuery对象。 |
tagName[attribute!=value] |
返回由tagName标签生成且由attribute属性**不等于value**的所有HTML元素包装成的jQuery对象。 |
tagName[attribute^=value] |
返回由tagName标签生成且由attribute属性值以value开头的所有HTML元素包装成的jQuery对象。 |
tagName[attribute$=value] |
返回由tagName标签生成且由attribute属性值以value结尾的所有HTML元素包装成的jQuery对象。 |
tagName[attribute*=value] |
返回由tagName标签生成且由attribute属性值包含value的所有HTML元素包装成的jQuery对象。 |
tagName[attributeFilter1][attributeFilter2]... |
返回由tagName标签生成且由具有attributeFilter1、attributeFilter2等任意一个属性特征的所有HTML元素包装成的jQuery对象。其中,attributeFilter1、attributeFilter2支持前面任意一个有效的属性定义。 |
类选择符
| 选择符 |
描述 |
.className |
返回由所有class属性为className的所有HTML元素包装成的jQuery对象。类似于CSS中class选择器的功能。 |
后代选择符
| 选择符 |
描述 |
outerSelector空格innerSelector |
返回由outerSelector选择器之内的所有innerSelector(不管处于多少层之内)对应的HTML元素包装成的jQuery对象。类似于CSS中的包含选择器的功能。 |
子代选择符
| 子代选择符 |
描述 |
parentSelector>childSelector |
返回由直接位于parentSelector选择器之内第一层childSelector对应的HTML元素包装成的jQuery对象。类似于CSS中的子选择器的功能。 |
兄弟选择符
| 兄弟选择符 |
描述 |
prevSelector+nextSelector |
返回由紧跟在prevSelector之后的第一个nextSelector对应的HTML元素包装成的jQuery对象。类似于CSS中兄弟选择器的功能。 |
prevSelector~siblingsSelector |
返回由位于prevSelector之后的所有siblingsSelector对应的HTML元素包装成的jQuery对象。类似于CSS中兄弟选择器的功能。 |
组合选择符
| 选择符 |
描述 |
selector1,selector2,selector3,...,selectorN |
同时指定多个选择器,返回由匹配任何一个选择器的所有HTML元素包装成的jQuery对象。类似于CSS中选择器组合的功能。 |
星号选择符
| 星号选择符 |
描述 |
* |
返回由所有HTML元素包装成的jQuery对象。相当于CSS中通配符选择器的功能,这个不常用。 |
标题选择符
| 选择符 |
描述 |
:header |
返回由h1、h2、h3之类的标题元素包装成的jQuery对象。 |
根选择符
| 选择符 |
描述 |
:root |
返回该文档的根元素。HTML 的根元素总是<html>元素,因此$(":root")总是返回HTML文档的根元素。 |
例如如下代码用于将整个HTML文档背景设为蓝色: |
|
1
| $(": root"). css("background-color","blue");
|
上面的很多选择器都可同时匹配多个HTML元素,而使用上面这些选择器作为$()函数的参数时
$()函数都将简单地返回jQuery对象。这是因为jQuery对象不只可以包装单个的DOM元素,也可包装多个DOM元素,此时的jQuery对象有点类似于数组。如果程序直接操作包装多个DOM元素的jQuery对象,那么这些DOM元素都会随之改变。
程序示例
以下程序示范了上面几种选择器的用法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| <!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 使用jQuery()函数 </title>
<style type="text/css">
.test {
font-size: 20pt;
}
</style>
</head>
<body>
<ul>
<li id="java">测试ID选择符符</li>
<li id="javaee" class="test">测试类选择符</li>
<li id="ajax">测试子代选择符</li>
<li id="xml">测试组合选择符1</li>
<li id="ejb">经典Java EE企业应用实战</li>
<li>
<span id="android">测试组合选择符2</span>
</li>
</ul>
<script type="text/javascript" src="../jquery-3.1.1.js">
</script>
<script type="text/javascript">
$("#java").append("<b> 是id为java的元素</b>");
$("li[id]").css("background-color", "#bbbbff");
$(".test").css("border", "3px dotted black");
$("#xml,#android").append("<b>是id为xml、android其中之一的元素</b>");
$("ul #android").append("<br /><b>位于ul之内、id为android的子元素</b>");
$("ul>#ajax").append("<b>位于ul之内、id为ajax的子元素</b>")
.css("border", "2px solid black");
$("#ajax~li").css("background-color", "#ff5555");
</script>
</body>
</html>
|
该程序示范了$()所支持的几种选择器的用法。在浏览器中浏览该页面,将可看到如图3.4所示效果。
上面介绍了$()函数的基本用法。可以看出:
$()函数支持许多选择器都会一次返回多个HTML元素对应的jQuery对象,jQuery还支持在原有的选择器上增加额外的限定。