Updated May 19, 2023
Introduction to Jquery attr()
This Jquery attr() method is specifically used to set attributes and values of selected elements. We can also return the value of the features based on the attribute name. If we wish to set the attribute value, the Jquery attr() allows us to set one or more attribute values for a set of matched elements. It returns the value of the first matched element when used to return the attribute value.
Syntax
Let us have a look at the syntax of Jquery attr() :
a. To set the attribute and value:
$(selector).attr(attributeName, attributeValue)Explanation: We have to pass the name of the attribute and the corresponding value that we wish to assign.
b. To set the attribute and value using the function:
$(selector).attr(attributeName,function(indexPosition, currentAttributeValue))Explanation: We have to pass the name of the attribute and define the task we need to perform on that particular attribute within the function.
c. To set multiple attributes and values:
$(selector).attr({ attributeName: attributeValue, attributeName: attributeValue, attributeName: attributeValue,............ })Explanation: Based on the selector, bypassing multiple attributes and their value in the form of key-value pair, we can set multiple attributes and their value.
d. Returning the value of an attribute:
$(selector).attr(attributeName)Explanation: To return the value of an attribute, we simply will have to pass the name of the attribute.
How does JQuery attr works?
As seen in the above syntax, the attr() method can be used to set the attribute and value; it also allows us to set multiple values and attributes. We can return the value of an attribute.
To use jquery, we can download jquery from jquery.com.
The attr() method also comes with a callback function. The action stated in that function is subsequently carried out via a callback function. Let us see through the following examples how we can perform all these operations.
In the below examples, we have used “id” as the selector. Based on the “id” we will be setting and returning the attributes and their value.
Examples of Jquery attr
Here are the following examples mentioned below
Example #1
Example of setting the attribute and value
Description: In the below code, we will be setting the attribute value of the name from “abc” to “pqr” on the button click action.
Code snippet:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ alert($("#x").attr("name"))
$("button").click(function(){
$("#x").attr("name", "pqr");
alert($("#x").attr("name"))
});
});
</script>
</head>
<body>
<p><a name="abc" id="x"></a></p>
<button>Change name value</button>
<p>Click on the button to change the value from "abc" to "pqr"</p>
</body>
</html>Output:
when we run the program, the “abc” value is shown.
User Interface:
When we click on the button, the value gets changed from “abc” to “pqr” as seen below:
Example #2
Example of setting the attribute and value using a callback function. In the below code snippet, the initial value of roll no is 11, which you will be able to see as soon as you run the program. Using a function, we have set the value to 10 of the attribute rollNo.
Code snippet:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ alert($("#n").attr("rollNo"))
$("button").click(function(){
$("#n").attr("rollNo", function(index,currentvalueofrollno){ return currentvalueofrollno - 1 ;
});
alert($("#n").attr("rollNo"))
});
});
</script>
</head>
<body>
<p><a rollNo= 11 id="n"></a></p>
<button>Change roll no value</button>
<p>Click on the button to change the roll no value from 11 to 10</p>
</body>
</html>Output:
When the program is run, the value 11 is displayed.
User Interface:
When we click on the button, the value of roll no gets changed from 11 to 10, as seen below:
Example #3
Example of setting multiple attributes and values
Description:
In this illustration, the name “xyz” and the initial value of rollNo (which will be changed to 17 and “abc”), respectively, are 16 and respectively. We will be setting multiple attributes at the same time. Refer to the below code snippet for the same:
Code snippet:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ alert($("#n").attr("rollNo"))
alert($("#n").attr("name"))
$("button").click(function(){
$("#n").attr({"rollNo":"17" , "name" : "abc" }); alert($("#n").attr("rollNo"))
alert($("#n").attr("name"))
});
});
</script>
</head>
<body>
<p><a id="n" rollNo="16" name="xyz"></a></p>
<button>Change roll no and name value</button>
<p>Click on the button to change the and name and roll no value</p>
</body>
</html>Output:
when we run the program, the output is as shown.
User Interface:
Once we click on the button, the changed value will reflect as seen below:
Example #4
Example of returning the value of an attribute. In the below scenario of returning the value of an attribute, the value of the name is “abc”. We will be returning the same on the button click action.
Code snippet:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#x").attr("name"))
});
});
</script>
</head>
<body>
<p><a name="abc" id="x"></a></p>
<button>View name value</button>
<p>Click on the button to view the name value</p>
</body>
</html>Output:
User Interface:
Conclusion
As a result, we might learn how to set numerous attributes and values in addition to attributes and values using the jQuery attr() method. We could also see how to return the value of an attribute and the use of the callback function within the jquery attr() method.
Recommended Articles
We hope that this EDUCBA information on “JQuery attr()” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
