jQ中attr与prop的区别

简介: 先说一说官方定义.attr()获取匹配的元素集合中的第一个元素的属性值,设置每个匹配元素的一个或多个属性.p

先说一说官方定义

.attr()

获取匹配的元素集合中的第一个元素的属性值,设置每个匹配元素的一个或多个属性

.prop()

获取匹配的元素集中第一个元素的属性(property)值为匹配的元素设置一个或多个属性(properties)

什么时候用prop?什么时候该用attr?它们两个之间有什么区别?

我们举两个例子。


<a href="#" target="_self" class="btn">百度</a>


这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。


<a href="#" id="link1" action="delete">删除</a>


这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。


总结下使用情况

对于html元素本身就带有的固有属性值,在处理时。用prop()

对于html元素我们自己自定义的DOM属性,在处理时,使用attr()

具有true和false两个属性的属性,如checked、selected或者disable使用prop()


相关文章
|
5月前
|
存储 前端开发
Prop 和 State 有什么区别
Prop 和 State 有什么区别
|
6月前
|
JavaScript
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
316 0
|
JavaScript
jQuery 属性操作 attr()、removeAttr()、prop()
jQuery 属性操作 attr()、removeAttr()、prop()
50 0
jQuery 属性操作 attr()、removeAttr()、prop()
element-ui中的prop 的相关作用
element-ui中的prop 的相关作用
452 0
|
移动开发 JavaScript HTML5
JS : attr()和prop()和is() 取值的区别
简单区别就是,attr操作HTML元素的属性,prop操作DOM元素的属性,因为DOM会解析某些HTML元素属性到自己身上,此时prop和attr都能操作这些属性。
|
JavaScript
jquery attr()方法获取input的checked属性问题
jquery attr()方法获取input的checked属性问题
131 0
|
前端开发 JavaScript
jquery里prop和attr的区别
  本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法。 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可以用来获取或生成“直接写在html标签里的属性” prop可以用来获取元素的JS属性,如scrollHeight,offsetHeight等。
1439 0
|
JavaScript 前端开发 安全
|
JavaScript 开发工具 IDE
第82天:jQuery中prop()和attr()的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
1002 0