0%

3.2.3 以CSS选择器访问DOM元素

3.2.3 以CSS选择器访问DOM元素

每个CSS 选择器可以对应一个或多个HTML 元素,如果以该CSS 选择器作为参数,$(selector)将可以获取由该选择器对应的一个或多个HTML元素包装成的jQuery对象。

jQuery选择符

与前面的CSS选择器类似的是,$()可支持如下几种参数形式。

id选择符

选择符 描述
#id 返回由指定id对应的HTML元素包装成的jQuery对象。类似于CSSid选择器的功能。
### 标签名选择符 ###
选择符 描述
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标签生成且由具有attributeFilter1attributeFilter2任意一个属性特征的所有HTML元素包装成的jQuery对象。其中,attributeFilter1attributeFilter2支持前面任意一个有效的属性定义。

类选择符

选择符 描述
.className 返回由所有class属性为className的所有HTML元素包装成的jQuery对象。类似于CSSclass选择器的功能。
### 后代选择符 ###
选择符 描述
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">
// 1.获取id为java的元素
$("#java").append("<b> 是id为java的元素</b>");

// 2.获取所有包含id属性的<li.../>元素,为它们增加背景色
$("li[id]").css("background-color", "#bbbbff");

// 3.获取class属性为test的元素,并为它们增加边框
$(".test").css("border", "3px dotted black");

// 4.同时获取id为xml、android的元素
$("#xml,#android").append("<b>是id为xml、android其中之一的元素</b>");

// 5.获取ul之内,id为android的元素
$("ul #android").append("<br /><b>位于ul之内、id为android的子元素</b>");

// 6.获取ul之内,id为ajax的直接子元素
$("ul>#ajax").append("<b>位于ul之内、id为ajax的子元素</b>")
.css("border", "2px solid black");

// 7.获取id为ajax之后的所有li元素
$("#ajax~li").css("background-color", "#ff5555");
</script>
</body>
</html>

该程序示范了$()所支持的几种选择器的用法。在浏览器中浏览该页面,将可看到如图3.4所示效果。
上面介绍了$()函数的基本用法。可以看出:

$()函数支持许多选择器都会一次返回多个HTML元素对应的jQuery对象,jQuery还支持在原有的选择器上增加额外的限定。

原文链接: 3.2.3 以CSS选择器访问DOM元素