深入探究jQuery.data: jQuery源码分析笔记(6)中有哪些关键发现？

在jQuery源码分析笔记(6)中，我们深入探讨了jQuery.data()方法。这个方法允许我们在DOM元素上附加任何类型的数据，而无需使用多余的属性或隐藏的HTML属性。

（图片来源网络，侵删）

jQuery.data() 是 jQuery 提供的一个方法，用于在元素上存储任意类型的数据，这个方法允许我们在 DOM 元素上附加额外的信息，而不需要修改元素的结构或属性，通过jQuery.data()，我们可以为元素添加自定义的数据属性，并在需要时检索这些数据。

使用方法

设置数据

要设置元素的数据，可以使用jQuery.data() 方法并传递两个参数：第一个参数是要操作的元素，第二个参数是要设置的数据的键名，第三个参数是要设置的数据的值。

// 设置单个元素的数据
$("#element").data("key", "value");
// 设置多个元素的数据
$(".elements").data("key", "value");

获取数据

（图片来源网络，侵删）

要获取元素的数据，可以使用相同的jQuery.data() 方法，但只传递一个参数：要操作的元素，这将返回一个对象，其中包含所有与该元素关联的数据。

// 获取单个元素的数据
var value = $("#element").data("key");
// 获取多个元素的数据
var values = $(".elements").data("key");

删除数据

要删除元素的数据，可以使用jQuery.removeData() 方法，并传递两个参数：第一个参数是要操作的元素，第二个参数是要删除的数据的键名。

// 删除单个元素的数据
$("#element").removeData("key");
// 删除多个元素的数据
$(".elements").removeData("key");

示例代码

以下是一个使用jQuery.data() 的简单示例：

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>jQuery Data Example</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <div id="myDiv" datacustom="initialValue">Hello, World!</div>
    <button id="setDataBtn">Set Data</button>
    <button id="getDataBtn">Get Data</button>
    <button id="removeDataBtn">Remove Data</button>
    <script>
        // 设置数据
        $("#setDataBtn").click(function() {
            $("#myDiv").data("custom", "newValue");
        });
        // 获取数据
        $("#getDataBtn").click(function() {
            var value = $("#myDiv").data("custom");
            alert("Data value: " + value);
        });
        // 删除数据
        $("#removeDataBtn").click(function() {
            $("#myDiv").removeData("custom");
        });
    </script>
</body>
</html>

在这个示例中，我们有一个带有自定义数据属性的div 元素和三个按钮，点击 "Set Data" 按钮会将新的值设置为custom 数据属性；点击 "Get Data" 按钮会弹出一个包含当前值的警告框；点击 "Remove Data" 按钮会删除custom 数据属性。