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">
checked
$("#check").prop("checked"); // true
$("#checked").attr("checked"); // "checked"
/* --------------------------------------- */
$("#no-checked").prop("checked"); // undefined
$("#no-checked").attr("checked"); // false
id
$("#check").prop("id"); // "check"
$("#check").attr("id"); // "check"
自定义属性
$("#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”。
