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()


相关文章
|
7月前
|
存储 前端开发
Prop 和 State 有什么区别
Prop 和 State 有什么区别
|
7月前
Each child in a list should have a unique “key“ prop. Check the render method的报错解决
Each child in a list should have a unique “key“ prop. Check the render method的报错解决
|
前端开发 JavaScript
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
1378 0
前端vue:解决Invalid prop: type check failed for prop “model“. Expected Object, got Array问题
|
JavaScript
jQuery 属性操作 attr()、removeAttr()、prop()
jQuery 属性操作 attr()、removeAttr()、prop()
66 0
|
移动开发 JavaScript HTML5
JS : attr()和prop()和is() 取值的区别
简单区别就是,attr操作HTML元素的属性,prop操作DOM元素的属性,因为DOM会解析某些HTML元素属性到自己身上,此时prop和attr都能操作这些属性。
报错ContentView_Previews is not a member type of 'TextField'解决
报错ContentView_Previews is not a member type of 'TextField'解决
121 0
|
前端开发 JavaScript
jquery里prop和attr的区别
  本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法。 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可以用来获取或生成“直接写在html标签里的属性” prop可以用来获取元素的JS属性,如scrollHeight,offsetHeight等。
1457 0