调整字号

jQuery 的 attr() 和 prop()

jQuery 从 1.6 开始引入了 prop() 方法,跟 attr() 方法相似,都是用来取得 DOM 元素的属性值,之前 jQuery 将它们分得并不清楚,许多 prop() 的功能被 attr() 代替,但其实它们是有一些不同的。首先应当分清楚属性(property)和特性(attribute)的区别:

property 指的是 DOM 元素对象上的各个属性,例如 id, type, nodeName, nodeType, selectedIndex, innerHTML 等等,可以直接用 elem.nodeName$(elem).prop('nodeName') 的方式取得。而 attribute 则是指定义在 HTML 标记上的属性。比如一个元素:

<input id="input" type="checkbox" checked="checked" />

其中的 id, typechecked 都是 attribute,可以用原生的 getAttribute() 方法获取,也可以用 jQuery 的 attr(),当然这里的 idtype 比较特殊,既是 attribute,也有相应的 property。

实际使用中,如果分不清它们的区别就有可能出错,比如用来获取一个复选框的状态的时候:

<input id="input" type="checkbox" checked="checked" />
<script type="text/javascript">
var elem = document.getElementById('input');
</script>

想要获取 elem 的勾选状态,勾选还是未勾选,就应当使用 elem.checked,或者 $(elem).prop('checked'),它们都返回一个布尔值,表示复选框的实时状态。而元素标签上的 checked 特性,只代表复选框默认的状态,不会随着以后的状态改变而改变,它对应的 property 是 defaultChecked,是一个布尔值,也不会改变。需要注意的一点是,只要 HTML 标记上出现了 checked,不管是 <input type="checkbox" checked="checked"> 还是 <input type="checkbox" checked>,甚至 <input type="checkbox" checked="false">,都表示默认勾选。

尽管 jQuery 对 attr() 进行了优化,但还是应该尽量使用正确的方法。在 1.6 之前的版本和 1.6.1 之后的版本(含 1.6.1)中,$(elem).attr('checked') 都会随着控件的状态发生改变,1.6 之前版本返回布尔值,1.6.1 以及之后的版本返回 undefined"checked"

还没有评论,沙发空缺中……
flight