Open In App

jQuery Data vs Attr

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery is a powerful JavaScript library that simplifies web development tasks, making it easier for developers to manipulate HTML elements and create dynamic web pages. One of the most useful features of jQuery is its ability to handle data and attributes of HTML elements. 

In this article, we will compare and contrast jQuery Data vs Attr and see how they differ from each other.

Syntax: The syntax for accessing data and attributes using jQuery is similar for both Data and Attr. 

  • Data:
$(selector).data(key, value);
$(selector).data(key);
  • Atrr:
$(selector).attr(name, value);
$(selector).attr(name);

To demonstrate the differences between jQuery Data vs Attr, let us consider two examples using HTML.

Example 1: This code demonstrates the setting and getting Data using jQuery Data. We are using jQuery Data to store the number of times the button has been clicked. We are setting the initial count to 0, and increment it every time the button is clicked. We are displaying the count in an alert message by using jQuery Data. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script
  
    <style>
        body {
            text-align: center;
        }
  
        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
  
    <button id="myButton">Click Me!</button>
    <br>
    <div></div>
    <script>
        $(document).ready(function () {
            
            // Set data associated with the button
            $("#myButton").data("count", 0);
  
            // Increment data and display it on click
            $("#myButton").click(function () {
                var count = $(this).data("count");
                count++;
                $(this).data("count", count);
                alert("Button clicked " + count + " times.");
            });
        });
    </script>
</body>
</html>


Output:

 

Example 2: Setting and Getting Attributes using jQuery Attr

Suppose we have an HTML image with the ID “myImage”, and we want to change its source attribute. We are using jQuery Attr to modify the HTML attributes of a button element. We are adding a “disabled” attribute to the button, which will prevent the button from being clicked. We are selecting the button using its ID, and then use jQuery Attr to set the “disabled” attribute to “true”.

We are changing the “button” class to the “disabled” class. We are selecting the button using its ID, and then use jQuery Attr to set the “class” attribute to the “disabled” value. This will change the styling of the button, indicating that it is disabled and cannot be clicked.

HTML




<!DOCTYPE html>
<html>
<head>
    <script src=
    </script>
     
    <style>
        body {
            text-align: center;
        }
  
        button {
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">
        GeeksForGeeks
    </h1>
  
    <button id="myButton" class="button">
        Click Me!
    </button>
    <br>
    <div></div>
    <script>
        $(document).ready(function () {
            
            // Add a "disabled" attribute to the button
            $("#myButton").attr("disabled", true);
            
              // Change the button's class to "disabled"
            $("#myButton").attr("class", "disabled");
        });
    </script>
</body>
  
</html>


Output:

 

By using jQuery Attr, we are able to modify the attributes of HTML elements dynamically, making it easier to create dynamic and interactive web pages.

Differences between jQuery Data vs Attr.

jQuery Data jQuery Attr
It stores data associated with an HTML element. It sets and gets attributes of an HTML element.
It uses the .data() method. It uses the .attr() method.
Data is stored in the jQuery object and is not visible in the HTML markup. The attributes are visible in the HTML markup.
Data can be of any data type, including objects and arrays. Attributes are typically strings or numbers.
Data is more flexible and can be used for complex applications. Attributes are simpler and are used mainly for styling and layout.

Conclusion: jQuery Data vs Attr each has its own unique uses and syntax. Data is used for storing data associated with an HTML element, while Attr is used for setting and getting attributes of an HTML element. While both methods are useful for manipulating HTML elements using jQuery, they have different applications and should be used appropriately based on the task at hand.



Last Updated : 10 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads