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

一、概述

某些情况下，attr() 与 prop() 取到的结果是一致的，都可以获取到属性的值。直到踩了一些坑才意识到，应该按照规范使用才能避免不必要的麻烦.

尽管在web编程都被翻译成“属性”，但是两者是有所区别的，否则也不会有attr()和prop()两个函数的出现。

如果你有到官网查看，你可能会说，这**什么鬼，完全一头雾水。

下面是在jQuery翻译文档中找到的还算“比较清楚”的描述：

Attributes vs. Properties

attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

1.1attribute

此属性在web编程中，一般是标签中的属性，例如的id属性，它仅仅是一个描述，就好比说张三长的很帅，具有两只眼睛一个鼻子一样。attribute属性值只能够是字符串。

1.2property

一般指的对象中的属性，也就是使用点号(.)访问的属性，它明确的指向内存中的一个内存地址中存放的内容。它是真正编程中所说的属性。property属性值可以是各种类型的。

1.3两者关系(relation)

javascript是用来操作DOM，DOM对象不但具有HTML特性也继承了Object对象的特性。从上面的介绍中，我们可以知道，Object是使用Property的，而attribute属性则是HTML使用，虽然这两种属性被继承到同一个对象身上，但是并不冲突，有些HTML元素内置的属性会被映射到property，例如id和class，不过由于class是ECMAScript中的保留字，所以被映射到className这个property上。

二、演示

2.1CODE

在Document中定义两个标签：

<input type=​"checkbox" id=​"checked" checked=​"checked"  data-name="langkye">​
<input type=​"checkbox" id=​"no-checked"  data-name="langkye">​

• 通过操作不同的属性，比较两者区别

$("#checked")[0];  // <input type=​"checkbox" checked=​"checked" id=​"check" class=​"laytable-cell-checkbox" data-name="langkye">​
$("#no-checked")[0];  // <input type=​"checkbox" id=​"no-checked" class=​"laytable-cell-checkbox" data-name="langkye">​

1. checked

$("#check").prop("checked");  // true
$("#checked").attr("checked");  // "checked"
/* --------------------------------------- */
$("#no-checked").prop("checked");  // undefined
$("#no-checked").attr("checked");  // false

2. id

$("#check").prop("id");  // "check"
$("#check").attr("id");  // "check"

3. 自定义属性

$("#no-check").attr("data-name");  // "langkye"
$("#no-check").prop("data-name");  // undefined

2.2SUMMRIZE

从上面的结果看出：

   对于W3C组织给HTML预设的属性，使用prop()来进行操作。

   对于我们自定义的属性，使用attr()来进行操作。

   实际上就是Attribute使用attr()来进行操作；Property使用prop()来操作。

• 如果难以区分两者，在操作得不到预期结果，切换尝试即可。 一般而言，结果是boolean的，为property，如“selected”、“checked”。

参考：attribute和property区别