jQuery函数attr()与prop()的区别
在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。
但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。
1、操作对象不同
很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示"属性"的意思。
不过,在jQuery中,attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性,property表示JS对象的属性。
在jQuery中,prop()
函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()
函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。
当然,在jQuery的底层实现中,函数attr()
和prop()
的功能都是通过JS原生的Element对象(如上述代码中的msg
)实现的。attr()
函数主要依赖的是Element对象的getAttribute()
和setAttribute()
两个方法。prop()
函数主要依赖的则是JS中原生的对象属性获取和设置方式。
当然,jQuery对这些操作方式进行了封装,使我们操作起来更加方便(比如以对象形式同时设置多个属性),并且实现了跨浏览器兼容。
此外,虽然prop()
针对的是DOM元素的property,而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如,property的id
对应attribute的id,property的className
对应attribute的class。