1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">jQuery.noConflict()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/core/" title="View all posts in Core">Core</a></span> | <span class="category"><a href="http://api.jquery.com/category/miscellaneous/" title="View all posts in Miscellaneous">Miscellaneous</a> > <a href="http://api.jquery.com/category/miscellaneous/setup-methods/" title="View all posts in Setup Methods">Setup Methods</a></span>
</div>
</div>
<div id="jQuery-noConflict1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.noConflict( [removeAll] )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Object">Object</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Relinquish jQuery's control of the $ variable.</p>
<ul class="signatures"><li class="signature" id="jQuery-noConflict-removeAll">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>jQuery.noConflict( [removeAll] )</h4>
<p class="arguement"><strong>removeAll</strong>A Boolean indicating whether to remove all jQuery variables from the global scope (including jQuery itself).</p>
</li></ul>
<div class="longdesc">
<p>Many JavaScript libraries use <code> $</code> as a function or variable name, just as jQuery does. In jQuery's case, <code> $</code> is just an alias for <code>jQuery</code>, so all functionality is available without using <code> $</code>. If we need to use another JavaScript library alongside jQuery, we can return control of <code> $</code> back to the other library with a call to <code>$.noConflict()</code>:</p>
<pre>
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
</pre>
<p>This technique is especially effective in conjunction with the .ready() method's ability to alias the jQuery object, as within callback passed to .ready() we can use $ if we wish without fear of conflicts later:</p>
<pre>
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
</pre>
<p>If necessary, we can free up the <code> jQuery</code> name as well by passing <code>true</code> as an argument to the method. This is rarely necessary, and if we must do this (for example, if we need to use multiple versions of the <code>jQuery</code> library on the same page), we need to consider that most plug-ins rely on the presence of the jQuery variable and may not operate correctly in this situation.</p>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Maps the original object that was referenced by $ back to $.</span>
</h4>
<pre class="prettyprint"><code class="example">jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';</code></pre>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Reverts the $ alias and then creates and executes a function to provide the $ as a jQuery alias inside the functions scope. Inside the function the original $ object is not available. This works well for most plugins that don't rely on any other library.
</span>
</h4>
<pre class="prettyprint"><code class="example">jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library</code></pre>
</div>
<div id="example-2">
<h4>Example: <span class="desc">You can chain the jQuery.noConflict() with the shorthand ready for a compact code.
</span>
</h4>
<pre class="prettyprint"><code class="example">jQuery.noConflict()(function(){
// code using jQuery
});
// other code using $ as an alias to the other library</code></pre>
</div>
<div id="example-3">
<h4>Example: <span class="desc">Creates a different alias instead of jQuery to use in the rest of the script.</span>
</h4>
<pre class="prettyprint"><code class="example">var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';</code></pre>
</div>
<div id="example-4">
<h4>Example: <span class="desc">Completely move jQuery to a new namespace in another object.</span>
</h4>
<pre class="prettyprint"><code class="example">var dom = {};
dom.query = jQuery.noConflict(true);</code></pre>
<h4>Result:</h4>
<pre><code class="results">// Do something with the new jQuery
dom.query("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
// Do something with another version of jQuery
jQuery("div > p").hide();</code></pre>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
