📌  相关文章
📜  jQuery | data() 与示例(1)

📅  最后修改于: 2023-12-03 14:43:15.020000             🧑  作者: Mango

jQuery | data() 方法与示例

在jQuery中，我们可以使用data()方法来管理和存储数据。这个方法可以给元素添加一个对象来存储数据，让JavaScript代码通过这个对象来访问这些数据，避免污染全局变量。

语法

data()方法的语法如下：

$(selector).data(name, value);
  • selector: 必须。jQuery选择器，用于选择要操作的元素。
  • name: 必须。一个字符串，用于指定要添加的数据的键名（key）。
  • value: 可选。任何类型的值，用于指定要保存的数据。
示例

以下代码演示了如何使用data()方法存储和获取数据。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery | data() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h3>点击这个段落</h3>
    <p id="demo">该段落将显示被点击的次数。</p>
    
    <script>
        $(function(){
            var count = 0;
            $("#demo").data("count", count);
            
            $("#demo").click(function(){
                count = $("#demo").data("count") + 1;
                $("#demo").data("count", count);
                
                $("#demo").html("点击次数：" + count);
            });
        });
    </script>
</body>
</html>

这段代码创建了一个段落，并给它添加了一个id为'mydata'和数据名称为'count'的数据。然后，我们使用jQuery的click()方法添加了一个单击事件，每次单击时，它会从存储的计数中获取值，将其增加1，然后将它存储回去，并将结果显示在段落中。

结论

data()方法是一种方便的方式，用于从元素中存储和检索数据。这种方法通过它自己的锁定机制避免了全局变量的使用，是一种良好的JavaScript编程实践。