Question

jquery中attr和prop的区别

Answer 1

两者从中文意思理解，都是获取/设置属性的方法。

attr 方法一般用于操作自定义属性，通过访问、操作 DOM 元素的属性节点来工作，类似 JS 中的 setAttribute("属性","值")和取得属性值getAttribute("属性")，事实上 jQuery 的源码中也是利用这两个原生方法。

那么为什么还要有 prop 方法呢？不是多此一举吗？其实不然，prop 方法是 jQuery v1.6.1 才新出来的，性能要更好一些，解决了 window 或 document 无法使用 attr 方法的问题，同时在获取元素状态时返回布尔值，大大方便了对状态的判断。prop 一般用于操作 HTML 元素固有属性。

举一些例子来辅助说明吧，假设有如下 HTML 元素：

<input type="text" id="ipt1" name="demo">
<input type="radio" id="radio" disabled>
<input type="checkbox" id="ckbox" checked>
<input type="text" id="ipt3">
<input type="text" id="ipt4">
<span id="span" data-tip="abc"></span>

验证结果如下：

console.group('获取固有属性');
console.log($('#ipt1').attr('name'));  // 'demo'
console.log($('#ipt1').prop('name'));  // 'demo'
console.groupEnd();

console.group('获取固有属性-状态值');
console.log($('#radio').attr('disabled'));  // 'disbaled'
console.log($('#radio').prop('disabled'));  // true
console.log($('#ckbox').attr('checked'));  // 'checked'
console.log($('#ckbox').prop('checked'));  // true
console.groupEnd();

$('#ipt3').attr('readonly', true);  // 文本框处于只读状态
$('#ipt4').prop('readonly', true);  // 同上

console.group('获取自定义属性');
console.log($('#span').attr('data-tip'));  // 'abc'
console.log($('#span').prop('data-tip'));  // undefined
console.groupEnd();

console.group('获取不存在的自定义属性');
console.log($('#span').attr('data-none'));  // undefined
console.log($('#span').prop('data-none'));  // undefined
console.groupEnd();