jQuery 1.6版发布，区分DOM的attributes和properties

2011 5 4 03:04 PM 3013次查看

分类：JavaScript 标签：jQuery, JavaScript

今天jQuery 1.6版发布了。

新增的API和性能改进我就不提了，只提一个重要的改动：区分DOM的attributes和properties。
这2个词的中文翻译都是属性，有时候后者会被译为特性，不过我还是直接用英文吧。前者表示从文档中获取的状态信息，后者则表示文档的动态状态信息。更通俗地来说，HTML文档里是怎么样的状态，attributes就是怎样的；而JavaScript可以通过DOM API来更改DOM的状态，表单控件（如文本框）的状态也可以被用户使用键盘、鼠标等修改，这些被动态更改后的状态就由properties表示。

举例来说，有这样一个文本框：
<!DOCTYPE html>
<html>
	<head>
		<script src="jquery-1.6.js"></script>
	</head>
	<body>
		<input type="text" id="a" value="123"/>
	</body>
</html>
那么：
> $a = $('#a')
  [<input type=​"text" id=​"a" value=​"123">​]
> $a.val()
  "123"
> $a.attr('value')
  "123"
> $a.prop('value')
  "123"
> $a.val('456')
  [<input type=​"text" id=​"a" value=​"123">]
> $a.attr('value') // 保持不变
  "123"
> $a.prop('value')
  "456"
> $a.attr('value', '789')
  [<input type=​"text" id=​"a" value=​"789">]
> $a.val() // 保持不变
  "456"
> $a.attr('value')
  "789"
> $a.prop('value') // 保持不变
  "456"
> $('body').html()
  "
  		<input type="text" id="a" value="789">
  	
  "
可以看到，获取attributes时，是直接获取HTML文档中的值，设置它时也更改了HTML文档；而获取properties时则是取当前状态，与HTML文档无关，设置它时不会改变HTML文档（但浏览器展示和提交表单时是取它的状态）。

再来看看复选框：
<!DOCTYPE html>
<html>
	<head>
		<script src="jquery-1.6.js"></script>
	</head>
	<body>
		<input type="checkbox" id="a"/>
		<input type="checkbox" id="b" checked="checked"/>
	</body>
</html>
则有：
> $a = $('#a')
  [<input type=​"checkbox" id=​"a">]
> $b = $('#b')
  [<input type=​"checkbox" id=​"b" checked=​"checked">]
> $a.val() // 取它无意义
  "on"
> $a.attr('value')
  undefined
> $a.prop('value')
  ""
> $a.attr('checked')
  undefined
> $a.prop('checked') // 这才是需要取的
  false
> $a.is(':checked')
  false
> $b.val()
  "on"
> $b.attr('checked')
  "checked"
> $b.prop('checked')
  true
> $b.is(':checked')
  true
> $a.removeProp('checked')
  [<input type=​"checkbox" id=​"a">]
> $a.prop('checked')
  undefined
> $b.removeProp('checked') // 执行完后复选框未选中
  [<input type=​"checkbox" id=​"b" checked=​"checked">]
> $b.prop('checked')
  undefined
> $b.is(':checked')
  false
可以看到，对复选框而言，val()的值没有意义，所需的是prop('checked')。当值为true时，表示选中，否则为未选中。

值得一提的是，有些属性是不区分attributes和properties的，例如href：
<!DOCTYPE html>
<html>
	<head>
		<script src="jquery-1.6.js"></script>
	</head>
	<body>
		<a href="#" id="a">test</a>
	</body>
</html>
A元素的href、attr('href')和prop('href')一直保持一致：
> $a = $('#a')
  [<a href=​"#" id=​"a">​test​</a>]
> $a[0].href
  "file:///C:/Documents%20and%20Settings/Administrator/Desktop/test.html#"
> $a.attr('href')
  "#"
> $a.prop('href')
  "file:///C:/Documents%20and%20Settings/Administrator/Desktop/test.html#"
> $a[0].href = '#a'
  "#a"
> $a[0].href
  "file:///C:/Documents%20and%20Settings/Administrator/Desktop/test.html#a"
> $a.attr('href')
  "#a"
> $a.prop('href')
  "file:///C:/Documents%20and%20Settings/Administrator/Desktop/test.html#a"
> $a.attr('href', '#')
  [<a href=​"#" id=​"a">​test​</a>]
> $a[0].href
  "file:///C:/Documents%20and%20Settings/Administrator/Desktop/test.html#"
> $a.attr('href', '#')
  [<a href=​"#" id=​"a">​test​</a>]
> $a.attr('href')
  "#"
> $a.prop('href')
  "file:///C:/Documents%20and%20Settings/Administrator/Desktop/test.html#"
> $a.prop('href', '#a')
  [<a href=​"#a" id=​"a">​test​</a>]
> $a[0].href
  "file:///C:/Documents%20and%20Settings/Administrator/Desktop/test.html#a"
> $a.attr('href')
  "#a"
> $a.prop('href')
  "file:///C:/Documents%20and%20Settings/Administrator/Desktop/test.html#a"
唯一的区别是href和prop('href')获得的是绝对路径，而attr('href')获得的是原始值（可能为相对路径）。

在WEB开发时，我们基本上只会与properties打交道。因此在移植到1.6版时，大体上只要把以前所用的attr()改成prop()，removeAttr()改成removeProp()即可。

2011年5月13日更新：
今天jQuery 1.6.1发布了，大部分以前使用attr()的基本上还能沿用，不需要特意改成prop()了。

4条评论 你不来一发么↓ 顺序排列 倒序排列

    向下滚动可载入更多评论，或者点这里禁止自动加载。

    想说点什么呢？