jQuery -

Attributes

Manipulating HTML attributes is a fundamental aspect of working with the DOM using jQuery. This tutorial provides a comprehensive overview of jQuery methods for getting, setting, and removing attributes, as well as practical examples to demonstrate these techniques.

1. Introduction to jQuery Attributes

jQuery provides several methods to interact with HTML attributes. The most commonly used methods are .attr(), .removeAttr(), .prop(), and .removeProp().

2. Getting and Setting Attributes

The .attr() method is used to get the value of an attribute or set one or more attributes for the selected elements.

Method Description Example
.attr(attributeName) Gets the value of an attribute for the first element in the set of matched elements.
Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Get Attribute Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var src = $("img").attr("src");
            console.log(src);
        });
    </script>
</head>
<body>
    <img src="/images/common/cutecat.png" alt="Example Image">
</body>
</html>
.attr(attributeName, value) Sets one attribute for the matched elements.
Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Set Attribute Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("img").attr("src", "/images/common/cutecat.png");
        });
    </script>
</head>
<body>
    <img src="/images/common/cutecat.png" alt="Example Image">
</body>
</html>
.attr(attributes) Sets multiple attributes for the matched elements.
Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Set Multiple Attribute Values</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("img").attr({
                "src": "/images/common/cutecat.png",
                "alt": "New Image"
            });
        });
    </script>
</head>
<body>
    <img src="/images/common/cutecat.png" alt="Example Image">
</body>
</html>

This example shows how to get the src attribute of an image.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Get Attribute Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var src = $("img").attr("src");
            console.log(src);
        });
    </script>
</head>
<body>
    <img src="/images/common/cutecat.png" alt="Example Image">
</body>
</html>

This example demonstrates how to set the src attribute of an image.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Set Attribute Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("img").attr("src", "/images/common/cutecat.png");
        });
    </script>
</head>
<body>
    <img src="/images/common/cutecat.png" alt="Example Image">
</body>
</html>

This example illustrates how to set multiple attributes of an image.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Set Multiple Attribute Values</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("img").attr({
                "src": "/images/common/cutecat.png",
                "alt": "New Image"
            });
        });
    </script>
</head>
<body>
    <img src="/images/common/cutecat.png" alt="Example Image">
</body>
</html>

3. Removing Attributes

The .removeAttr() method is used to remove one or more attributes from the selected elements.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Remove Attribute</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("img").removeAttr("src");
        });
    </script>
</head>
<body>
    <img src="/images/common/cutecat.png" alt="Example Image">
</body>
</html>

This example shows how to remove the src attribute of an image.

4. Properties vs. Attributes

In jQuery, .prop() and .attr() are used for different purposes. Attributes are defined by HTML and usually consist of a name/value pair, while properties are defined by the DOM and are more complex.

Method Description Example
.prop(propertyName) Gets the value of a property for the first element in the set of matched elements.
Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Get Property Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var checked = $("#checkbox").prop("checked");
            console.log(checked);
        });
    </script>
</head>
<body>
    <input type="checkbox" id="checkbox" checked>
</body>
</html>
.prop(propertyName, value) Sets one property for the matched elements.
Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Set Property Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#checkbox").prop("checked", true);
        });
    </script>
</head>
<body>
    <input type="checkbox" id="checkbox">
</body>
</html>

This example shows how to get the checked property of a checkbox.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Get Property Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var checked = $("#checkbox").prop("checked");
            console.log(checked);
        });
    </script>
</head>
<body>
    <input type="checkbox" id="checkbox" checked>
</body>
</html>

This example demonstrates how to set the checked property of a checkbox.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Set Property Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#checkbox").prop("checked", true);
        });
    </script>
</head>
<body>
    <input type="checkbox" id="checkbox">
</body>
</html>

5. Data Attributes

jQuery provides methods to interact with data attributes, which are used to store custom data on HTML elements. The .data() method is used to get or set these data attributes.

Method Description Example
.data(key) Gets the value of a data attribute for the first element in the set of matched elements.
Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Get Data Attribute</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var item = $("#item").data("id");
            console.log(item);
        });
    </script>
</head>
<body>
    <div id="item" data-id="42">Item</div>
</body>
</html>
.data(key, value) Sets one data attribute for the matched elements.
Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Set Data Attribute</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#item").data("id", 42);
        });
    </script>
</head>
<body>
    <div id="item">Item</div>
</body>
</html>

This example shows how to get a data attribute value.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Get Data Attribute</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var item = $("#item").data("id");
            console.log(item);
        });
    </script>
</head>
<body>
    <div id="item" data-id="42">Item</div>
</body>
</html>

This example demonstrates how to set a data attribute value.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>Set Data Attribute</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#item").data("id", 42);
        });
    </script>
</head>
<body>
    <div id="item">Item</div>
</body>
</html>