0%

3.4.3 操作属性的相关方法

发表于 更新于 分类于 ， ，

3.4.3 操作属性的相关方法

下面这组方法是操作DOM对象属性的通用方法,可以操作DOM对象的通用属性,例如title、alt、src等。

操作Attribute属性的方法

获取Attribute属性的attr方法

方法 描述
attr(name) 访问jQuery 对象里第一个元素的name 属性。如果jQuery 对象里包含的DOM对象都没有name属性,则该方法返回undefined。name可以是title、alt、src、href等属性。

设置Attribute属性的attr方法

方法 描述
attr(map) 用于为jQuery对象里的所有DOM对象同时设置多个属性。其中map是一个形如{name1:value1,name2:value2...}的对象,例如{"src":"logo.jpg"}。
attr(name,value) 用于为jQuery对象里的所有DOM 对象设置单个属性。其中name是需要设置的属性名,value是需要设置的属性值。
attr(key, function) 用于为jQuery对象里的所有DOM对象设置单个属性,但不是直接给定属性值,而是提供function函数,由function函数来计算各元素的属性值。function函数是一个形如function(index){}的函数,其中index代表各DOM元素在jQuery对象中的索引。
### 移除Attribute属性的方法 ###
方法 描述
removeAttr(name) 删除jQuery对象里所有DOM对象里的name属性。
## 操作Property属性的方法 ##
### 获取Property属性的prop方法 ###
方法 描述
prop(propName) 访问jQuery对象里第一个元素的propName属性。如果jQuery对象里包含的DOM对象都没有propName属性,则返回undefined。name可以是title、alt、src、href等属性。
### 设置Property属性的prop方法 ###
方法 描述
prop(properties) 用于为jQuery 对象里的所有DOM 对象同时设置多个属性。其中properties是一个形如{name1:value:,name2:value2...}的对象,例如{"src":"logo.jpg"}。
prop(name,value) 用于为jQuery对象里的所有DOM对象设置单个属性。其中name是需要设置的属性名,value是需要设置的属性值。
prop(key, function) 用于为jQuery对象里的所有DOM对象设置单个属性,但不是直接给定属性值,而是提供function函数,由function函数来计算各元素的属性值。 function函数是一个形如function(index){}的函数,其中index代表各DOM元素在jQuery对象中的索引。
### 删除Property属性的prop方法 ###
方法 描述
removeProp(propName) 删除jQuery对象里所有DOM对象里的propName属性。
## attr系列方法和prop系列方法的区别 ##
attr()与prop()系列方法的功能非常相似,在jQuery 1.6之前,attr()系列方法充当了prop()系列方法的功能;在jQuery 1.6之后,attr()系列方法专门用于操作元素的Attribute属性。而prop()系列方法则专门用于操作Property属性。

读者注:这两个系列的方法本书没有说清楚,我也看了网上的一些文章,没有说的很清楚,这两者的区别先放着,后面再更新。

下面是网上的说法,我没有验证:

两者区别

  • 对于HTML元素本身就带有的固有属性在处理时,使用prop方法
  • 对于HTML元素自己自定义的DOM属性在处理时,使用attr方法

适用情况

什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.有true,false两个属性时使用prop();
3.其他则使用attr();

对于表单元素特有属性的操作时,应该使用prop方法。而对于其他属性操作,则基本靠attr方法就可以解决。

程序示例

下面的程序示范了动态改变页面中<img>元素src属性的情况。

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
<!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> 操作属性的工具方法 </title>
</head>

<body>
	<img/>
	<img/>
	<div>
		<img/>
		<img/>
		<img/>
	</div>
	<script type="text/javascript" src="../jquery-3.1.1.js">
	</script>
	<script type="text/javascript">
		// 获取body下的img元素，并为这些img元素设置src属性值
		$("body>img").attr("src", "logo.jpg")
			.attr("alt", "疯狂Java联盟");
		// 获取div下的img元素，并为这些img元素设置src属性值
		$("div>img").prop("src", function (index) {
			return index + 1 + ".gif";
		});
	</script>
</body>

</html>

原文链接: 3.4.3 操作属性的相关方法