jQuery | data() with Examples - GeeksforGeeks

27 Oct, 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>    <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", "GeeksforGeeks !!!");            });        <!-- 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-  
 
akshaysingh98088
surinderdawra388
jQuery-Misc
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to fetch data from JSON file and display in HTML table using jQuery ?
How to Dynamically Add/Remove Table Rows using jQuery ?