jQuery中prop()和attr()方法的区别

在jQuery中，有两个常用的方法prop()和attr()，它们都用于获取或设置元素的属性，但它们之间存在一些区别。下面我们来看一下这两个方法的区别。

概述

prop()

• prop()方法用于获取匹配的元素集合中第一个元素的属性值或者设置每一个元素的一个或多个属性值。如果元素没有相应的属性，则返回undefined。
• prop()方法只能用于获取和设置元素固有属性，如checked、selected或者disabled等。

attr()

• attr()方法用于获取匹配的元素集合中第一个元素的属性值或者设置每一个元素的一个或多个属性值。如果元素没有相应的属性，则返回undefined。
• attr()方法可以获取和设置自定义属性和固有属性。

区别

• 在获取属性值时

  当元素存在属性时，prop()和attr()获取的值是一样的。但是，当元素没有对应属性时，prop()方法会返回undefined，而attr()方法会返回null。

• 在设置属性值时

  prop()方法用于设置固有属性，如disabled，checked，而对于其他属性，我们应该使用attr()方法。

  var $input = $('input[type="text"]');
  $input.prop('disabled', true); //设置禁用
  $input.attr('data-name', 'zhangsan'); //设置自定义属性
  

• 在boolean类型的属性上

  当我们想要获取或设置一个布尔类型的属性时，如disabled，checked，readonly，我们应该使用prop()方法，而不是attr()方法。如果我们使用attr()方法设置这类属性值，则会将字符串“true”或“false”设置为属性值。

  //将按钮设置为禁用（disabled），并设置自定义属性
  var $button = $('button');
  $button.prop('disabled', true);
  $button.attr('data-name', 'zhangsan');
  
  //获取禁用按钮的自定义属性值（会返回undefined）
  $button.prop('disabled'); //true
  $button.attr('data-name'); //zhangsan
  

• 在HTML5数据属性上

  对于HTML5的data-属性，我们应该使用data()方法来设置或获取其值，而不是使用attr()或prop()方法。

  //获取data-name属性的值
  var name = $('div').data('name');
  //设置data-name属性的值
  $('div').data('name', 'zhangsan');
  

总结

• 使用prop()方法用于获取和设置固有属性；
• 使用attr()方法用于获取和设置自定义属性和固有属性；
• 对于布尔类型的属性，如disabled，应该使用prop()方法；
• 对于HTML5数据属性，应该使用data()方法。