jQuery attr() Method
You are Here:
jQuery attr() Method
The jQuery attr() method gets or sets attributes and values of the selected elements.
Note: The following points to be considered when using the jQuery attr() method
- When this method is used to get attribute value, it gets the attribute value of the first matched element.
- When this method is used to set attribute values, it will overwrite all matched elements.
In the following example, we will get the attribute value of the <input> tag.
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery attr() Method</h1>
<p>Click on the button get the attribute value of 'type'</p>
<input type="text">
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("input").attr("type"));
});
});
</script>
</body>
</html>
Syntax
// Get attribute value
$(selector).attr(attribute);
// Set attribute value
$(selector).attr(attribute, value);
// Set attribute value using a function
$(selector).attr(attribute, func);
// Set multiple attributes and values
$(selector).attr({attribute:value, attribute:value});
Parameter Values
| Value | Explanation |
|---|---|
| attribute | Specifies the name of the attribute |
| value | Specifies the value of the attribute |
| func | Specifies a function that returns the attribute value to set |
| attribute:value, attribute:value | Specifies multiple attributes and values |
Set Attribute Value
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery attr() Method</h1>
<p>Click on the button to set placeholder</p>
<input type="text">
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input").attr("placeholder","Type something");
});
});
</script>
</body>
</html>
Set Attribute Value using Function
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery attr() Method</h1>
<p>Click on the button to set placeholder</p>
<input type="text">
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input").attr("placeholder",function(){
return "Type something";
});
});
});
</script>
</body>
</html>
Set Multiple Attributes Values
Example
HTML Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>jQuery attr() Method</h1>
<p>Click on the button to set multiple attribute.</p>
<input type="text">
<button>Click Me</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input").attr({
"placeholder": "type something",
"size": "15"
});
});
});
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
