mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 06:50:23 +00:00
212 lines
No EOL
9 KiB
HTML
212 lines
No EOL
9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div data-role="page">
|
|
<div data-role="header">
|
|
<h1>.attr()</h1>
|
|
|
|
</div>
|
|
|
|
|
|
<div data-role="content" data-theme="c" id="attr1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.attr( attributeName )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#String">String</a></span>
|
|
</h2>
|
|
<div class=" 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>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>
|
|
</ol>
|
|
</div>
|
|
<h3>Example:</h3>
|
|
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
|
<h4><span class="desc">Finds the title attribute of the first <em> in the page.</span></h4>
|
|
<pre><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-latest.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 data-role="content" data-theme="c" id="attr2">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.attr( attributeName, value )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
|
</h2>
|
|
<div class=" 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 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>
|
|
<pre><img id="greatphoto" src="brush-seller.jpg" alt="brush seller" /></pre>
|
|
<h4>Setting a simple attribute</h4>
|
|
<p>We can change the <code>alt</code> attribute by simply passing 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>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>
|
|
<div id="entry-examples" class="entry-examples">
|
|
<div id="example-0">
|
|
<h4>Example: <span class="desc">Set some attributes for all <img>s in the page.</span>
|
|
</h4>
|
|
<pre><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-latest.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">
|
|
<h4>Example: <span class="desc">Disables buttons greater than the 1st button.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>button { margin:10px; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<button>0th Button</button>
|
|
<button>1st Button</button>
|
|
<button>2nd Button</button>
|
|
<script>$("button:gt(1)").attr("disabled","disabled");</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-2">
|
|
<h4>Example: <span class="desc">Sets id for divs based on the position in the page.</span>
|
|
</h4>
|
|
<pre><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-latest.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-3">
|
|
<h4>Example: <span class="desc">Sets src attribute from title attribute on the image.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="http://code.jquery.com/jquery-latest.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> |