jQuery中attr()与prop()的区别

前提
在 jQuery 里，咱们要获取一个标签元素的属性，能够用 attr()方法或者 prop()方法 ，那么二者有什么区别呢？

jQuery attr() 方法 和 prop() 方法
　　attr() 方法设置或返回被选元素的属性值。
　　prop() 方法设置或返回被选元素的属性和值。
　　注：单纯从定义看的话，两个方法的做用都是同样的。并且用法也都差很少，以下所示。

做用一：返回被选元素的属性值。语法以下：

$(selector).attr(attribute) $(selector).prop(property)

做用二：设置被选元素的属性和值。语法以下：

$(selector).attr(attribute,value) $(selector).prop(property,value)

做用三：设置多个属性和值。语法以下：

$(selector).attr( {attribute:value, attribute:value ...} ) //对象的写法，键值对
$(selector).prop( {property:value, property:value,...} ) //对象的写法，键值对

做用四：使用函数设置属性和值。语法以下：（平时不多用到）

//第二个参数：规定返回要设置的属性值的函数。 /*该函数包括两个参数： * index - 检索集合中元素的 index 位置。 * oldvalue / currentvalue - 检索被选元素的当前属性值。 */ $(selector).attr(attribute,function(index,oldvalue)) $(selector).prop(property,function(index,currentvalue))

咱们会发现：

　　两个方法的用法都一模一样，只是方法名称存在差别。一个是 attr，一个是 prop。
　　attr 的 全拼是 attribute。 prop 的全拼是 property。它们是两个不一样的单词，虽然说都有 属性 的意思，但其中的寓意必然不同。

property 和 attribute 的 区别

　　property n. 属性，性质，性能；财产；全部权
　　attribute n. 属性；特质
　　因而可知，二者很是容易混淆，由于在中文上的翻译都特别接近。但实际上，它们两个是不一样的东西，属于不一样的范畴。

深究它们的中文含义，咱们能够将 attribute 理解为 “特性” ，而将 property 理解为 “属性”。
显而易见，一个是 属性，一个是特性。确定不同了。

若是你百度 “属性” 关键字的话，你会发现，属性 对应的英文直接就是 property。并且百度含义对 “属性” 的　详细释义　是：指事物自己固有的不可缺乏的性质。。
如今，咱们知道了：

　　property　属性。它是与生俱来的，并非后天赋予的。好比说，某些对象在定义时就具备某一些属性。
　　attribute　特性。自己没有的，后天赋予的。好比说，某些对象在建立后，自定义赋予的一些属性。

对应到 js 中就是：

　　property 是 DOM 中的属性，是 JavaScript 里的对象；
　　attribute 是 HTML 标签上的特性（属性），它的值只可以是字符串；

对应到 jQuery 中就是：

　　对于 HTML 元素自己就带有的固有属性，或者说 W3C 标准里就包含有这些属性，更直观的说法就是，编辑器里面能够智能提示出来的一些属性，如：src、href、value、class、name、id等。在处理时，使用 prop() 方法。
　　对于 HTML 元素咱们自定义的 DOM 属性，即元素自己是没有这个属性的，如：data-*。在处理时，使用 attr() 方法。

attr() 方法 和 prop() 方法 的返回值

• $(eleStr).attr()

<img src="/smile.jpg"/>
<button>获取图像的 class 属性值</button>
 $("button").click(function(){ console.log( $("img").attr("class") );//若是属性存在，则返回属性值；若是属性不存在，则返回 undefined
    console.log( $("img").prop("class") );//若是属性存在，则返回属性值；若是属性不存在，则返回 空（""）
});

• $(eleStr).prop()

 

<input type="checkbox">
<button>获取复选框的选中状态</button>
 $("button").click(function(){ console.log( $("input").prop("checked") ); //若是属性值存在，则返回 true；若是属性值不存在，则返回 false。
    console.log( $("input").attr("checked") );//若是属性值存在，则返回 checked；若是属性值不存在，则返回 undefined。
  });

结束语

若是要从根源上弄清楚两者的区别，能够参考下面这篇博文，分析的特别到位。

JS中attribute和property的区别