<pclass="arguement"><strong>attributeName</strong>The name of the attribute to get.</p>
</li></ul>
<divclass="longdesc">
<p>It's important to note that the <code>.attr()</code> method gets the attribute value for only the <em>first</em> element in the matched set. To get the value for each element individually, we need to rely on a looping construct such as jQuery's <code>.each()</code> method.</p>
<p>Using jQuery's <code>.attr()</code> method to get the value of an element's attribute has two main benefits:</p>
<ol>
<li>
<strong>Convenience</strong>: It can be called directly on a jQuery object and chained to other jQuery methods.</li>
<li>
<strong>Cross-browser consistency</strong>: Some attributes have inconsistent naming from browser to browser. Furthermore, the values of some attributes are reported inconsistently across browsers, and even across versions of a single browser. The <code>.attr()</code> method reduces such inconsistencies. </li>
<spanclass="name">.attr( attributeName, value )</span><spanclass="returns">Returns: <aclass="return"href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
</h2>
<divclass=" entry-details">
<pclass="desc"><strong>Description: </strong>Set one or more attributes for the set of matched elements.</p>
<pclass="arguement"><strong>attributeName</strong>The name of the attribute to set.</p>
<pclass="arguement"><strong>function(index, attr)</strong>A function returning the value to set. <code>this</code> is the current element. Receives the index position of the element in the set and the old attribute value as arguments.</p>
</li>
</ul>
<divclass="longdesc">
<p>The <code>.attr()</code> method is a convenient and powerful way to set the value of attributes—especially when setting multiple attributes or using values returned by a function. Let's consider the following image:</p>
<p>We can <em>add</em> an attribute the same way:</p>
<pre>$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');</pre>
<h4>Setting several attributes at once</h4>
<p>To change the <code>alt</code> attribute and add the <code>title</code> attribute at the same time, we can pass both sets of names and values into the method at once using a map (JavaScript object literal). Each key-value pair in the map adds or modifies an attribute:</p>
<pre>$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});</pre>
<p>When setting multiple attributes, the quotes around attribute names are optional.</p>
<p><strong>WARNING</strong> When setting the 'class' attribute, you must always use quotes!</p>
<h4>Computed attribute values</h4>
<p>By using a function to set attributes, we can compute the value based on other properties of the element. For example, we could concatenate a new value with an existing value:</p>
<pre>$('#greatphoto').attr('title', function() {
return this.alt + ' - photo by Kelly Clark'
});</pre>
<p>This use of a function to compute attribute values can be particularly useful when we modify the attributes of multiple elements at once.</p>
</div>
<h3>Examples:</h3>
<divid="entry-examples"class="entry-examples">
<divid="example-0">
<h4>Example: <spanclass="desc">Set some attributes for all <img>s in the page.</span>
