attr与prop的区别

 

 

Prop获取的是属性：对象身上保存的变量就是属性

Attr获取的是属性节点：在html标签中添加的属性就是属性节点

为什么jquery 1.6+增加了.prop()方法，因为在有些浏览器中比如说只要写disabled，checked就可以了，而有的要在标签中写成disabled ="disabled"，checked="checked"，attr才获取的到。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。

以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

首先看到

<a id="a" οnclick="aaa()" aa="aaa">谷歌</a>

$(function(){
a = $("#a");
console.log(a.attr("text")); //undefined
console.log(a.prop("text")); //谷歌
});
a.attr(“text”)输出undefined，因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefinedel。

prop(“text”)输出谷歌-标签文本，text文本属性属于该对象本身属性。所以输出了text对象。

 

再看到
a.attr("aa","bbb")
console.log(a.attr("aa")); //bbb
console.log(a.prop("aa")); //undefined
首先用attr方法给这个对象添加aa节点属性，值为bbb，可以看到html的结构也变了
a.attr(“aa”)输出结果为bbb，没有任何问题。

a.prop(“aa”)输出undefined，因为aa是在对象自定义的属性节点中，所以通过prop是取不到的。
a.prop("aa", "ccc");
console.log(a.attr("aa")); //bbb
console.log(a.prop("aa")); //ccc
我们再用prop方法给这个对象设置了abc属性，值为ccc，可以看到html的结构是没有变化的。

Prop是将aa=ccc设置到了自身属性中，而属性节点并未设置。
所以prop获取属性aa得到ccc,attr获取属性节点aa得到bbb。

 

再提一下事件属性

console.log(a.attr("onclick ")); //aaa()
console.log(a.prop("onclick "));

 // ƒ onclick(event) {

aaa()

}

Prop返回这样一个onclick事件属性被识别的函数形式，aaa()中的内容就无法得到。

Attr返回属性节点中onclick的值aaa();

所以说，attr只是设置或返回标签中的属性节点，不具备识别和执行能力。

 

在清楚了两种方法的原理和作用后，在不同的情况选择使用吧。

提一下，在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好，比如像下面这样：
<input type="checkbox" id="test" checked="checked"/>

console.log(a.attr("checked")); //checked
console.log(a.prop("checked")); //true
console.log(a.attr("disabled")); //undefined
console.log(a.prop("disabled")); //false
显然，布尔值比字符串值让接下来的处理更合理。
PS一下，如果你有JS性能洁癖的话，显然prop的性能更高，因为attr需要访问DOM属性节点，访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。

扩展资料：

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数，其工作方式也有所差异。

当该方法用于返回属性值，则返回第一个匹配元素的值。

当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对

以上部分资料取自百度