jQuery函数attr()和prop()的区别

jQuery函数attr()和prop()的区别

在某次面试的时候，被问到的，今儿总结一下

1.版本问题：

attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用

attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。

2.操作对象

attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。

在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。

3.底层实现

在jQuery的底层实现中，函数attr()和prop()的功能都是通过JS原生的Element对象(如上述代码中的msg)实现的。

attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。prop()函数主要依赖的则是JS中原生

的对象属性获取和设置方式

实例：

html

<div id="info" class="info" data_id="006">info</div>

   $(function (){
    //获取在匹配的元素集中的第一个元素的属性值   
     var msg=document.getElementById("info");
     var $msg=$(msg);
       
      msg.setAttribute("data_id",007);
      $msg.attr("data_id",007);
      
      var val0=msg.getAttribute("data_id") 
      var val1=$msg.attr("data-id")
      
      msg['propertyT']="value";
      $msg.prop("propertyT","value");
      
       
   })

DOM元素某些属性的更改也会影响到元素节点上对应的属性

如：property的id对应attribute的id，property的className对应attribute的class

实例：

$(function (){
      //DOM元素某些属性的更改也会影响到元素节点上对应的属性   
      var msg=document.getElementById("info");
      var $msg=$(msg);
      
      console.log($msg.attr("class")); //info
      $msg.prop("className","newClassName");
      console.log($msg.attr("class")); //newClassName
      
   })

表单元素中的区别

对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean

类型：如果被选中(或禁用)就返回true，否则返回false。

从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或

disabled，

实例：

   $(function (){
     //我使用的jq是1.8  
     var obj=$("#che");
     var val=obj.attr("checked"); //checked
     var val0=obj.prop("checked"); //true   
   })

表单初始化和改变后attr和prop的区别

在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，

对应的属性值也不会发生改变。即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。

因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked

selected、disabled才表示该属性实时状态的值(值为true或false)。

在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它

能够用 prop()实现的操作，也尽量使用prop()函数。