jQuery中attr、prop、data区别与用法分析

在使用jQuery操作DOM时，我们经常会使用attr、prop、data这三个方法。它们都可以用来获取和设置元素的属性或数据，但是它们的用法和作用有所不同。

1. attr方法

attr方法可以用来获取和设置元素的属性值，如src、href、class、title等等。attr方法针对的是html属性，它不能获取和设置自定义的数据。

1.1 获取属性值

// 获取a标签的href属性
var link = $('a').attr('href');
console.log(link); // 'http://www.example.com'

// 获取img标签的alt属性
var alt = $('img').attr('alt');
console.log(alt); // '图片描述'

1.2 设置属性值

// 设置a标签的href属性
$('a').attr('href', 'http://www.google.com');

// 设置img标签的alt属性
$('img').attr('alt', 'The description of image');

2. prop方法

prop方法也可以用来获取和设置元素的属性值，但是它针对的是DOM属性，可以用来获取和设置自定义的数据，比如input元素的checked属性。

2.1 获取属性值

// 获取input元素的value属性
var value = $('input').prop('value');
console.log(value);

// 获取input元素的checked属性
var isChecked = $('input').prop('checked');
console.log(isChecked);

2.2 设置属性值

// 设置input元素的value属性
$('input').prop('value', 'new value');

// 设置input元素的checked属性
$('input').prop('checked', true);

3. data方法

data方法用来获取和设置自定义的数据，它不会操作DOM属性或html属性，而是将数据存储在元素的内存中。

3.1 获取数据

// 获取存储在元素的数据
var name = $('div').data('name');
console.log(name); // Jack

// 获取存储在元素的数据
var age = $('div').data('age');
console.log(age); // 18

3.2 设置数据

// 存储数据到元素中
$('div').data('name', 'Lucy');

// 存储数据到元素中
$('div').data('age', 20);

4. 区别与应用场景

• attr：用来获取和设置HTML属性，针对的是DOM中的具体属性，无法获取和设置自定义数据。
• prop：用来获取和设置DOM属性或者自定义数据，可以获取和设置input元素的checked属性等自定义数据。
• data：用来获取和设置自定义数据，针对的是元素的内存中的数据，不会直接操作DOM属性。

在实际开发中，我们可以采用以下场景应用这三种方法：

• 对于HTML属性的获取和设置，使用attr方法；
• 对于DOM属性的获取和设置，使用prop方法；
• 对于自定义数据的存储和获取，使用data方法。

比如，在表格中存储额外的数据时，我们可以使用data方法：

<table>
  <tr data-id="1" data-name="Tom" data-sex="male">
    <td>1</td>
    <td>Tom</td>
    <td>male</td>
  </tr>
  <tr data-id="2" data-name="Lily" data-sex="female">
    <td>2</td>
    <td>Lily</td>
    <td>female</td>
  </tr>
</table>

// 获取表格中元素的自定义数据
$('table tr').each(function() {
  var id = $(this).data('id');
  var name = $(this).data('name');
  var sex = $(this).data('sex');
  console.log('id:', id, 'name:', name, 'sex:', sex);
});