jQuery | data() with Examples

0 0 1 minute read

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>
    <script src="https://ajax.googleapis.com/ajax/libs/
                 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>
    <script src="https://ajax.googleapis.com/ajax/libs/
                 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", "zambiatek !!!");
            });
        <!-- Here data is retrieving from the div element -->
            $("#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-