attr(),prop()二者区别和最佳实践

　　　　　　　　　　　　　　　　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元素而言，本身不具有的属性，是我们自己定义名字并给予赋值的属性。

如：

 <a href="http://www.baidu.com" target="_blank"  class="anchor" data-id="one">百度</a>

　　　　a标签href, targer, class是固有属性，而data-id是我们自己定义的，属于自定义属性。

　　代码测试

　　　　下面我将进行代码测试，就attr(),prop()方法在获取和设置固有属性与自定义属性时的情况进行讨论。

　　　　获取值测试

　　　　如上a标签，使用语句在控制台输出：

 console.log( $(".anchor").attr("target") );   // _blank
 console.log( $(".anchor").attr("data-id") );  // one
 console.log( $(".anchor").prop("target") );  // _blank
 console.log( $(".anchor").prop("data-id"));  // undefined

　　　　attr方法都获取到正确的值，而prop方法在获取自定义属性data-id时，显然没有起到作用。注意此时不管是固有属性还是自定义属性，我们都有写出来并进行了赋值，若要获取没有写出的固有属性和自定义属性值呢？有是什么情况？将a标签改为:

<!--   在固定属性target, 自定义属性tdata-id都没有在时    -->
<a href="http://www.baidu.com"  class="anchor">百度</a>

　　　　在控制台输出值：

 console.log( $(".anchor").attr("target") );   // undefined
 console.log( $(".anchor").attr("data-id") );   // undefined
 console.log( $(".anchor").prop("target") );   //  ''空字符串
 console.log( $(".anchor").prop("data-id") );   //  undefined.

　　　　attr()都输出undefined，prop()对于固有属性输出空字符串，自定义属性输出undefine。若a标签再改为:

 <!--      自定义属性data-di为空字符串时 分别使用attr(), prop()获取data-id的值    -->
 <a href="http://www.baidu.com"  class="anchor" data-id="">百度</a>

　　　　在控制台输入：

 console.log( $(".anchor").attr("data-id") );   // '' 空字符串
 console.log( $(".anchor").prop("data-id") );   //  undefined

　　　　此时attr()输出''空字符串，而prop()依然是undefine。最后我再将a标签改为：

 <!--   固有属性target为空字符串时，分别使用attr(),prop()获取值     -->
 <a href="http://www.baidu.com" target=""  class="anchor" >百度</a>

　　　　此时我相信已经很容易猜出这两个方法输出的值是什么了。如下：

 console.log( $(".anchor").attr("target") );   // '' 空字符串
 console.log( $(".anchor").prop("target") );   //  '' 空字符串 

　　　　你有发现规律了吗？现在进行总结：①使用attr()方法只要没有被显示赋值，那么获取属性值不管是固定属性或自定义属性，那么返回值都是undefined。（个人感觉这个是机制和表单属性的特殊性导致attr方法在获取固定属性值时很容易出现问题）②使用prop()方法只要是自定义属性都返回undefined，而对于固定属性总是返回其原生状态的值（比如：target属性没有写出时，获取值为空字符串，表单属性checked没有写出时，获取值为false）

　　　　设置值测试

　　　　a标签如下：

 <a href="http://www.baidu.com" target="_blank"  class="anchor" data-id="one">百度</a>

　　　　使用attr()设置，测试代码如下：

 $(".anchor").attr("target","_self");
 $(".anchor").attr("data-id","two");
 /*  设置成功，且DOM中的属性值确实已经改为_self, two  */

 /*  使用attr()方法获取自定义和固定属性值  */
 console.log( $(".anchor").attr("target") ); // _self
 console.log( $(".anchor").attr("data-id") );  // two

 /*  使用prop()方法获取自定义和固定属性值  */
 console.log( $(".anchor").prop("target") );  // _self
 console.log( $(".anchor").prop("data-id"));  // undefind

　　　　attr()方法设置值都是成功的，且可以正常获取值。prop()方法，老样子对自定义属性并不感冒。

　　　　使用prop()设置，测试代码如下：

 $(".anchor").prop("target","_self");
 $(".anchor").prop("data-id","two");  //赋值无效?

 /* DOM中target值已经变为_self，而data-id的值还是one */
 console.log( $(".anchor").attr("target") ); // _self
 console.log( $(".anchor").attr("data-id") );  // one

 /* 在DOM中target值已经为_self，但是data-id的值还是one   */
 console.log( $(".anchor").prop("target") );  // _self
 console.log( $(".anchor").prop("data-id"));  // two

　　　　使用prop()方法设置值，固定属性是设置成功的，但是自定义属性赋值无效，在DOM中data-id值还是“one”。特别注意使用prop()设置后，再使用prop方法获取值，是可以获取到正确的值的，但是并没有什么用。

　　总结

　　　　前面提到表单元素属性的特殊性，例如选中复选表框，我们可以写checked="true"或checked="checked"都是可以的。

　　　　我们就举checked属性来说，很奇怪，使用prop()获取表单属性的值总是返回布尔值，而attr()获取表单属性的值不是undefined不是就是'checked'。分析如下：

 <!--    此时复选框1是没有checked="true"    -->
 <input id="chk1" type="checkbox"  />复选框1
 <input id="chk2" type="checkbox" checked="checked" />复选框2
 // prop方法获取值
 console.log( $("#chk1").prop("checked") );   // false
 console.log( $("#chk2").prop("checked") );   // true
 // attr方法获取值
 console.log( $("#chk1").attr("checked") );   // undefined
 console.log( $("#chk2").attr("checked") );   // checked

 <!--   此时复选框1是有checked="true"      -->
 <input id="chk1" type="checkbox" checked="true" />复选框1
 <input id="chk2" type="checkbox" checked="checked" />复选框2

 console.log( $("#chk1").prop("checked") );   // true
 console.log( $("#chk2").prop("checked") );   // true

 console.log( $("#chk1").attr("checked") );   // checked
 console.log( $("#chk2").attr("checked") );   // checked

　　最后最佳实践是自定义属性的设置和获取我们可以使用attr()方法来完成，而固有属性我们可以使用prop()设置和获取。特别注意在表单属性这块我们强烈推荐使用prop()方法且其返回值是布尔值，在写JS时可帮助判断。网上有很多存在说checked="checked"存在，但是却不打勾的情况。解决的办法就是使用  $(element).prop('checked', true/false);  因此在涉及表单属性和属性值时，使用prop()方法可以起到奇效。