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

本文主要是介绍jQuery 1.6版发布，区分DOM的attributes和properties，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

新增的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()了。

这篇关于jQuery 1.6版发布，区分DOM的attributes和properties的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！