jQuery Tutorial Tutorials - jQuery .attr() method

The .attr() method in jQuery is used to get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

jQuery .attr() method Syntax

.attr([attributeName[,value|function]|[attributes])

// That is

.attr(attributeName)
.attr(attributeName,value)
.attr(attributeName,function)
.attr(attributes)

.attr(attributeName)

Get the value of an attribute for the first element in the set of matched elements.

example

return value: It will return the value of src attribute for the first img element.

$('img').attr('src');

<img src="lautturi.com-test-1.jpg" alt="image 1">
<img src="lautturi.com-test-2.jpg" alt="image 2">
<script>
    console.log($('img').attr('src'));
    // lautturi.com-test-1.jpg
</script>

.attr(attributeName,value)

Add/Set a simple attribute for the set of matched elements.

example

Add a title attribute for all images.

$("img").attr("title", "Test Image");

<img src="lautturi.com-test-1.jpg" alt="image 1">
<img src="lautturi.com-test-2.jpg" alt="image 2">
<script>
    $("img").attr("title", "Test Image");
    // <img src="lautturi.com-test-1.jpg" alt="image 1" title="Test Image">
    // <img src="lautturi.com-test-2.jpg" alt="image 2" title="Test Image">
</script>

.attr(attributeName,function)

Add/Set a simple attribute for the set of matched elements.
function will return a value to set for the attribute.

example

Set the value of the alt attribute to the value of the title attribute for all images.

$("img").attr("title",function() { return this.alt });

<img src="lautturi.com-test-1.jpg" alt="image 1">
<img src="lautturi.com-test-2.jpg" alt="image 2">
<script>
    $("img").attr("title",function() { return this.alt });
    // <img src="lautturi.com-test-1.jpg" alt="image 1" title="image 1">
    // <img src="lautturi.com-test-2.jpg" alt="image 2" title="image 2">
</script>

.attr(attributeName,null)

Remove an attribute.

example

Remove the title attribute for all images.

// remove an attribute using jQuery
$("img").attr("title",null);

// or

$("img").attr("title",function() { return null});

<img src="lautturi.com-test-1.jpg" alt="image 1" title="image 1">
<img src="lautturi.com-test-2.jpg" alt="image 2" title="image 2">

<script>
    $("img").attr("title",function() { return null });
    // <img src="lautturi.com-test-1.jpg" alt="image 1">
    // <img src="lautturi.com-test-2.jpg" alt="image 2">
</script>

.attr(attributes)

Add/Set one or more attributes for the set of matched elements.

attributes is an object of attr-value pairs,for example:
{'src':'test.jpg'} ,
{ title: "test.jpg", alt: "Test Image" }.

example

Set the src and alt attributes for all images.

$("img").attr({ src: "test.jpg", alt: "Test Image" });

<img src="lautturi.com-test-1.jpg" alt="image 1">
<img src="lautturi.com-test-2.jpg" alt="image 2">
<script>
    $("img").attr({ src: "lautturi.jpg", alt: "Test Image" });
    // <img src="lautturi.jpg" alt="Test Image">
    // <img src="lautturi.jpg" alt="Test Image">
</script>

Attributes vs. Properties

For <input type="checkbox" checked="checked" />