2019-04-21 11:50:48 +08:00

462 lines
34 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.attr()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/attributes/">DOM 属性</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/manipulation/">DOM 操作</a> &gt; <a href="/category/manipulation/general-attributes/">通用属性操作</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/attr/" target="_blank">.attr()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
获取匹配的元素集合中的第一个元素的属性的值
 或
设置每一个匹配元素的一个或多个属性。
<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( attributes )</li>
<li>.attr( attributeName, function(index, attr) )</li>
</ul>
</li>
</ul>
</div><article class="entry method" id="attr1"><h2 class="section-title">
<span class="name">.attr( attributeName )</span><span class="returns">返回: <a href="/Types/#String">String</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>获取匹配的元素集合中的第一个元素的属性的值。</p>
<ul class="signatures"><li class="signature" id="attr-attributeName">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.attr( attributeName )</h4>
<ul><li>
<div><strong>attributeName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要获取的属性名称</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p><code>.attr()</code>方法只获取<em>第一个</em>匹配元素的属性值。要获取每个单独的元素的属性值, 我们需要依靠jQuery的 <code>.each()</code>或者<code>.map()</code>方法循环。</p>
<p>使用 jQuery的 <code>.attr()</code> 方法得到了一个元素的属性值主要有两个好处:</p>
<ol>
<li>
<strong>方便</strong>它可以直接被jQuery对象访问并且链式调用其他jQuery方法。</li>
<li>
<strong>浏览器兼容</strong>:一些属性在不同浏览器中得到不同的值。 甚至在同一个浏览器的不同版本中。 <code>.attr()</code> 方法减少了兼容性问题。 </li>
</ol>
<div class="warning">
<p><strong>注意:</strong> 除少数属性意外属性值都是字符串如value和tabindex。</p>
</div>
<div class="warning">
<p><strong>注意:</strong>
试图改变通过HTML创建的或已经在HTML文档中的<code>input</code>元素的<code>type</code>特性attribute或属性property在Internet Explorer 6, 7, or 8下将会抛出一个错误。</p>
</div>
<p>
<strong>在jQuery 1.6中</strong>,当属性没有被设置时候,<code>.attr()</code>方法将返回<code>undefined</code><del>另外,<code>.attr()</code>不应该用在普通的对象数组窗口window或文件document上。</del><strong>若要检索和更改DOM属性,比如元素的<code>checked</code>, <code>selected</code>, 或 <code>disabled</code>状态,请使用<a href="/prop">.prop()</a>方法。</strong></p>
<h4>Attributes vs. Properties</h4>
<p><em>attributes</em><em>properties</em>之间的差异在特定情况下是很重要。<strong>jQuery 1.6之前</strong> <a href="/attr"><code>.attr()</code></a>方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。<strong>从 jQuery 1.6 开始</strong> <code>.prop()</code>方法 方法返回 property 的值,而 <code>.attr()</code> 方法返回 attributes 的值。</p>
<p>例如, <code>selectedIndex</code>, <code>tagName</code>, <code>nodeName</code>, <code>nodeType</code>, <code>ownerDocument</code>, <code>defaultChecked</code>, 和 <code>defaultSelected</code> 应使用<code>.prop()</code>方法进行取值或赋值。 在jQuery1.6之前,这些属性使用<code>.attr()</code>方法取得,但是这并不是元素的<code>attr</code>属性。他们没有相应的属性attributes只有特性(property)。</p>
<p>例如考虑一个DOM元素的HTML标记中定义的<code>&lt;input type="checkbox" checked="checked" /&gt;</code> 并假设它是一个JavaScript变量命名的<code>elem</code> </p>
<table class="listing">
<tbody><tr>
<th>
<code>elem.checked</code>
</th>
<td>
<code>true</code> (Boolean) 将随着复选框状态的改变而改变</td>
</tr>
<tr>
<th>
<code>$(elem).prop("checked")</code>
</th>
<td>
<code>true</code> (Boolean) 将随着复选框状态的改变而改变</td>
</tr>
<tr>
<th>
<code>elem.getAttribute("checked")</code>
</th>
<td>
<code>"checked"</code> (String) 复选框的初始状态;不会改变</td>
</tr>
<tr>
<th>
<code>$(elem).attr("checked")</code>
<em>(1.6)</em>
</th>
<td>
<code>"checked"</code> (String) 复选框的初始状态;不会改变</td>
</tr>
<tr>
<th>
<code>$(elem).attr("checked")</code>
<em>(1.6.1+)</em>
</th>
<td>
<code>"checked"</code> (String) 将随着复选框状态的改变而改变</td>
</tr>
<tr>
<th>
<code>$(elem).attr("checked")</code>
<em>(pre-1.6)</em>
</th>
<td>
<code>true</code> (Boolean) 将随着复选框状态的改变而改变</td>
</tr>
</tbody></table>
<p>
根据<a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.4">W3C的表单规范</a> ,在<code>checked</code>属性是一个<a href="http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2"><em>布尔属性</em></a>
这意味着,如果这个属性attribute是目前存在
即使,该属性没有对应的值,或者被设置为空字符串值,或甚至是"false"相应的属性property为true。
这才是真正的所有布尔属性attributes
</p>
<p>
然而,要记住的最重要的概念是<code>checked</code>特性attribute不是对应它<code>checked</code>属性property。特性attribute实际对应的是<code>defaultChecked</code>属性property而且仅用于设置复选框最初的值。<code>checked</code>特性attribute值不会因为复选框的状态而改变<code>checked</code>属性property会因为复选框的状态而改变。因此
 跨浏览器兼容的方法来确定一个复选框是否被选中是使用该属性property</p>
<ul>
<li>
<code>if ( elem.checked )</code>
</li>
<li>
<code>if ( $(elem).prop("checked") )</code>
</li>
<li>
<code>if ( $(elem).is(":checked") )</code>
</li>
</ul>
<p>
对于其他的动态属性同样是true比如 <code>selected</code><code>value</code>.</p>
</div>
<h3>Additional Notes其他注意事项:</h3>
<div class="longdesc"><ul>
<li>在Internet Explorer 9之前的版本使用<a href="/prop"><code>.prop()</code></a>设置DOM元素的属性进行赋值时若所赋值的类型不是基本类型(number, string, 或 boolean),而且也没有使用 <a href="/removeProp"><code>.removeProp()</code></a> 方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题,请使用 <a href="/data"><code>.data()</code></a> 方法 。</li>
</ul>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">在页面的第一个&lt;em&gt;中找到title属性。</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">em</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule"><span class="attribute">font-weight</span>:<span class="value">bold;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> Once there was a <span class="tag">&lt;<span class="title">em</span> <span class="attribute">title</span>=<span class="value">"huge, gigantic"</span>&gt;</span>large<span class="tag">&lt;/<span class="title">em</span>&gt;</span> dinosaur...</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> The title of the emphasis is:<span class="tag">&lt;<span class="title">div</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> title = $(<span class="string">"em"</span>).attr(<span class="string">"title"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).text(title);</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article><article class="entry method" id="attr2"><h2 class="section-title">
<span class="name">.attr( attributeName, value )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>设置每一个匹配元素的一个或多个属性。</p>
<ul class="signatures">
<li class="signature" id="attr-attributeName-value">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.attr( attributeName, value )</h4>
<ul>
<li>
<div><strong>attributeName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要设置值的属性名</div>
</li>
<li>
<div><strong>value</strong></div>
<div>类型: <a href="/Types/#String,Number">String,Number</a>
</div>
<div>这个属性设置的值</div>
</li>
</ul>
</li>
<li class="signature" id="attr-attributes">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.attr( attributes )</h4>
<ul><li>
<div><strong>attributes</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一个 属性 - 值 集合对象。(译者注:例如{
alt: '',
title: 'WEB前端开发-http://www.css88.com
}</div>
</li></ul>
</li>
<li class="signature" id="attr-attributeName-functionindex--attr">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.1/">1.1</a></span>.attr( attributeName, function(index, attr) )</h4>
<ul>
<li>
<div><strong>attributeName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要设置值的属性名.</div>
</li>
<li>
<div><strong>function(index, attr)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>
这个函数返回用来设置的值,<code>this</code>指向当前的元素。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc-1">
<p>这个 <code>.attr()</code> 方法 是一个设置属性值的方便而且强大的途径—特别是当设置多个属性或使用值来自函数。 让我们考虑下面的图片:</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">img</span> <span class="attribute">id</span>=<span class="value">"greatphoto"</span> <span class="attribute">src</span>=<span class="value">"brush-seller.jpg"</span> <span class="attribute">alt</span>=<span class="value">"brush seller"</span> /&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="setting-simple-attr">Setting a simple attribute(设置一个简单的属性)</h4>
<p>我们可以通过<code>.attr()</code>方法非常简单的改变 <code>alt</code> 属性并附上新值:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#greatphoto'</span>).attr(<span class="string">'alt'</span>, <span class="string">'Beijing Brush Seller'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>我们可以用同样的方法 <em>添加</em> 一个属性:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#greatphoto'</span>)</code></div></div><div class="container"><div class="line"><code>.attr(<span class="string">'title'</span>, <span class="string">'Photo by Kelly Clark'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="setting-several-attrs">Setting several attributes at once(一次设置多个属性)</h4>
<p>同时改变<code>alt</code> 属性 和 添加 <code>title</code>属性, 我们可以使用一个“名/值”形式的对象 (JavaScript object literal)传递给这个方法。 每个 key-value 对象将增加或者修改一个属性:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#greatphoto'</span>).attr({</code></div></div><div class="container"><div class="line"><code> alt: <span class="string">'Beijing Brush Seller'</span>,</code></div></div><div class="container"><div class="line"><code> title: <span class="string">'photo by Kelly Clark'</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>当设置多个属性,包裹属性名的引号是可选的。</p>
<p><strong>警告:</strong> 当设置样式名“class”属性时必须使用引号</p>
<p><strong>注意</strong>: jQuery禁止改变一个 <code>&lt;input&gt;</code><code>&lt;button&gt;</code>元素的<code>type</code> 特性attribute并且在所有浏览器下将抛出一个错误。因为Internet Explorer不会允许你改变<code>&lt;input&gt;</code>或者<code>&lt;button&gt;</code>元素的<code>type</code>属性。 </p>
<h4 id="computed-attr-values">Computed attribute values(推算属性值)</h4>
<p>通过使用一个函数来设置属性, 可以根据该元素上的其它属性值返回最终所需的属性值。例如,我们可以把新的值与现有的值联系在一起:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#greatphoto'</span>).attr(<span class="string">'title'</span>, <span class="keyword">function</span>(i, val) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> val + <span class="string">' - photo by Kelly Clark'</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
当前运用一个函数来计算属性的值,当我们修改了多个元素的属性,特别有用。</p>
<p><strong>注意 </strong>如果setter函数没有返回任何数据例如<code>function(index, attr){})</code>属性的当前值返回值是undefined作为一个getter行为。实际上如果不进行任何更改的setter函数不返回的东西。</p>
</div>
<section class="entry-examples" id="entry-examples-1"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-1-0">
<h4>Example: <span class="desc">为页面中全部的 &lt;img&gt;设置一些属性。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">img</span> <span class="rules">{ <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">10</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">24</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">img</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">img</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">img</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span><span class="tag">&lt;<span class="title">B</span>&gt;</span>Attribute of Ajax<span class="tag">&lt;/<span class="title">B</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"img"</span>).attr({</code></div></div><div class="container"><div class="line"><code> src: <span class="string">"images/hat.gif"</span>,</code></div></div><div class="container"><div class="line"><code> title: <span class="string">"jQuery"</span>,</code></div></div><div class="container"><div class="line"><code> alt: <span class="string">"jQuery Logo"</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).text($(<span class="string">"img"</span>).attr(<span class="string">"alt"</span>));</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1-1">
<h4>Example: <span class="desc">使第二个后面的按钮disabled</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">span</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">b</span> <span class="rules">{ <span class="rule"><span class="attribute">font-weight</span>:<span class="value">bolder;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span>Zero-th <span class="tag">&lt;<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span>First <span class="tag">&lt;<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span>Second <span class="tag">&lt;<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).attr(<span class="string">"id"</span>, <span class="function"><span class="keyword">function</span> <span class="params">(arr)</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> <span class="string">"div-id"</span> + arr;</code></div></div><div class="container"><div class="line"><code>})</code></div></div><div class="container"><div class="line"><code>.each(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $(<span class="string">"span"</span>, <span class="keyword">this</span>).html(<span class="string">"(ID = '&lt;b&gt;"</span> + <span class="keyword">this</span>.id + <span class="string">"&lt;/b&gt;')"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1-2">
<h4>Example: <span class="desc"> 通过图片的title属性设置SRC属性。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">img</span> <span class="attribute">title</span>=<span class="value">"hat.gif"</span>/&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"img"</span>).attr(<span class="string">"src"</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> <span class="string">"images/"</span> + <span class="keyword">this</span>.title;</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>