jQuery $.attr() 与 $.data()：何时使用哪个？

jQuery Data 与 Attr

使用数据属性时，可以使用两种主要的 jQuery 方法：$.data 和 $.data。属性。了解它们的差异对于有效的数据存储和检索至关重要。

HTML5 数据属性的 $.attr

如果您正在处理 HTML5 数据属性，例如作为<a>，适当的方法是$.attr。这使您能够直接从元素的 HTML 读取和写入数据属性。例如：

$('#foo').attr('data-foo'); // Outputs: "bar"
$('#foo').attr('data-foo', 'baz'); // Updates the attribute to "baz"

$.data 用于任意数据存储

相反，$.data 允许您在元素上存储任意数据，与特定的数据无关属性。该数据不能通过 HTML 访问，而是通过 jQuery 缓存访问。它通常用于小部件实例化和存储复杂对象。例如：

$('#foo').data('myData', {key: 'value'});
$('#foo').data('myData').key; // Outputs: "value"

$.data 中的连字符和驼峰命名法

使用 $.data 时，带连字符的数据属性名称会自动转换为驼峰命名法，而原始的带连字符的格式在 HTML 中仍然可用。但是，不建议在 JavaScript 中使用连字符通过 $.data() 进行访问。

$.data 中的自动转换

$.data 的另一个有用功能() 是它自动转换值的能力。如果该值与识别的模式匹配，它将被转换为适当的数据类型。这种简化的模式：

<a>

可以通过以下方式访问：

$('#foo').data('num'); // Outputs: 15
$('#foo').data('bool'); // Outputs: true
$('#foo').data('json'); // Outputs: {fizz: ['buzz']}

何时使用 $.attr 与 $.data

一般，使用 $.attr 访问需要与 HTML 直接交互的 HTML5 数据属性。使用 $.data 存储无法通过 HTML 访问的任意数据，尤其是在处理复杂对象时。

以上是jQuery $.attr() 与 $.data()：何时使用哪个？的详细内容。更多信息请关注PHP中文网其他相关文章！