jQuery Get Data Attribute
Last Updated : Apr 27, 2023
IN - jQuery
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 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.
- After that we close program using </script></html>
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.