jQuery 的 attr 和 prop

jQuery 中可以使用 attr 和 prop 获取的属性，它们的区别是什么呢？

The segregation of attr() and prop() should help alleviate some of the confusion between HTML attributes and DOM properties. $.fn.prop() grabs the specified DOM property, while $.fn.attr() grabs the specified HTML attribute.

HTML attributes 在网页的代码中可以看到，DOM properties 是内存数据，在 HTML 代码中看不到。attr 操作的是 HTML attributes, prop 操作的是 DOM properties，它们可以是重叠的，例如 img 的 src 既可以使用 attr 访问，也可以使用 prop 访问，但是 checkbox 的 checked 应该使用 prop 访问，attr 访问会有奇怪的问题。大多数时候 attr 和 prop 的效果都一样，但是访问 boolean 的属性时切记要使用 prop。

• 读写 HTML 元素本身就带有的固有属性，也即是 DOM properties，尤其是 boolean 的属性，使用prop方法，例如

  • checked
  • selected
  • disabled
  • readOnly

• 读写自定义的 HTML 属性使用 attr，例如创建一个新的属性 data-avatar，当然例如 img 的 src 等使用 attr 读写是没有问题的

  自定义属性使用 prop 来写的话，不会生成到 HTML 的代码中，但是数据能够读取出来，不过因为看不到，所以很多时候就不方便调试。

The easiest way to see the difference between attr and prop is the following example:

<input blah="hello">

• $('input').attr('blah'): returns hello as expected. No suprises here.
• $('input').prop('blah'): returns undefined – because it’s trying to do [HTMLInputElement].blah – and no such property on that DOM object exists. It only exists in the scope as an attribute of that element i.e. [HTMLInputElement].getAttribute('blah')

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

• $('input').attr('blah'): returns apple, not pear as this was set last on that element. Because the property was changed on the input attribute, not the DOM input element itself – they basically almost work independently of each other.
• $('input').prop('blah'): returns pear

A property can contain things of different types. An attribute can only contain strings.