attribute和property，attr()和prop()的区别

jQuery中attr( )和prop( )都可以用来设置或者读取某元素的属性值，但是他们之间也有很大区别，prop( )是针对Dom元素属性，attr( )针对HTML元素属性，本文分两个模块帮助我们更好地理解他们之间的区别。

一：Attribute和Property的区别

1.含义区别

首先在定义上更准确的来说，Attribute和Property分别为特性和属性，作为区别。
其次，这样理解下来，我们知道Attribute就是DOM节点自带属性，例如我们在HTML中常用的id,class,src,title,alt等。而Property则是这个DOM元素作为对象，其附加的属性或者内容，例如childNodes，firstChild等。

另外我们常把他们弄混淆是因为，有些例如id,class,title常用的Attribute已经被作为Property附加在DOM对象上，也可以取值和赋值。但是自定义的Attribute就不能了，例如：

//这里的title1是自定义属性不能作为property
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">自定义attribute</div>

2.取值和赋值区别

• Attribute取值和赋值

//attribute取值
  getAttribute()
  eg:var id = div1.getAttribute("id")
     var id = div1.getAttribute("title1")
//attribute赋值
  getAttribute(attribute,value)  //value只能是字符串形式
  eg:div1.setAttribute('class', 'a');
     div1.setAttribute('title1', 'asd');  //自定义属性也可

• Property取值和赋值

//通过'.'号获取property
  var id = div1.id;
  var className = div1.className; //相当于div1.getAttribute('class')
//通过'='赋予property
  div1.className = 'a';
  div1.align = 'center';

二：attr( )和prop( )区别

有了上面对attribute和property的区别了解，我们能很快定位他们的区别点。

• 针对属性对象不同

  prop( )是针对Dom元素属性，attr( )针对HTML元素属性，和attribute与property区别一样。

• 用于设置的属性值类型不同

  attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。

  prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

• 应用版本不同

  attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。

• 其他不同

  对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，两个的返回结果一样都是Boolean类型，

<input id="uid" type="checkbox" checked="checked" value="1">

var $uid = $('#uid');
// 选中复选框uid
console.log( $uid.attr("checked") ); // true
console.log( $uid.prop("checked") ); // true

// 取消复选框uid的选中(将其设为false即可)
$uid.prop("checked", false);

//获取结果
console.log( $uid.attr("checked") ); // false
console.log( $uid.prop("checked") ); // false

但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。

<input id="uid" type="checkbox" checked="checked" value="1">

var $uid = $('#uid');
// 选中复选框uid
console.log( $uid.attr("checked") ); // checked
console.log( $uid.prop("checked") ); // true

// 取消复选框uid的选中(将其设为false即可)
$uid.prop("checked", false);

//获取结果
console.log( $uid.attr("checked") ); // checked
console.log( $uid.prop("checked") ); // false

所以在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。