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()的区别

当然,在jQuery的底层实现中,函数attr()prop()的功能都是通过JS原生的Element对象(如上述代码中的msg)实现的。attr()函数主要依赖的是Element对象的getAttribute()setAttribute()两个方法。prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

jQuery函数attr()与prop()的区别

当然,jQuery对这些操作方式进行了封装,使我们操作起来更加方便(比如以对象形式同时设置多个属性),并且实现了跨浏览器兼容。

此外,虽然prop()针对的是DOM元素的property,而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如,property的id对应attribute的id,property的className对应attribute的class。

jQuery函数attr()与prop()的区别

jQuery函数attr()与prop()的区别 

jQuery函数attr()与prop()的区别 

jQuery函数attr()与prop()的区别 

转载地址:http://www.365mini.com/page/jquery-attr-vs-prop.htm