attr(),prop()二者区别和最佳实践
最近使用到attr()来获取自定义属性值，我印象中是有一个方法可以获取到自定义属性值，进而我又想到了另一个方法prop()。 查看了手册发现并没有对二者有过多的阐述，但是prop方法里面有一段话引起我的注意：随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。而手册removeAttr方法里面说1.6以下版本在IE6使用JQ中的removeAttr方法删除disabled是无效的，解决的办法是使用$("xx").prop("disabled", false);解决，1.7版本在IE6下已经支持disabled。
这正是我要说明的，prop方法在处理固有属性特别是表单元素的disabled,selected,checked属性时有奇效。这也就是为什么网上都是建议在处理固有属性时使用prop方法，而在处理自定义属性时使用attr()方法。
自定义属性和固有属性
固有属性： 对于HTML元素而言，本身就带有的属性，也可以理解为W3C标准里面这个元素包含有的属性。
自定义属性： 对于HTML元素而言，本身不具有的属性，是我们自己定义名字并给予赋值的属性。
如：
1 <a href="http://www.baidu.com" target="_blank" class="anchor" data-id="one">百度</a>
a标签href, targer, class是固有属性，而data-id是我们自己定义的，属于自定义属性。
代码测试
下面我将进行代码测试，就attr(),prop()方法在获取和设置固有属性与自定义属性时的情况进行讨论。
获取值测试
如上a标签，使用语句在控制台输出：
1 console.log( $(".anchor").attr("target") ); // _blank 2 console.log( $(".anchor").attr("data-id") ); // one 3 console.log( $(".anchor").prop("target") ); // _blank 4 console.log( $(".anchor").prop("data-id")); // undefined
attr方法都获取到正确的值，而prop方法在获取自定义属性data-id时，显然没有起到作用。注意此时不管是固有属性还是自定义属性，我们都有写出来并进行了赋值，若要获取没有写出的固有属性和自定义属性值呢？有是什么情况？将a标签改为:
<!-- 在固定属性target, 自定义属性tdata-id都没有在时 --> <a href="http://www.baidu.com" class="anchor">百度</a>
在控制台输出值：
1 console.log( $(".anchor").attr("target") ); // undefined 2 console.log( $(".anchor").attr("data-id") ); // undefined 3 console.log( $(".anchor").prop("target") ); // ''空字符串 4 console.log( $(".anchor").prop("data-id") ); // undefined.
attr()都输出undefined，prop()对于固有属性输出空字符串，自定义属性输出undefine。若a标签再改为:
1 <!-- 自定义属性data-di为空字符串时 分别使用attr(), prop()获取data-id的值 --> 2 <a href="http://www.baidu.com" class="anchor" data-id="">百度</a>
在控制台输入：
1 console.log( $(".anchor").attr("data-id") ); // '' 空字符串 2 console.log( $(".anchor").prop("data-id") ); // undefined
此时attr()输出''空字符串，而prop()依然是undefine。最后我再将a标签改为：
1 <!-- 固有属性target为空字符串时，分别使用attr(),prop()获取值 --> 2 <a href="http://www.baidu.com" target="" class="anchor" >百度</a>
此时我相信已经很容易猜出这两个方法输出的值是什么了。如下：
1 console.log( $(".anchor").attr("target") ); // '' 空字符串 2 console.log( $(".anchor").prop("target") ); // '' 空字符串
你有发现规律了吗？现在进行总结：①使用attr()方法只要没有被显示赋值，那么获取属性值不管是固定属性或自定义属性，那么返回值都是undefined。（个人感觉这个是机制和表单属性的特殊性导致attr方法在获取固定属性值时很容易出现问题）②使用prop()方法只要是自定义属性都返回undefined，而对于固定属性总是返回其原生状态的值（比如：target属性没有写出时，获取值为空字符串，表单属性checked没有写出时，获取值为false）
设置值测试
a标签如下：
1 <a href="http://www.baidu.com" target="_blank" class="anchor" data-id="one">百度</a>
使用attr()设置，测试代码如下：
1 $(".anchor").attr("target","_self"); 2 $(".anchor").attr("data-id","two"); 3 /* 设置成功，且DOM中的属性值确实已经改为_self, two */ 4 5 /* 使用attr()方法获取自定义和固定属性值 */ 6 console.log( $(".anchor").attr("target") ); // _self 7 console.log( $(".anchor").attr("data-id") ); // two 8 9 /* 使用prop()方法获取自定义和固定属性值 */ 10 console.log( $(".anchor").prop("target") ); // _self 11 console.log( $(".anchor").prop("data-id")); // undefind
attr()方法设置值都是成功的，且可以正常获取值。prop()方法，老样子对自定义属性并不感冒。
使用prop()设置，测试代码如下：
1 $(".anchor").prop("target","_self"); 2 $(".anchor").prop("data-id","two"); //赋值无效? 3 4 /* DOM中target值已经变为_self，而data-id的值还是one */ 5 console.log( $(".anchor").attr("target") ); // _self 6 console.log( $(".anchor").attr("data-id") ); // one 7 8 /* 在DOM中target值已经为_self，但是data-id的值还是one */ 9 console.log( $(".anchor").prop("target") ); // _self 10 console.log( $(".anchor").prop("data-id")); // two
使用prop()方法设置值，固定属性是设置成功的，但是自定义属性赋值无效，在DOM中data-id值还是“one”。特别注意使用prop()设置后，再使用prop方法获取值，是可以获取到正确的值的，但是并没有什么用。
总结
前面提到表单元素属性的特殊性，例如选中复选表框，我们可以写checked="true"或checked="checked"都是可以的。
我们就举checked属性来说，很奇怪，使用prop()获取表单属性的值总是返回布尔值，而attr()获取表单属性的值不是undefined不是就是'checked'。分析如下：
1 <!-- 此时复选框1是没有checked="true" --> 2 <input id="chk1" type="checkbox" />复选框1 3 <input id="chk2" type="checkbox" checked="checked" />复选框2 4 // prop方法获取值 5 console.log( $("#chk1").prop("checked") ); // false 6 console.log( $("#chk2").prop("checked") ); // true 7 // attr方法获取值 8 console.log( $("#chk1").attr("checked") ); // undefined 9 console.log( $("#chk2").attr("checked") ); // checked
1 <!-- 此时复选框1是有checked="true" --> 2 <input id="chk1" type="checkbox" checked="true" />复选框1 3 <input id="chk2" type="checkbox" checked="checked" />复选框2 4 5 6 console.log( $("#chk1").prop("checked") ); // true 7 console.log( $("#chk2").prop("checked") ); // true 8 9 10 console.log( $("#chk1").attr("checked") ); // checked 11 console.log( $("#chk2").attr("checked") ); // checked
最后最佳实践是自定义属性的设置和获取我们可以使用attr()方法来完成，而固有属性我们可以使用prop()设置和获取。特别注意在表单属性这块我们强烈推荐使用prop()方法且其返回值是布尔值，在写JS时可帮助判断。网上有很多存在说checked="checked"存在，但是却不打勾的情况。解决的办法就是使用 $(element).prop('checked', true/false); 因此在涉及表单属性和属性值时，使用prop()方法可以起到奇效。
