All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

jQuery Get Data Attribute

Last Updated : Mar 11, 2024

jQuery Get Data Attribute

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 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">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//">
<script src=""></script>
<script src=""></script>
   <input type="text" id="txtValue" src="" data-value="90">
   var value = $('#txtValue').data('value');
   console.log("The value is=" + value);
  1. 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.
  2. 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.
  3. As a next step, we create the font size and weight.
  4. Closing allows us to style.
  5. 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.
  6. The script is then closed.
  7. The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
  8. Then we assign text value and close body.
  9. 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.
  10. 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.

Author Image About Ashish

Ashish is a dynamic and motivated individual with a passion of programming and an experienced programmer having 3+ years of experience in various languages like Java, Python, HTML, CSS, JavaScript, jQuery and various frameworks like Bootstrap

Follow Ashish On Linkedin 🡪