jQuery中attr()与prop()区别介绍 使用场景

转载: https://www.cnblogs.com/ipetergo/p/6491321.html
.attr() ： 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。 •.attr( attributeName ) •.attr( attributeName )
•.attr( attributeName, value ) •.attr( attributeName, value )
•.attr( attributes )
•.attr( attributeName, function(index, attr) )
 
.prop() ： 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。 •.prop( propertyName ) •.prop( propertyName )
•.prop( propertyName, value ) •.prop( propertyName, value )
•.prop( properties )
•.prop( propertyName, function(index, oldPropertyValue) )
 
是参数有区别，attr()传入的是attributeName，而prop()传入的是propertyName,
 
Attributes vs. Properties
在这里，我们可以将attribute理解为“特性”，property理解为为“属性”从而来区分俩者的差异。
 
如果把DOM元素看成是一个普通的Object对象，这个对象在其定义时就具有一些属性（property），比如把select的option当做一个对象：
var option = {
selected:false，
disabled:false，
attributes:[],
...
}
现在，我们一目了然了，attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，它是一个类数组的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。而property就是一个属性，是一个以名值对(name=”value”)的形式存放在Object中的属性。
 
jquery中attr和prop的区别介绍：
 •对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
•对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
 
栗子1：
<a href="http://www.baidu.com" 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方法。