<think>我们正在讨论
jQuery中如何通过
HTML的
data-*属性存储
和检索多个值。根据
HTML标准，
data-*属性只能存储字符串。但在
jQuery中，我们可以利用其.
data()方法智能地处理数据，包括对象
和数组。步骤：1.存储多个值：我们可以将一个对象或数组存储在单个
data-*属性中，但需要将其序列化为JSON字符串。2.读取数据：使用
jQuery的.
data()方法可以自动将JSON字符串解析为
JavaScript对象，而使用.
attr()方法则只能得到字符串。示例：假设我们有一个div，需要存储多个数据：id, name,
和scores（数组）我们可以这样设置
属性：<divid="myDiv"
data-info='{"id":123, "name":"John","scores":[90,85,95]}'></div>注意：
属性值用单引号，内部JSON字符串用双引号（符合JSON标准）。在
jQuery中：//读取数据varinfo =$('#myDiv').
data('info');//info将是一个对象：{id:123,name:"John",scores:[90,85,95]}但是，如果我们使用.
attr()方法：varinfoStr= $('#myDiv').
attr('
data-info');//得到的是字符串：'{"id":123,"name":"John", "scores":[90,85,95]}'因此，推荐使用.
data()方法来读取，因为它会自动转换。另外，
jQuery的.
data()方法还可以通过代码设置数据，而不一定要写在
HTML属性中：$('#myDiv').
data('info', {id:123,name:"John",scores:[90,85,95]});这样设置的数据不会反映在
HTML属性上，而是存储在
jQuery内部对象中。在循环中绑定多个数据：假设我们有一个数组items，每个元素是一个对象，我们想为每个生成的元素设置多个数据。
方法一：在
HTML中设置
data-*属性（循环生成
HTML字符串
时）var
html= '';items.forEach(function(item){
html +='<divclass="item"
data-item=\'' +JSON.stringify(item)+ '\'></div>';});$('body').append(
html);然后，在事件处理中，我们可以这样获取：$('.item').click(function
() {varitem
Data= $(this).
data('item');//自动转换为对象console.log(item
Data.id);});
方法二：使用
jQuery的.
data()方法在创建元素后设置（避免在
HTML字符串中处理JSON）items.forEach(function(item){$('<div class="item">').appendTo('body').
data('item',item);});注意：
方法二中，数据不会出现在
HTML属性中，而是存储在
jQuery内部。这样更安全（避免XSS），但如果你需要服务端渲染或SEO，可能需要
方法一。关于XSS安全提示：当使用JSON.stringify
()并直接插入到
HTML属性中
时，要确保字符串中不包含单引号（因为我们用单引号包裹
属性值），或者进行转义。例如，如果item中的某个字符串包含单引号，可能会破坏
HTML结构。因此，我们可以：var escapedJson= JSON.stringify(item).replace(/'/g,"'");或者，使用双引号包裹
属性值，并转义双引号。但是，更安全的做法是避免在
HTML中嵌入JSON，而使用
方法二。总结：
-使用
jQuery的.
data()方法可以方便地存储
和读取复杂数据（对象、数组等）。
-在循环中，可以选择在生成
HTML字符串
时序列化数据到
data-*属性，或者生成元素后用.
data()方法设置。
-注意XSS安全问题，尽量避免在
HTML中嵌入不受信任的数据。现在，我们根据用户提供的引用（
jQuery代码示例）来结合说明：用户提供的代码是：$("button").click(function
(){$("div").each(function(index, domEle){// domEle ==this$(domEle).css("backgroundColor", "yellow");if($(this).is("#stop")){$("span").text("Stopped atdiv index#"+ index);return false;}});});假设我们想在每个div上存储多个数据，并在点击按钮
时使用。修改后的例子：
HTML:<div class="item"
data-item='{"id":1, "name":"Alice"}'>Alice</div><divclass="item"
data-item='{"id":2,"name":"Bob"}'>Bob</div><div id="stop" class="item"
data-item='{"id":3, "name":"Stop"}'>Stop</div>
jQuery:$("button").click(function
(){$("div.item").each(function (index,domEle) {var$this= $(domEle);$this.css("backgroundColor", "yellow");//获取存储的数据varitem
Data= $this.
data('item');console.log(item
Data.name);//输出名字if($this.is("#stop")){$("span").text("Stopped atdiv index#"+ index+ ",name:" +item
Data.name);returnfalse;}});});这样，我们就利用了
data-*属性存储了多个值，并通过
jQuery.
data()方法获取。注意事项：在
jQuery1.4.3以上，.
data()方法会自动解析JSON。如果JSON格式错误，则会返回字符串。相关问题：1.如何防止在
data-*属性中存储JSON字符串
时的XSS攻击？2.使用
jQuery的.
data()方法存储数据与
HTML5的
dataset
属性有何
区别？3.在循环处理大量元素
时，使用.
data()方法和直接读取
属性哪种性能更好？</think>###
jQuery 中通过 `
data-*`
属性存储
和访问多值数据
#### 1.
**`
data-*`
属性的字符串本质
**
- 所有
HTML 属性（包括 `
data-*`）
**只能存储字符串值
**，这是
HTML 标准限制[^1]。
- jQuery 的 `.
data()`
方法会自动处理类型转换：
```
javascript
//
HTML: <div id="user"
data-user='{"id":101,"name":"Alice"}'></div>
const user
Data = $('#user').
data('user');
console.log(typeof user
Data); // "object"（自动转为对象）
```
#### 2.
**存储多个值的两种
方法**
#####
方法 1：JSON 序列化（推荐）
```
html
<!
-- 单引号包裹JSON，避免冲突
-->
<div class="item"
data-item='{"id":101, "name":"Alice", "scores":[90,85,95]}'>
User
</div>
```
**jQuery 读取：
**
```
javascript
$(".item").click(function
() {
const item
Data = $(this).
data('item'); // 自动解析为对象
console.log(item
Data.scores[0]); // 90
});
```
#####
方法 2：拆分多个
属性
```
html
<div class="product"
data-product
-id="P123"
data-product
-price="49.99"
data-product
-tags="electronics,gadget">
Product
</div>
```
**jQuery 读取：
**
```
javascript
$(".product").click(function
() {
const $el = $(this);
const tags = $el.
data('product
-tags').split(','); // 转为数组
console.log({
id: $el.
data('product
-id'),
price: parseFloat($el.
data('product
-price')),
tags: tags
});
});
```
#### 3.
**循环中动态绑定数据
**
结合
jQuery 的 `.each
()`
和 `.
data()`：
```
javascript
const users = [
{id: 101, name: "Alice", roles: ["admin", "editor"]},
{id: 102, name: "Bob", roles: ["viewer"]}
];
// 动态创建元素并绑定数据
$.each(users, function(index, user) {
const $userDiv = $('<div class="user">')
.text(user.name)
.
data('user', user) // 存储完整对象
.appendTo('#container');
// 可选：设置可见
属性
$userDiv.
attr('
data-user
-id', user.id);
});
```
#### 4.
**数据读写操作对比
**
| 操作 | 代码示例 | 特点 |
|
---------------------|
----------------------------------|
--------------------------|
|
**写入数据
** | `$(el).
data('key', value)` | 支持任意JS类型 |
|
**读取数据
** | `$(el).
data('key')` | 自动类型转换 |
|
**读取
HTML属性** | `$(el).
attr('
data-key')` | 始终返回字符串 |
|
**批量设置
** | `$(el).
data({key1:val1, key2:val2})` | 一次设置多个值 |
#### 5.
**循环处理示例（基于引用[1]）
**
```
javascript
$("button").click(function
() {
$("div.item").each(function(index, domEle) {
const $ele = $(domEle);
const item
Data = $ele.
data('item');
$ele.css("background", index % 2 ? "#eee" : "#fff");
if ($ele.is("#stop")) {
$("#log").text(
`Stopped at: ID=${item
Data.id}, Name=${item
Data.name}`
);
return false; // 中断循环
}
});
});
```
#### 6.
**最佳实践与注意事项
**
1.
**数据类型转换
**：
```
javascript
// 字符串转数字
const price = parseFloat($ele.
data('price'));
// 字符串转数组
const tags = $ele.
data('tags').split(',');
// 布尔值处理
const isActive = $ele.
data('active') === 'true';
```
2.
**性能优化
**：
- 避免在循环内重复解析 JSON：在数据初始化
时完成解析
- 使用 `.
data()` 而非 `.
attr()` 读取复杂数据
3.
**XSS 防护
**：
```
javascript
// 不安全：直接插入未过滤数据
$div.
attr('
data-raw', userInput);
// 安全做法：序列化前转义
const safe
Data = {
content: $('<div>').text(userInput).
html()
};
$div.
data('safe', safe
Data);
```
---
### 相关问题
1.
**如何防止通过 `
data-*`
属性导致的 XSS 攻击？
**
2.
**使用 `$.
data()` 与原生 `
dataset`
属性有何性能差异？
**
3.
**在动态加载内容
时，如何确保 `
data-*` 绑定数据不丢失？
**
4.
**jQuery 的 `.
data()`
方法在存储函数类型
时有什么限制？
**
5.
**如何实现 `
data-*`
属性的响应式更新（类似 Vue 的绑定机制）？
**
[^1]:
HTML 标准要求所有
属性值必须是字符串，详见 [MDN
data-* 文档](https://developer.mozilla.org/en
-US/docs/Web/
HTML/Global_
attributes/
data-*)
本文探讨了jQuery中data()方法与attr()方法在数据存储上的区别：data()用于存储在jQuery对象内部，而attr()写入DOM元素。两者不互通，理解这二者的不同有助于前端开发者高效操作DOM。
扫一扫
1630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
