uTools-Manuals/docs/jQuery/prop.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.prop()</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/prop/" target="_blank">.prop()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
					获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#prop1">.prop( propertyName )</a><ul><li>.prop( propertyName )</li></ul>
</li>
<li>
<a href="#prop2">.prop( propertyName, value )</a><ul>
<li>.prop( propertyName, value )</li>
<li>.prop( properties )</li>
<li>.prop( propertyName, function(index, oldPropertyValue) )</li>
</ul>
</li>
</ul>
</div><article class="entry method" id="prop1"><h2 class="section-title">
<span class="name">.prop( propertyName )</span><span class="returns">返回: <a href="/Types/#String">String</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>获取匹配的元素集中第一个元素的属性（property）值</p>
<ul class="signatures"><li class="signature" id="prop-propertyName">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>.prop( propertyName )</h4>
<ul><li>
<div><strong>propertyName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要得到的属性的名称</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p><code>.prop()</code>方法只获得<em>第一</em>个匹配元素的属性值 。如果元素上没有该属性，或者如果没有匹配的元素。那么该方法会返回<code>undefined</code>值。若要取得每个匹配元素的属性值（property），请使用循环结构，如jQuery <code>.each()</code>或<code>.map()</code>方法。</p>
<div class="warning">
<p><strong>注意:</strong> 
			        试图改变通过HTML创建的，或已经在HTML文档中的<code>input</code>元素的<code>type</code>属性（property）（或特性attribute），在Internet Explorer 6, 7, or 8下将会抛出一个错误。</p>
</div>
<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>
<p><del>如果你使用jQuery 1.6 ，代码<code>if ( $(elem).attr("checked") )</code>，将获得一个<em>属性(attribute)</em> ，它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容，<code>.attr()</code> 方法从 jQuery 1.6.1+ 开始除了返回属性值外，还会更新 property 属性，因此 boolean attribute（布尔属性）不需要通过 <code>.prop()</code> 来改变其值。推荐使用上述方法之一，来取得 checked 的值。要想知道在最新的 jQuery 版本中,它们是如何工作的，请点击下例中的 check。</del></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">Checked属性显示一个复选框，因为它的变化和属性。</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>
</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">p</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">20</span>px <span class="number">0</span> <span class="number">0</span> }</span></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">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">&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">input</span> <span class="attribute">id</span>=<span class="value">"check1"</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> <span class="attribute">checked</span>=<span class="value">"checked"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">label</span> <span class="attribute">for</span>=<span class="value">"check1"</span>&gt;</span>Check me<span class="tag">&lt;/<span class="title">label</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span><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><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">"input"</span>).change(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> $input = $(<span class="keyword">this</span>);</code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"p"</span>).html(<span class="string">".attr('checked'): &lt;b&gt;"</span> + $input.attr(<span class="string">'checked'</span>) + <span class="string">"&lt;/b&gt;&lt;br&gt;"</span></code></div></div><div class="container"><div class="line"><code>              + <span class="string">".prop('checked'): &lt;b&gt;"</span> + $input.prop(<span class="string">'checked'</span>) + <span class="string">"&lt;/b&gt;&lt;br&gt;"</span></code></div></div><div class="container"><div class="line"><code>              + <span class="string">".is(':checked'): &lt;b&gt;"</span> + $input.is(<span class="string">':checked'</span>) ) + <span class="string">"&lt;/b&gt;"</span>;</code></div></div><div class="container"><div class="line"><code>}).change();</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="prop2"><h2 class="section-title">
<span class="name">.prop( propertyName, value )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>为匹配的元素设置一个或多个属性（properties）。 </p>
<ul class="signatures">
<li class="signature" id="prop-propertyName-value">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>.prop( propertyName, value )</h4>
<ul>
<li>
<div><strong>propertyName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要设置的属性（properties）的名称</div>
</li>
<li>
<div><strong>value</strong></div>
<div>类型: <a href="/Types/#String,%20Number,%20Boolean">String, Number, Boolean</a>
</div>
<div>一个值来设置属性值。</div>
</li>
</ul>
</li>
<li class="signature" id="prop-properties">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>.prop( properties )</h4>
<ul><li>
<div><strong>properties</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>用来设置的 属性 - 值对 的对象。</div>
</li></ul>
</li>
<li class="signature" id="prop-propertyName-functionindex--oldPropertyValue">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.6/">1.6</a></span>.prop( propertyName, function(index, oldPropertyValue) )</h4>
<ul>
<li>
<div><strong>propertyName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要设置的属性（properties）的名称</div>
</li>
<li>
<div><strong>function(index, oldPropertyValue)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>一个函数，返回将要被设置的值。index 参数表示集合中元素的索引位置。oldPropertyValue 参数表示原有的属性值。<code>this</code> 指向当前的元素。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc-1">
<p><code>.prop()</code>方法设置属性值非常方便，尤其是对于需要使用一个函数设置多个属性值或是一次性设置多个属性值的情况。当设置<code>selectedIndex</code>, <code>tagName</code>, <code>nodeName</code>, <code>nodeType</code>, <code>ownerDocument</code>, <code>defaultChecked</code>, 或 <code>defaultSelected</code>必须使用这个方法。从jQuery1.6开始，这些属性可以不再使用<code>.attr()</code>方法来设置。他们没有相应的属性（attributes），只有属性(property)。</p>
<p>Properties 属性一般影响 DOM 元素的动态状态并不会改变序列化的 HTML attribute 属性。例如，input 元素的 value 属性，input 和 按钮 元素的 <code>disabled</code> 属性, 以及 checkbox 的 <code>checked</code> 属性。应该使用 .prop() 方法设置 <code>disabled</code> 和 <code>checked</code> 属性，而不是使用 <a href="/attr"><code>.attr()</code></a> 方法。 <a href="/val"><code>.val()</code></a> 方法应该用于存取 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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"input"</span>).prop(<span class="string">"disabled"</span>, <span class="literal">false</span>);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"input"</span>).prop(<span class="string">"checked"</span>, <span class="literal">true</span>);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"input"</span>).val(<span class="string">"someValue"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p><strong>还要注意</strong>的是<a href="/removeProp"><code>.removeProp()</code></a>方法不应该被用来设置这些属性为<code>false</code>。一旦原生的属性被移除，就无法再被添加。见<a href="/removeProp"><code>.removeProp()</code></a>获取更多信息。</p>
<h4 id="computed-prop-values">Computed property 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">"input[type='checkbox']"</span>).prop(<span class="string">"checked"</span>, <span class="keyword">function</span>( i, val ) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">return</span> !val;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p><strong>注意: </strong>
			      	如果设置的函数没有返回（即 <code>function(index, prop){})</code>），或者返回<code>undefined</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-1"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-1-0">
<h4><span class="desc">禁用页面上的所有复选框。</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">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">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> <span class="attribute">checked</span>=<span class="value">"checked"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span>  <span class="attribute">checked</span>=<span class="value">"checked"</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">"input[type='checkbox']"</span>).prop({</code></div></div><div class="container"><div class="line"><code>  disabled: <span class="literal">true</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></section>
</div></article> </div>
</article>