jQuery入门教程笔记7

发表于 更新于 Disqus：

这是《jQuery入门教程笔记》的第七篇，这一篇将开始新的一章，操作DOM。

对于DOM的解释：当我们创建一个页面并加载到Web浏览器时，DOM模型则根据该页面的内容创建了一个文档文件；单词Object即对象，是指具有独立特性的一组数据集合，例如，我们把新创建的页面文档称之为文档对象，与对象相关联的特征称之为对象属性，访问对象的函数称之为对象方法；单词“Model”即模型，在页面文档中，通过树状模型展示页面的元素和内容，其展示的方式则是通过节点（node）来实现的。让我们来看个例子：

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>DOM演示</title>
	<style type="text/css">
		body{
			font-size:13px;
		}
		table,div,p,ul{
			width:280px;
			border:solid 1px #666;
			margin:10px 0px;
			padding:0px;
			background-color:#eee;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<td>Td1</td>
		</tr>
		<tr>
			<td>Td2</td>
		</tr>
	</table>
	<div>Div</div>
	<p>P</p>
	<div>
		<span>Span</span>
	</div>
	<ul>
		<li>Li1</li>
		<li>Li2</li>
	</ul>
</body>
</html>

一、访问元素

叙述 方法 语法
元素属性操作 获取和设置元素属性：attr()

删除某一属性：removeAttr()

 获取：attr(name)

例如：$(“img”).attr(“src”)//获取img标签的src属性值

设置：attr(key,value)//key表示属性的名称,value表示属性的值，当value是函数的时候，函数的返回值将作为value值

attr(key0:value0,key1:value1)//可以一次设置多组

例如：$(“img”).attr(“title”,”domyself”)

$(“img”).attr(title:”domyself”,src:”/images/1.jpg”)

删除:removeAttr(name)

例如：$(“img”).removeAttr(“src”);
元素内容操作 html()和text() 1、html()，用于获取元素的HTML内容

2、html(val)，用于设置元素的HTML内容

3、text()，用于获取元素的文本内容

4、text(val)，用于设置元素的文本内容

说明：html()方法仅支持XHTML的文档，不能用于XML文档，而text()则既支持HTML文档，也支持XML文档。
获取或设置元素值 val(val)

val().join(“,”)

 获取：val()，相当于attr("value")的作用

使用val().join(“,”)可以获取一组值，并用“,”隔开，分隔符可以更换

赋值：val(val),val可以为数组
元素样式操作 css(name,value)

addClass(class)

toggleClass(class)

removeClass([class])

 css(name,value)，直接修改某项css的值

addClass(class)，添加一个class类别，可以用英文逗号隔开添加多个

toggleClass(class)，当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别

removeClass([class])，如果不给参数则是清空所有class，可以添加多个class，需要用逗号隔开