jQuery如何存储与匹配元素相关的任意数据。-编程学习网

这篇文章将为大家详细讲解有关jQuery如何存储与匹配元素相关的任意数据。，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

jQuery 提供了灵活的方式来存储与匹配元素相关的任意数据，这对于在应用程序中管理和传递数据非常有用。主要有两种方法：

1. data() 方法

data() 方法允许将任意数据存储到与匹配元素关联的对象中。数据驻留在元素上，不会传播到其他元素。

语法：

data(key, value)

示例：

将用户 ID 存储在 <div> 元素中：

$("div").data("userId", 1234);

以后可以检索存储的数据：

const userId = $("div").data("userId"); // 1234

2. attr() 方法

attr() 方法通常用于设置或获取 HTML 属性，但也可以用于存储自定义数据。与 data() 方法不同，attr() 方法存储的数据会直接写入 HTML 中，这意味着它可以在其他地方（例如通过 CSS）访问。

语法：

attr(key, value)

示例：

将语言代码存储在 <p> 元素中：

$("p").attr("data-lang", "en");

以后可以检索存储的数据：

const langCode = $("p").attr("data-lang"); // "en"

选择方法

选择使用 data() 还是 attr() 方法取决于数据的类型和使用目的：

data() 方法：
- 存储与元素关联的任意数据，包括复杂对象。
- 数据不会传播到其他元素，因此是存储私有或临时数据的理想选择。
- 不会写入 HTML 中，因此不会被 CSS 或其他外部因素访问。
attr() 方法：
- 存储字符串格式的数据，通常用于自定义属性。
- 数据会写入 HTML 中，因此可以在其他地方访问。
- 适合存储需要在元素之间共享或用于样式目的的信息。