Skip to content
Related Articles

Related Articles

Improve Article

jQuery | data() with Examples

  • Last Updated : 27 Jun, 2021

The data() is an inbuilt method in jQuery which is used to attach data or get data for the selected elements. 
Syntax: 
 

$(selector).data(para1);

Parameter : It accepts an optional parameter “para1” which specifies the name of the data to retrieve for the selected element. 
Return Value: It returns the retrieved data for the selected element.
jQuery code to show the working of data() method: 
Code #1: 
In the below code, data is attach to the selected element. 
 

html




<html>
 
<head>
                 jquery/3.3.1/jquery.min.js"></script>
    <style>
        div {
            display: block;
            width: 500px;
            font-size: 37px;
            padding: 50px;
            background-color: lightgrey;
        }
         
        span {
            color: green;
        }
    </style>
</head>
 
<body>
    <div>
        Welcome to
        <span></span>for<span></span>!
    </div>
    <script>
        <!-- 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);
    </script>
</body>
 
</html>

Output: 
 

Code #2: 
In the below code, The data is attaching and retrieving from the “div” element using buttons. 
 



html




<html>
 
<head>
                 jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(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"));
            });
        });
    </script>
    <style>
        #b1,
        #b2 {
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
 
<body>
<!-- This button will attach data to the div element -->
    <button id="b1">This will attach data to div
                       element</button>
    <br>
<!-- This button retrieve the attached data
            from the div element -->
    <button id="b2">This will retrieve the attached data
                     to div element</button>
    <div></div>
</body>
 
</html>

Output: 
Just after clicking the run button- 
 

After clicking the “This will retrieve the attached data to div element” button just after clicking the “This will attach data to div element” button- 
 

After clicking the “This will retrieve the attached data to div element” button without clicking the “This will attach data to div element” button- 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :