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

最新推荐文章于 2019-04-08 22:30:33 发布

Flybeta

最新推荐文章于 2019-04-08 22:30:33 发布

阅读量1.7k

点赞数

分类专栏： jQuery 文章标签： attributes properties jquery input 文档 file

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

Flybeta

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 1.6版发布，区分DOM的attributes和properties

新增的API和性能改进我就不提了，只提一个重要的改动：区分DOM的attributes和properties。这2个词的中文翻译都是属性，有时候后者会被译为特性，不过我还是直接用英文吧。前者表示从文档中获取的状态信息，后者则表示文档的动态状态信息。更通俗地来说，HTML文档里
复制链接

扫一扫

专栏目录