博客

jQuery data()的例子

  • Post category:jquery

下面我将为你详细讲解“jQuery data()的例子”的完整攻略。

jQuery data()方法

jQuery中的data()方法用于向元素中存储任意的数据和对象，以便在之后的使用中能够获取或者修改数据。

使用方法

  • 存储数据：

在元素上调用”data()”方法，将数据保存到该元素上，其中参数name是一个字符串，表示存储数据的名称；data是存储的数据。

$('body').data('name', 'Mark');

  • 获取数据：

我们可以通过在元素上调用”data()”方法来获取存储在该元素上的数据。

$('body').data('name');  //Mark

  • 移除数据：

通过在元素上调用”data()”函数，并将一个参数传入null即可从元素上移除数据

$('body').data('name', null);

例子1：使用data()方法保存一个对象并获取

下面是一个使用data()方法将一个自定义对象添加到元素上的示例：

<body>
  <div id="myData" data-name="myCustomObject"></div>
</body>

//创建自定义对象
let myCustomObject = {
    property1: "Hello",
    property2: "World"
};

//将对象保存到元素上
$('#myData').data('myData', myCustomObject);

//从元素上获取数据
console.log($('#myData').data('myData')); //{property1: "Hello", property2: "World"}

例子2：使用data()方法存储和获取HTML元素的值

下面是一个使用data()方法将文本框中输入的值存储到元素上的示例：

<body>
  <input type="text" id="myTextbox" />
  <button id="saveButton">保存</button>
</body>

//当点击按钮时，将文本框中输入的值存储到元素上
$('#saveButton').click(function() {
    let textboxValue = $('#myTextbox').val();
    $('#myTextbox').data('textboxValue', textboxValue);
});

//当需要获取存储在元素上的数据时
console.log($('#myTextbox').data('textboxValue'));

这就是关于”jQuery data()的例子”的完整攻略。

Tags: