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

来源：互联网发布：剑网3小和尚捏脸数据编辑：程序博客网时间：2024/05/28 09:33

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