study/uTools-Manuals
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-Manuals.git synced 2025-06-08 23:14:06 +08:00
Code Issues Packages Projects Releases Wiki Activity
uTools-Manuals/docs/jQuery/jQuery.noConflict.html
fofolee 38dcd51d8a v0.0.2
2019-04-21 11:50:48 +08:00

236 lines
18 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">jQuery.noConflict()</h1>
<div class="entry-meta">
所属分类：<span class="category"><a href="/category/core/">核心 API</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/miscellaneous/">杂项</a> &gt; <a href="/category/miscellaneous/setup-methods/">设置</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.noConflict/" target="_blank">jQuery.noConflict()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-noConflict1"><h2 class="section-title">
<span class="name">jQuery.noConflict( [removeAll ] )</span><span class="returns">返回: <a href="/Types/#Object">Object</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>放弃jQuery控制<code>$</code> 变量。</p>
<ul class="signatures"><li class="signature" id="jQuery-noConflict-removeAll">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery.noConflict( [removeAll ] )</h4>
<ul><li>
<div><strong>removeAll</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a>
</div>
<div>一个布尔值，判断是否从全局作用域中内去除所有jQuery变量(包括jQuery本身)。</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>很多javascript库使用<code> $</code> 作为一个函数或者变量名，正如jquery做的一样。在jQuery下 <code> $</code>只是<code>jQuery</code>的一个别名，所以不使用<code> $</code>所有功能都是有效的。如果我们需要同时使用jQuery和其他javascript库，我们可以使用 <code>$.noConflict()</code>把<code> $</code>的控制权交给其他库。旧引用的<code>$</code> 被保存在jQuery的初始化;
<code>noConflict()</code> 简单的恢复它们。</p>
<p>如果由于某种原因，加载两个版本的jQuery（这是不推荐），
第二个版本中调用<code>$.noConflict(true)</code> 将返回全局的jQuery变量给第一个版本。</p>
<div class="syntaxhighlighter xml 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>
<div class="line n5">5</div>
<div class="line n6">6</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"other_lib.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">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"jquery.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">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $.noConflict();</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Code that uses other library's $ can follow here.</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></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
这里有个技巧对于解决冲突特别有效。<code>.ready()</code> 方法可以给 jQuery 对象取个别名，这样就能够在传给 <code>.ready()</code> 的回调函数的内部继续使用 $ 而不用担心冲突（注：原因：.ready()是一个闭包）：
</p>
<div class="syntaxhighlighter xml 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>
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"other_lib.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">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"jquery.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">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $.noConflict();</code></div></div><div class="container"><div class="line"><code> jQuery(document).ready(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Code that uses jQuery's $ can follow here.</span></code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Code that uses other library's $ can follow here.</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></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>如果必要的话，我们可以释放<code>jQuery</code>名字，传递<code>true</code>作为一个参数给这个方法。 这不是必须的，如果我们必须这样做的话（举个例子，如果我们在同一个页面上使用多个版本的jQuery库）， 我们必须考虑到大多数插件依靠<code>jQuery</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"> 将$引用的对象映射回原始的对象。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>jQuery.noConflict();</code></div></div><div class="container"><div class="line"><code><span class="comment">// Do something with jQuery</span></code></div></div><div class="container"><div class="line"><code>jQuery(<span class="string">"div p"</span>).hide();</code></div></div><div class="container"><div class="line"><code><span class="comment">// Do something with another library's $()</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"content"</span>).style.display = <span class="string">'none'</span>;</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。
</span>
</h4>
<div class="syntaxhighlighter javascript ">
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>jQuery.noConflict();</code></div></div><div class="container"><div class="line"><code>(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// more code using $ as alias to jQuery</span></code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code>})(jQuery);</code></div></div><div class="container"><div class="line"><code><span class="comment">// other code using $ as an alias to the other library</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc"> 你可以通过jQuery.noConflict() ready约束为一小段代码</span>
</h4>
<div class="syntaxhighlighter javascript ">
<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>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> j = jQuery.noConflict();</code></div></div><div class="container"><div class="line"><code><span class="comment">// Do something with jQuery</span></code></div></div><div class="container"><div class="line"><code>j(<span class="string">"div p"</span>).hide();</code></div></div><div class="container"><div class="line"><code><span class="comment">// Do something with another library's $()</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"content"</span>).style.display = <span class="string">'none'</span>;</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">创建一个新的别名用以在接下来的库中使用jQuery对象。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<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="keyword">var</span> dom = {};</code></div></div><div class="container"><div class="line"><code>dom.query = jQuery.noConflict(<span class="literal">true</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Result:</h4>
<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>
<div class="line n5">5</div>
<div class="line n6">6</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// Do something with the new jQuery</span></code></div></div><div class="container"><div class="line"><code>dom.query(<span class="string">"div p"</span>).hide();</code></div></div><div class="container"><div class="line"><code><span class="comment">// Do something with another library's $()</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"content"</span>).style.display = <span class="string">'none'</span>;</code></div></div><div class="container"><div class="line"><code><span class="comment">// Do something with another version of jQuery</span></code></div></div><div class="container"><div class="line"><code>jQuery(<span class="string">"div &gt; p"</span>).hide();</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-4">
<h4>Example: <span class="desc">Load two versions of jQuery (not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery.</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>
<div class="line n29">29</div>
<div class="line n30">30</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">div</span> <span class="attribute">id</span>=<span class="value">"log"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">h3</span>&gt;</span>Before $.noConflict(true)<span class="tag">&lt;/<span class="title">h3</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><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">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-1.6.2.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> </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> $log = $( <span class="string">"#log"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$log.append( <span class="string">"2nd loaded jQuery version ($): "</span> + $.fn.jquery + <span class="string">"&lt;br&gt;"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">/*</span></code></div></div><div class="container"><div class="line"><code>Restore globally scoped jQuery variables to the first version loaded</code></div></div><div class="container"><div class="line"><code>(the newer version)</code></div></div><div class="container"><div class="line"><code>*/</code></div></div><div class="container"><div class="line"><code>jq162 = jQuery.noConflict(<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>$log.append( <span class="string">"&lt;h3&gt;After $.noConflict(true)&lt;/h3&gt;"</span> );</code></div></div><div class="container"><div class="line"><code>$log.append( <span class="string">"1st loaded jQuery version ($): "</span> + $.fn.jquery + <span class="string">"&lt;br&gt;"</span> );</code></div></div><div class="container"><div class="line"><code>$log.append( <span class="string">"2nd loaded jQuery version (jq162): "</span> + jq162.fn.jquery + <span class="string">"&lt;br&gt;"</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></section>
</div></article> </div>
</article>
Reference in New Issue View Git Blame Copy Permalink