1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.attr()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/attributes/" title="View all posts in Attributes">Attributes</a></span> | <span class="category"><a href="http://api.jquery.com/category/manipulation/" title="View all posts in Manipulation">Manipulation</a> > <a href="http://api.jquery.com/category/manipulation/general-attributes/" title="View all posts in General Attributes">General Attributes</a></span>
</div>
</div>
<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#attr1">attr( attributeName ) </a><ul><li>.attr( attributeName )
</li></ul>
</li>
<li>
<a href="#attr2">attr( attributeName , value ) </a><ul>
<li>.attr( attributeName, value )
</li>
<li>.attr( map )
</li>
<li>.attr( attributeName, function(index, attr) )
</li>
</ul>
</li>
</ul>
</div>
<div id="attr1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.attr( attributeName )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#String">String</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Get the value of an attribute for the first element in the set of matched elements.</p>
<ul class="signatures"><li class="signature" id="attr-attributeName">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.attr( attributeName )</h4>
<p class="arguement"><strong>attributeName</strong>The name of the attribute to get.</p>
</li></ul>
<div class="longdesc">
<p>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, use a looping construct such as jQuery's <code>.each()</code> or <code>.map()</code> method.</p>
<p><strong>As of jQuery 1.6</strong>, the <code>.attr()</code> method returns <code>undefined</code> for attributes that have not been set. In addition, <code>.attr()</code> should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the <a href="http://api.jquery.com/prop/">.prop()</a> 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>: 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>
</ol>
<blockquote><p><strong>Note:</strong> Attribute values are strings with the exception of a few attributes such as value and tabindex.</p></blockquote>
</div>
<h3>Example:</h3>
<div class="entry-examples" id="entry-examples"><div id="example-0">
<h4><span class="desc">Find the title attribute of the first <em> in the page.</span></h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
em { color:blue; font-weight;bold; }
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<p>
Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>
The title of the emphasis is:<div></div>
<script>
var title = $("em").attr("title");
$("div").text(title);
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>
<div id="attr2" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.attr( attributeName, value )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Set one or more attributes for the set of matched elements.</p>
<ul class="signatures">
<li class="signature" id="attr-attributeName-value">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.attr( attributeName, value )</h4>
<p class="arguement"><strong>attributeName</strong>The name of the attribute to set.</p>
<p class="arguement"><strong>value</strong>A value to set for the attribute.</p>
</li>
<li class="signature" id="attr-map">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.attr( map )</h4>
<p class="arguement"><strong>map</strong>A map of attribute-value pairs to set.</p>
</li>
<li class="signature" id="attr-attributeName-functionindex- attr">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.1/">1.1</a></span>.attr( attributeName, function(index, attr) )</h4>
<p class="arguement"><strong>attributeName</strong>The name of the attribute to set.</p>
<p class="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>
<div class="longdesc">
<p>The <code>.attr()</code> method is a convenient way to set the value of attributes—especially when setting multiple attributes or using values returned by a function. Consider the following image:</p>
<pre><img id="greatphoto" src="brush-seller.jpg" alt="brush seller" /></pre>
<h4 id="setting-simple-attr">Setting a simple attribute</h4>
<p>To change the <code>alt</code> attribute, simply pass the name of the attribute and its new value to the <code>.attr()</code> method:</p>
<pre>$('#greatphoto').attr('alt', 'Beijing Brush Seller');</pre>
<p><em>Add</em> an attribute the same way:</p>
<pre>$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');</pre>
<h4 id="setting-several-attrs">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, 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>
<p><strong>Note</strong>: jQuery prohibits changing the <code>type</code> attribute on an <code><input></code> or <code><button></code> element and will throw an error in all browsers. This is because the <code>type</code> attribute cannot be changed in Internet Explorer.</p>
<h4 id="computed-attr-values">Computed attribute values</h4>
<p>By using a function to set attributes, you can compute the value based on other properties of the element. For example, to concatenate a new value with an existing value:</p>
<pre>$('#greatphoto').attr('title', function(i, val) {
return val + ' - photo by Kelly Clark'
});</pre>
<p>This use of a function to compute attribute values can be particularly useful when modifying the attributes of multiple elements at once.</p>
<p><strong>Note: </strong>If nothing is returned in the setter function (ie. <code>function(index, attr){})</code>, or if <code>undefined</code> is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.</p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples-1">
<div id="example-1-0">
<h4>Example: <span class="desc">Set some attributes for all <img>s in the page.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
img { padding:10px; }
div { color:red; font-size:24px; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<img />
<img />
<img />
<div><B>Attribute of Ajax</B></div>
<script>
$("img").attr({
src: "/images/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1-1">
<h4>Example: <span class="desc">Set the id for divs based on the position in the page.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
span { color:red; }
b { font-weight:bolder; }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
<script>
$("div").attr("id", function (arr) {
return "div-id" + arr;
})
.each(function () {
$("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1-2">
<h4>Example: <span class="desc">Set the src attribute from title attribute on the image.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<img title="hat.gif"/>
<script>
$("img").attr("src", function() {
return "/images/" + this.title;
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
