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 attributes 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 and when it is used to return the attribute value; it returns the value of first matched element.
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 its value in the form of key-value pair we can set multiple attributes and its 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. A callback function then performs the action that is been defined in that function. Let us see through the following examples of how can we 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 its value.
Examples of Jquery attr
Here are the following examples mention 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 we run the program the value 11 is shown.
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 example, the initial value of rollNo is 16 and the name is “xyz” which will be changed to 17 and “abc”. We will be setting multiple attributes at the same time. Refer 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:
As shown below we can see the value that is assigned to the name attribute.
Conclusion
Thus we could learn how the jquery attr() method can not only be used to set attributes and value but can also set multiple attributes and values. We could also see how to return the value of an attribute and the use of callback function within the jquery attr() method.
Recommended Articles
This is a guide to JQuery attr(). here we discuss how does JQuery attr work along with the programming examples for better understanding. You can also go through our other suggested articles to learn more –
8 Online Courses | 5 Hands-on Projects | 28+ Hours | Verifiable Certificate of Completion
4.5
View Course
Related Courses
