jQuery | data() 与示例

data()是 jQuery 中的一个内置方法，用于附加数据或获取所选元素的数据。
句法：

$(selector).data(para1);

参数：它接受一个可选参数“para1”，该参数指定要为所选元素检索的数据的名称。
返回值：它返回所选元素的检索数据。
显示 data() 方法工作的 jQuery 代码：
代码#1：
在下面的代码中，数据附加到所选元素。

html

 

    
    
        div {
            display: block;
            width: 500px;
            font-size: 37px;
            padding: 50px;
            background-color: lightgrey;
        }
         
        span {
            color: green;
        }
    

 

    
        Welcome to
        for!
    
    
        <!-- jQuery code to perform data method -->
        $("div").data("test", {
            first: "Geeks",
            last: "Geeks !"
        });
        $("span:first").text($("div").data("test").first);
        $("span:last").text($("div").data("test").last);
    

 

输出：

代码#2：
在下面的代码中，数据使用按钮从“div”元素附加和检索。

html

 

    
    
        $(document).ready(function() {
        <!--Here data is attaching to the div element -->
            $("#b1").click(function() {
                $("div").data("g", "GeeksforGeeks !!!");
            });
        <!-- Here data is retrieving from the div elemment -->
            $("#b2").click(function() {
                alert($("div").data("g"));
            });
        });
    
    
        #b1,
        #b2 {
            padding: 10px;
            margin: 5px;
        }
    

 


    This will attach data to div
                       element
    

    This will retrieve the attached data
                     to div element
    

 

输出：
点击运行按钮后——

在单击“这会将数据附加到 div 元素”按钮后，单击“这将检索附加数据到 div 元素”按钮后 –

单击“这将检索附加数据到 div 元素”按钮后，而不单击“这会将数据附加到 div 元素”按钮-