第三章 jQuery操作DOM_jquery操作dom第三章-CSDN博客

本文链接：https://blog.csdn.net/zuoanlove/article/details/7495459

DOM(Document Object Model,文档对象模型)为文档提供了一种结果化表示方法，通过该方法可以改变文档的内容和展示形式。

3.1 DOM基础

示例3-1 创建一个DOM页面文档

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM树状文档</title>
<style>
	body{font-size:13px}
	table,div,p,ul{width:280px;border:solid 1px #666;margin:10px 0px 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>

3.2 访问元素

3.2.1 元素属性操作

在jQuery中，通过attr()方法可以对元素属性执行获取和设置操作，而removeAttr()方法则可以轻松删除某一指定的属性。

1、获取元素的属性

获取元素属性的语法如下：

attr(name)

其中，参数name表示属性的名称。

示例3-2 通过attr(name)方法获取元素的属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>获取元素的属性</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<style type="text/css">
	body{font-size:12px}
	div{float:left;padding-left:10px}
	img{border:solid 1px #ccc;padding:3px;float:left}
</style>
<script type="text/javascript">
	$(function(){
		var strAt = $("img").attr("src");//属性值一
		strAt+="<br/><br/>"+
		$("img").attr("title");//属性值二
		$("#divAlt").html(strAt);//显示在页面中
	})
</script>
</head>
<body>
	<img alt="" title="这是一幅风景画" src="../images/3/img01.jpg"></img>
	<div id="divAlt"></div>
</body>
</html>

2、设置元素的属性

在页面中，attr()方法不仅可以获取元素的属性，还可以设置元素的属性，其设置属性语法格式如下所示：

attr(key,value)

其中，key表示属性名称，value表示属性的值。如果要设置多个属性，也可以通过attr()方法实现，其语法格式如下：

attr({key0:value0,key1:value1})

示例3-3 设置元素的属性（一）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>设置元素的属性</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
<style type="text/css">
	body{font-size:12px}
	.clsSpn{float:left;padding-top:10px;padding-left:10px}
	.clsImg{border:solid 1px #ccc;padding:3px;float:left}
</style>
<script type="text/javascript">
	$(function(){
		$("img").attr("src","../images/3/img01.jpg");//设置src属性
		$("img").attr("title","这是一幅风景画");//设置title属性
		$("img").attr({"src":"../images/3/img02.jpg","title":"这是一幅风景画"})//同时设置两个属性
		$("img").addClass("clsImg");//增加样式
		$("span").html("加载完毕");//显示加载状态
	})
</script>
</head>
<body>
	<img alt="" src="../images/3/img03.jpg" style="float:left"></img>
	<span class="clsSpn">正在加载图片</span>
</body>
</html>

除此之外attr()方法还可以绑定一个function()函数，通过该函数返回的值作为元素的属性值，其语法格式如下表示

attr(key,function(index))

其中，参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。

示例3-4 设置元素的属性(二)

功能描述：在页面中，通过function()随机函数返回一个随机数字，依据该数字组成一个字符串作为标记<img>属性src的值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>设置元素的属性</title>
<script language="javascript" type="text/javascript" src="../../js/jquery/jquery-1.4.2.min.js"></script>
<style type="text/css">
	body{font-size:12px}
	。clsSpn{float:left;padding-top:10px;padding-left:10px}
	.clsImg{border:solid 1px #ccc:padding:3px;float:left}
</style>
<script type="text/javascript">
	$(function(){
		$("img").attr("src",function(){
			return "../../images/3/img0"+Math.floor(Math.random()*2+1)+".jpg"
		});//设置src属性
		$("img").attr("title","这是一幅风景画");//设置title属性
		$("img").addClass("clsImg");//增加样式
	})
</script>
</head>
<body>
	<img alt="" src="../../images/3/img03.jpg" style="float:left"></img>
</body>
</html>

3.删除元素的属性

jQuery中通过attr()方法设置元素属性后，使用removeAttr()方法可以将元素的属性删除，其使用的语法格式为:

removeAttr(name)

其中，参数name为元素属性的名称

例如，可以通过如下的代码删除标签<img>中的src属性：

$("img").removeAttr("src");

3.2.2 元素内容操作

在jQuery中，操作元素内容的方法包括html()和text()，前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中的innerText属性，即获取或设置元素的文本内容。二者的格式与功能的区别如下：

语法格式	参数说明	功能描述
html()	无参数	用于获取元素的HTML内容
html(var)	var参数为元素的HTML内容	用于设置元素的HTML内容
text()	无参数	用于获取元素的文本内容
text(var)	var参数为元素的文本内容	用于设置元素的文本内容

说明：html()方法仅支持XHTML的文档，不能用于XML文档，而text()则即支持HTML文档，也支持XML文档。

示例3-5 设置或获取元素的内容

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>设置或获取元素的内容</title>
<script language="javascript" type="text/javascript" src="../../js/jquery/jquery-1.4.2.min.js"></script>
<style type="text/css">
	body{font-size:12px}
	div{border:solid 1px #666;padding:5px;width:220px;margin:5px}
</style>
<script type="text/javascript">
	$(function(){
		var strHTML = $("#divShow").html();//获取HTML内容
		var strText = $("#divShow").text();//获取文件内容
		$("#divHTML").html(strHTML);//设置HTML内容
		$("#divText").text(strText);//设置文本内容
	})
</script>
</head>
<body>
	<div id="divShow"><b><i>Write Less Do More</i></b></div>
	<div id="divHTML"></div>
	<div id="divText"></div>
</body>
</html>

3.2.3 获取或设置元素值

在jQuery中，如果要获取元素的值，是通过val()方法实现的，其语法格式如下所示：

val(val)

其中不带参数val，则是获取元素的值，反之，则是将参数val的值赋给某元素，即设置元素的值。

另外，通过val()方法还可以获取select标记中的对个选项值，其语法格式如下所示：

val().join(",")

示例3-6 设置或获取元素的值