jQuery中.attr()和.data()的区别分析

jQuery中的attr()和data()都是操作元素属性的方法，它们都能够让我们获取或设置指定元素的属性值，但是二者之间也存在一些不同之处。

1. attr()方法

attr()用于获取或设置HTML元素的属性值，它可以读取HTML元素的属性值，并且也可以添加、更新或删除指定元素的属性值，并且会直接修改DOM元素对应的属性。

1.1. 获取元素属性的值

如果想要获取指定元素的某个属性值，那么可以调用attr()方法，通过参数来指定要获取的属性名称，例如：

var imgUrl = $("#myImg").attr("src");
console.log(imgUrl);

上面的代码就可以获取到id为myImg的img标签的src属性值。

1.2. 设置元素属性的值

如果我们想要设置元素的属性值，那么也可以使用attr()方法，例如：

$("#myImg").attr("src", "newImg.jpg");

这个代码片段就可以将id为myImg的img标签的src属性值设置为newImg.jpg。

1.3. 删除元素的属性

如果我们要删除元素的属性值，那么也可以使用attr()方法来实现操作，例如：

$("#myImg").removeAttr("src");

这个代码片段就可以将id为myImg的img标签的src属性值删除。

2. data()方法

data()方法与attr()方法略有不同，它用于读取或设置特定元素的数据。相对于使用attr()方法来存储数据，使用data()方法可以更加方便地组件数据，并且在DOM元素中不会以属性的形式展示。

2.1. 存储数据

如果我们想向元素中添加数据，那么我们可以使用data()方法来实现。例如：

$("#myDiv").data("name", "John");

对于这个代码片段，我们就在id为myDiv的div标签中添加了一个名为name的数据，并且赋值为John。这个数据是不会被放在DOM元素中的。

2.2. 读取数据

当我们需要获取元素中存储的数据时，可以通过指定数据名称来调用data()方法。例如：

var name = $("#myDiv").data("name");
console.log(name);

这个代码片段就可以获取到id为myDiv的div标签中设置的名为name的数据的值，输出为John。

2.3. 删除数据

如果需要删除元素中的数据，那么可以使用removeData()方法，例如：

$("#myDiv").removeData("name");

这个代码片段就可以删除id为myDiv的div标签中名为name的数据。

3. 总结

从以上的介绍可以看出，attr()方法用于读取或设置HTML元素的属性值，而data()方法用于读取或设置特定元素的数据。attr()方法直接修改DOM元素对应的属性，而data()方法则不会在DOM元素中以属性的形式展示数据。在实际使用中，我们需要根据具体情况选择合适的方法来操作元素的属性或数据。