jQuery如何存储与一个元素相关的数据

jQuery如何存储与一个元素相关的数据

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档,或者更准确地说,文档对象模型(DOM)和JavaScript之间的互动。阐述这些术语,jQuery简化了HTML文档的遍历和操作,浏览器事件处理,DOM动画,Ajax交互,以及跨浏览器的JavaScript开发。

在这篇文章中,我们看到如何使用jQuery存储与HTML元素相关的数据,同时通过实例了解其实现。

这个任务可以在jQuery的_data()方法的帮助下完成。data()是一个内置的方法,存储与匹配元素相关的任意数据,或命名的数据值将被返回,其中包含匹配元素集合中的第一个元素。

语法:

$(selector).data(element);

方法:这里,jQuery将数据存储在一个HTML div元素中。有两个按钮,其中一个将数据附加到id为 “divID “的div元素上。 另一个按钮检索数据,将其显示在另一个HTML div中,即id为 “resultID”。

例子1:下面的例子说明了jQuery存储数据的名称,然后为选定的元素检索它。

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        (document).ready(function() {
            ("#btnID1").click(function() {
                ("#divID").data("data1", "value1");
                ("#divID").show().html("Data is attached to div<br>");
            });
            ("#btnID2").click(function() {
                var resultData =("#divID").data("data1");
                $("#resultID").show().html(
                  "<b>You retrieved value is:</b> "
                  + resultData);
            });
        });
    </script>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>
        jQuery storing of Data related to an element
    </h3><br/>
    <div id="divID"> </div>
    <button id="btnID1">
        Attach data to div element
    </button>
    <button id="btnID2">
        Retrieve the attached data
    </button><br/>
    <div id="resultID"></div>
</body>
</html>

输出:

jQuery如何存储与一个元素相关的数据?

例子2:下面的例子演示了,使用JavaScript开关语句将数据存储到一个HTML div元素。不同的按钮可以使用data()方法来获取或设置HTML div元素的值。

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <style>
        div,
        button,
        p {
            margin: 5px;
        }
         
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>
        jQuery storing of Data related to an element
    </h3>
    <div id="resultID"></div>
    <button>
        Get "mydata" from the HTML div
    </button>
    <button>
        Set "mydata" to "helloWorld" value
    </button>
    <br>
    <button>
        Set "mydata" to number 75
    </button>
     
<p>
        <b>The "mydata" value is:</b>
       <span></span>
    </p>
 
 
    <script>
        ("button").click(function() {
            var value;
            switch(("button").index(this)) {
                case 0:
                    value = ("#resultID").data("mydata");
                    break;
                case 1:
                    ("#resultID").data("mydata", "helloWorld");
                    value = "Stored";
                    break;
                case 2:
                    ("div").data("blah", 75);
                    value = "Num stored";
                    break;
            }
            ("span").text("" + value);
        });
    </script>
</body>
</html>

输出:

jQuery如何存储与一个元素相关的数据?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程