看了网上很多关于两者的对比,但都不是自己满意的答案,总结了自己感觉比较专业的答案
要了解两者的区别,首先要区别HTML标签和DOM元素对象,页面加载后,HTML标签会对应一个DOM元素对象(在内存中)。
DOM元素对象会将HTML标签的固有属性解析成DOM元素对象的属性
。
-
attr操作的就是HTML标签的内容(在页面上通过Firebug等开发者工具可以查看到)
-
prop操作的是DOM元素的内容(数据通过开发者工具不能可视)。
jQuery中attr() 对应原生JS中的 setAttribute() / getAttribute ,prop() 对应原生JS中 DOM对象.property;前者设置的“属性”会在元素标签中显示,后者设置的“属性”存在于该元素对应DOM对象下。用prop()设置的属性,不能用attr()访问的到。同样,用attr()设置的属性,用prop()也访问不到的。(不包括id,class等自有属性,自有属性无论是attr()还是prop()都能访问和设置,因为前面提到的“DOM元素对象会将HTML标签的固有属性解析成DOM元素对象的属性”,因此prop和attr都可以操作(读取/设置)固有属性)
那么,什么时候使用attr(),什么时候使用prop()?
- 添加属性名称该属性就会生效应该使用prop();
- 是有true,false两个属性使用prop();
- 其他则使用attr();