In this article we will show you the solution of jQuery get data attribute, using the elements' id, name, and class, jQuery retrieves data and the text property value; You will learn how to use jQuery to retrieve and set data-attribute, data attribute id, data-attribute text, etc.
A data attribute is one that begins with the letters "data-" and is present on any element.
jQuery offers a number of ways to manipulate HTML elements. Finding an HTML element's data-id attribute is as easy as using the jQuery attr() method.
If you use a more recent version of jQuery (>= 1.4.3), you can attach data of whatever types to DOM elements using the.data() method in a way that prevents memory leaks and circular references.
Step By Step Guide On jQuery Get Data Attribute :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<input type="text" id="txtValue" src="" data-value="90">
</body>
<script>
var value = $('#txtValue').data('value');
console.log("The value is=" + value);
</script>
</html>
- To get started, we need to write <HTML>, which tells the browser what version of HTML we're using. HTML documents contain tags as their first element.
- For the project's heading, use the head> tag. Unlike the closing brackets at the end of the sentence, the title and closing brackets are both open. A step-by-step style sheet, also known as an external style sheet, appears on a webpage depending on the URL or path.
- As a next step, we create the font size and weight.
- Closing allows us to style.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we assign text value and close body.
- Then we again open the <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- After that we close program using </script></html>
Conclusion :-
Developers can add more data to an element using the HTML5 data- attributes.
When adding the data attribute to an element, you can do it by using the prefix data- (any element).
I hope this article on jQuery get data attribute helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
