1、操作对象不同
prop()是property的缩写,attr是attribute的缩写。property表示的是JS对象属性(DOM对象),而HTML文档节点属性。
prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。
2、底层
attr()依赖element.getAttribute()和element.setAttribute方法。
prop()依赖js原生的element[property]和element[property] = value;
3、用于设置的属性值类型不同
attr()函数操作文档节点的属性。只能是字符串类型,如果不是,也会调用toString()转为字符串类型
prop()函数操作的是JS对象的属性,因此属性值可以为包括数组和对象在内的任意类型。
4、checked、selected、disabled属性
从1.6开始,attr()获取这些属性返回值为String类型,被选中或禁用就返回checked、selected或disabled。没有改属性,就返回undefined。
prop()获取这些属性,返回boolean值。(true or false)
5、使用,能用prop(),就用prop
6、对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法
7、prop是指动态改变一个DOM元素的状态而不改变HTML的源码,如input元素的value、disabled、checked等,通过prop来改变disabled、checked的值,用val来改变value值。
通过attr改的属性会反应到html源码里
8、总结,获取、更改checked、disabled、selected用prop(不要removeProp这几个内置的属性),获取、更改value用val,其他的用attr。
9、官方建议使用
Attribute/Property | .attr() |
.prop() |
---|---|---|
accesskey | √ | |
align | √ | |
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ | |
contenteditable | √ | |
draggable | √ | |
href | √ | |
id | √ | |
label | √ | |
location ( i.e. window.location ) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ | |
selected | √ | √ |
src | √ | |
tabindex | √ | |
title | √ | |
type | √ | |
width ( if needed over .width() ) |
√ |