jQuery Data vs Attr?

HTML Web Development Front End Technology

The data() in jQuery is used to fetch the value of any custom data attribute from the matched HTML element(s).

The jQuery attr() method is used to fetch the value of any standard attribute from the matched HTML element(s).

Let us see the differences −

The .attr() method includes DOM Manipulation and gets the data from the current HTML or change the HTML code if used to change an attribute value.
The .data() method does not include DOM manipulation and gets the data from the internal cache and will change that data if a set is called.
The .data() method requires a prefix 'data-' to work, whereas .attr() doesn’t.
The .data() has more advantage over .attr() because variables are stored in the node object, therefore we can store complex objects, not just string values.
The .data() is better way to store data when we have to get/set data relative to the current state of our application.
The .attr() call is better when we're dealing with changes on DOM tree.

Let us now see what are .$data() and $.attr() in jQuery.

$.data() in jQuery

The jQuery data() method is used to fetch the value of any custom data attribute from the matched HTML element(s). Let us see an example to get author-name and year attributes of a <div> element −

<!doctype html>
<html>
<head>
   <title>jQuery data()</title>
   <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
   <script>
      $(document).ready(function() {
         $("button").click(function(){
            alert( "Author = " + $("#home").data("author-name"));
            alert( "Year = " + $("#home").data("year"));
         });
      });
   </script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   <div id="home" data-author-name="Amit" data-year="2022">
      Demo
   </div>
   <br>
   <button>Get Attribute</button>
</body>
</html>

Output

Click Get Attribute and the Name will be visible on the Alert Box −

Now, click the Alert Box OK. The Year will be visible −

$.attr() in jQuery

The jQuery attr() method is used to fetch the value of any standard attribute from the matched HTML element.

Let us see an example to get href and title attributes of an anchor <a> element −

<!doctype html>
<html>
<head>
<title> jQuery attr() Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         alert( "Href = " + $("#home").attr("href"));
         alert( "Title = " + $("#home").attr("title"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
   <button>Get Attribute</button>
</body>
</html>