jQuery中data()方法用法实例

下面是“jQuery中data()方法用法实例”的完整攻略，希望能帮到你。

一、概述

在jQuery中，我们可以通过.data()方法来访问、设置元素中的数据属性。.data()方法可以将数据绑定到元素上，以便将来需要时可以轻松地访问它们。.data()方法还可以方便地管理存储在DOM元素上的数据。.data()方法可以接受一个参数名称，也可以接受一个包含键值对的对象作为参数。

二、参数用法

1. 使用字符串参数

使用data()方法并传递单个字符串参数，可以获取匹配元素上第一个元素的指定名称的数据值，也可以为该数据属性设置值。

<div id="test" data-name="test">this is a test div.</div>

// 获取数据
var name = $('#test').data('name');
// 输出：test
console.log(name);

// 设置数据
$('#test').data('name', 'hello world');
// 获取数据
var newName = $('#test').data('name');
// 输出：hello world
console.log(newName);

2. 使用对象参数

使用data()方法并传递一个包含键值对数据的对象，可以为每个指定名称的数据属性设置值。

<div id="test"></div>

// 设置数据
$('#test').data({
  name: 'hello',
  age: 18
});

// 获取数据
var name = $('#test').data('name');
var age = $('#test').data('age');

// 输出：hello, 18
console.log(name, age);

三、示例

下面提供两个示例，说明.data()方法的常见应用场景。

1. 保存数据

在开发网站时，我们经常需要在用户界面中保存一些数据。.data()方法可以为元素绑定键值对数据。例如，我们在用户界面中设置了某个元素的data-id属性值为123，如下所示：

<div class="item" data-id="123">item content</div>

可以使用.data()方法在页面文档加载时将其保存在后端服务器上。

$(function() {
  // 获取所有项
  var items = $('.item');

  items.each(function() {
    var id = $(this).data('id');
    // 提交保存到后台
    $.post('/save', {id: id});
  });
});

使用jQuery.each()方法遍历所有项，然后使用.data()方法获取它们的data-id属性的值，并提交到后端服务器。

2. 保存状态

还可以使用.data()方法来记录页面元素的状态。例如，我们在用户登录后将其用户名保存在.navbar元素上。

<div class="navbar" data-username="Tom">Hello Tom, welcome back!</div>

当用户单击Logout按钮时，我们可以使用.data()方法来清除data-username属性并切换回匿名状态。

$('#logout-btn').click(function() {
  // 清除用户名
  $('.navbar').data('username', '');
  // 切换回匿名状态
  $('.navbar').text('anonymous user');
});

单击Logout按钮时，会清除.navbar元素上的data-username属性，并将文本内容更改为anonymous user。

四、总结

.data()方法是jQuery框架中一个非常有用的方法。它可以方便地管理DOM元素上的数据属性，包括获取、设置和删除数据。.data()方法支持多种参数用法，可根据在项目中的实际需求选用不同的用法。