uTools-Manuals/docs/jQuery/removeClass.html
2019-04-21 11:50:48 +08:00

213 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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">.removeClass()</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/class-attribute/">class 属性</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/css/">CSS</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/removeClass/" target="_blank">.removeClass()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="removeClass1"><h2 class="section-title">
<span class="name">.removeClass( [className ] )</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="removeClass-className">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.removeClass( [className ] )</h4>
<ul><li>
<div><strong>className</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>每个匹配元素移除的一个或多个用空格隔开的样式名。</div>
</li></ul>
</li>
<li class="signature" id="removeClass-functionindex--class">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.removeClass( function(index, class) )</h4>
<ul><li>
<div><strong>function(index, class)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>一个函数返回一个或多个将要被移除的样式名。index 参数表示在所有匹配元素的集合中当前元素的索引位置。class 参数表示原有的样式名。</div>
</li></ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数,那么所有的样式类将被移除。</p>
<p>从所有匹配的每个元素中同时移除多个用空格隔开的样式类 ,像这样:</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">'p'</span>).removeClass(<span class="string">'myClass yourClass'</span>)</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这个方法通常和 <code>.addClass()</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">'p'</span>).removeClass(<span class="string">'myClass noClass'</span>).addClass(<span class="string">'yourClass'</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这里从所有段落删除 <code>myClass</code><code>noClass</code> 样式类, 然后 <code>yourClass</code> 样式被添加。</p>
<p>用其他样式类替换现有的样式类,我们可以使是有 <code>.attr('class', 'newClass')</code> 替换.</p>
<p>从 jQuery 1.4开始, <code>.removeClass()</code> 方法允许我们指定一个函数作为参数,返回将要被删除的样式。</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">'li:last'</span>).removeClass(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> $(<span class="keyword">this</span>).prev().attr(<span class="string">'class'</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>上例中,移除了最后一个 <code>&lt;li&gt;</code> 的样式,该样式是倒数第二个 <code>&lt;li&gt;</code> 的样式。</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">从匹配的元素中移除“blue”样式类。</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>
</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> </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">4</span>px;</span></span> <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">16</span>px;</span></span> <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="class">.blue</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="class">.under</span> <span class="rules">{ <span class="rule"><span class="attribute">text-decoration</span>:<span class="value">underline;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="class">.highlight</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">yellow;</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> <span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"blue under"</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"blue under highlight"</span>&gt;</span>and<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"blue under"</span>&gt;</span>then<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">p</span> <span class="attribute">class</span>=<span class="value">"blue under"</span>&gt;</span>Goodbye<span class="tag">&lt;/<span class="title">p</span>&gt;</span></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 class="string">"p:even"</span>).removeClass(<span class="string">"blue"</span>);</span><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">
<h4>Example: <span class="desc">从匹配的元素中移除“blue”和“under”样式类。</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>
</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">4</span>px;</span></span> <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">16</span>px;</span></span> <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="class">.blue</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="class">.under</span> <span class="rules">{ <span class="rule"><span class="attribute">text-decoration</span>:<span class="value">underline;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="class">.highlight</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">yellow;</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> <span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"blue under"</span>&gt;</span>Hello<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">p</span> <span class="attribute">class</span>=<span class="value">"blue under highlight"</span>&gt;</span>and<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"blue under"</span>&gt;</span>then<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"blue under"</span>&gt;</span>Goodbye<span class="tag">&lt;/<span class="title">p</span>&gt;</span></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 class="string">"p:odd"</span>).removeClass(<span class="string">"blue under"</span>);</span><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-2">
<h4>Example: <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>
</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> </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">4</span>px;</span></span> <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">16</span>px;</span></span> <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="class">.blue</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="class">.under</span> <span class="rules">{ <span class="rule"><span class="attribute">text-decoration</span>:<span class="value">underline;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="class">.highlight</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">yellow;</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> <span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"blue under"</span>&gt;</span>Hello<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"blue under highlight"</span>&gt;</span>and<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"blue under"</span>&gt;</span>then<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">p</span> <span class="attribute">class</span>=<span class="value">"blue under"</span>&gt;</span>Goodbye<span class="tag">&lt;/<span class="title">p</span>&gt;</span></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 class="string">"p:eq(1)"</span>).removeClass();</span><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>