Jquery中attr()和props()的区别

• 针对属性对象不同

  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

注意：To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method. 

根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()