Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
jQuery Data vs Attr?
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>
Output
Click the Get Attribute button. An alert box will be visible displaying the href −
Click on the Alert Box OK and the following title will be visible −
2K+ Views
