mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-30 21:42:43 +08:00
462 lines
34 KiB
HTML
462 lines
34 KiB
HTML
<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> > <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><input type="checkbox" checked="checked" /></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">在页面的第一个<em>中找到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"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></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"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code> Once there was a <span class="tag"><<span class="title">em</span> <span class="attribute">title</span>=<span class="value">"huge, gigantic"</span>></span>large<span class="tag"></<span class="title">em</span>></span> dinosaur...</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">p</span>></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"><<span class="title">div</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></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"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></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"><<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> /></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><input></code> 或 <code><button></code>元素的<code>type</code> 特性（attribute），并且在所有浏览器下将抛出一个错误。因为Internet Explorer不会允许你改变<code><input></code>或者<code><button></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">为页面中全部的 <img>设置一些属性。</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"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></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"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">img</span> /></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">img</span> /></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">img</span> /></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span>></span><span class="tag"><<span class="title">B</span>></span>Attribute of Ajax<span class="tag"></<span class="title">B</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></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"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></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"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></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"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span>></span>Zero-th <span class="tag"><<span class="title">span</span>></span><span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span>></span>First <span class="tag"><<span class="title">span</span>></span><span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span>></span>Second <span class="tag"><<span class="title">span</span>></span><span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></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 = '<b>"</span> + <span class="keyword">this</span>.id + <span class="string">"</b>')"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></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"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">img</span> <span class="attribute">title</span>=<span class="value">"hat.gif"</span>/></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></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"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></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> |