jQuery Data()方法

jQuery Data()方法是用于在HTML元素上存储数据的一种简单而强大的方式。通过该方法，可以将任意对象附加到DOM元素上，这些对象可以是简单的字面量对象，也可以是实例化的JavaScript对象。

使用方法

首先，需要在需要存储数据的元素上使用.data()方法，该方法可以接受两个参数：

$(element).data(key, value);

其中，第一个参数key是所存储数据的键名，第二个参数value是要存储的数据。例如：

$( "#myDiv" ).data( "info", { name: "Joe", age: 35 } );

这将在#myDiv元素上附加一个名为"info"的JavaScript对象，该对象包含名为"name"和"age"的属性。

可以使用.data()方法来检索对应的值：

var myData = $( "#myDiv" ).data( "info" );
console.log(myData.name); // 输出 "Joe"

删除数据

如果需要删除某个元素上存储的数据，可以使用.removeData()方法：

$(element).removeData(key);

例如：

$( "#myDiv" ).removeData( "info" );

该方法将删除#myDiv元素上名为"info"的数据对象。

数据存储类型

可以使用.data()方法存储不同类型的数据，包括字符串、数字、布尔值、函数、数组和对象等。例如：

$( "#myDiv" ).data( "message", "Hello, world!" );
$( "#myDiv" ).data( "count", 123 );
$( "#myDiv" ).data( "isTrue", true );
$( "#myDiv" ).data( "myFunction", function() { alert("Hello, world!"); } );
$( "#myDiv" ).data( "myArray", [ 1, 2, 3 ] );
$( "#myDiv" ).data( "myObject", { name: "Joe", age: 35 } );

总结

jQuery Data()方法是一种简单而强大的方式，可用于在HTML元素上存储和检索数据。无论是用于存储简单的字面量对象，还是存储实例化的JavaScript对象，它都是非常有用的工具。同时，它也是一个非常快速和高效的方式来访问元素上的数据。