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
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭