In this article we will show you the solution of add data attribute jquery, a custom attribute who stores information is called a data attribute. A descriptive name of both the data being stored comes after the prefix "data-" in all data characteristics.
You can use any HTML element and have numerous data properties on that element.
With JQuery, obtaining actual information from the information attribute is quite easy.
These attributes are frequently used in elements that are connected to click events.
Imagine you've got a list of options for users to choose from, and that each option has a button.
The selected items' attributes and values are set or returned by the attr() method. This method only provides the value for the initial matched element when the attribute value is requested.
This method sets any or so attribute/value pair for such a collection of matched elements when utilized to set attribute values.
The extensibility of HTML is intended towards data which ought to be related to a certain element but need to have a defined meaning.
Without using other workarounds like non-standard attributes or additional DOM properties, data-* attributes allow us both to store more information on regular, semantic HTML elements.
Step By Step Guide On Add Data Attribute jQuery :-
<!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>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open. External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
- Next, we create the font size and weight in style.
- Then we style by closing our eyes.
- 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.
- Then 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.
- 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 create an input type text value.
- Then we close </body>
- Then 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.
- The script is then closed.
- After that we close program using </html>
Conclusion :-
Custom data that is specific to a page or application is stored using the data-* attribute.
Each HTML element can have custom data attributes via the data-* attribute.
The JavaScript on the page can then use the saved (custom) data to improve how users feel (without any Ajax calls or server-side database queries).
I hope this article on add data attribute jquery helps you and the steps and mentioned above are easy to follow and implement.
About Pragati
