Homec4science
Diffusion i2b2-webclient (master) Browse

R4897/js-ext/jquerycode/jQuery.noConflict() _ jQuery API Documentation.htm
b28e6a5bfb07master

Last Change
Raw File

jQuery.noConflict() _ jQuery API Documentation.htm
View Options

<!DOCTYPE html>
<!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="js multiplebgs boxshadow cssgradients wf-klavikaweb-i7-active wf-klavikaweb-n7-active wf-sourcecodepro-n4-active wf-sourcecodepro-n7-active wf-active" lang="en-US"><!--<![endif]--><head data-live-domain="api.jquery.com">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/ados" async="" type="text/javascript"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery.noConflict() | jQuery API Documentation</title>
<meta name="author" content="jQuery Foundation - jquery.org">
<meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="http://api.jquery.com/jquery-wp-content/themes/api.jquery.com/i/favicon.ico">
<link rel="stylesheet" href="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/base.css">
<link rel="stylesheet" href="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/style.css">
<!--[if lt IE 7]><link rel="stylesheet" href="css/font-awesome-ie7.min.css"><![endif]-->
<script src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/ga.js" async="" type="text/javascript"></script><script src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/modernizr.js"></script>
<script src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/jquery.js"></script>
<script>window.jQuery || document.write(unescape('%3Cscript src="//api.jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
<script src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/plugins.js"></script>
<script src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/main.js"></script>
<script src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/wde1aof.js"></script>
<style type="text/css">.tk-source-code-pro{font-family:"source-code-pro",sans-serif;}.tk-klavika-web{font-family:"klavika-web",sans-serif;}</style><link href="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/d.css" rel="stylesheet"><script>try{Typekit.load();}catch(e){}</script>
<meta name="generator" content="WordPress 3.9.1">
</head>
<body class="api jquery single single-post postid-363 single-format-standard single-author singular">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="projects">
<li class="project jquery"><a href="http://jquery.com/" title="jQuery">jQuery</a></li>
<li class="project jquery-ui"><a href="http://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
<li class="project jquery-mobile"><a href="http://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
<li class="project sizzlejs"><a href="http://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
<li class="project qunitjs"><a href="http://qunitjs.com/" title="QUnit">QUnit</a></li>
</ul>
<ul class="links l_tinynav1">
<li><a href="http://plugins.jquery.com/">Plugins</a></li>
<li class="dropdown"><a href="http://contribute.jquery.org/">Contribute</a>
<ul>
<li><a href="http://contribute.jquery.org/cla/">CLA</a></li>
<li><a href="http://contribute.jquery.org/style-guide/">Style Guides</a></li>
<li><a href="http://contribute.jquery.org/triage/">Bug Triage</a></li>
<li><a href="http://contribute.jquery.org/code/">Code</a></li>
<li><a href="http://contribute.jquery.org/documentation/">Documentation</a></li>
<li><a href="http://contribute.jquery.org/web-sites/">Web Sites</a></li>
</ul>
</li>
<li class="dropdown"><a href="http://events.jquery.org/">Events</a>
<ul class="wide">
<li><a href="http://appendto.com/what-we-do/training/schedule/jquery-virtual-training-june-2014/">Jun 17-19 | jQuery Virtual Training</a></li>
<li><a href="http://events.jquery.org/2014/chicago/">Sep 12-13 | jQuery Chicago</a></li>
<li><a href="http://2014.cssdevconf.com/">Oct 13-15 | CSS Dev Conf 2014</a></li>
</ul>
</li>
<li class="dropdown"><a href="https://jquery.org/support/">Support</a>
<ul>
<li><a href="http://learn.jquery.com/">Learning Center</a></li>
<li><a href="http://try.jquery.com/">Try jQuery</a></li>
<li><a href="http://irc.jquery.org/">IRC/Chat</a></li>
<li><a href="http://forum.jquery.com/">Forums</a></li>
<li><a href="http://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
<li><a href="https://jquery.org/support/">Commercial Support</a></li>
</ul>
</li>
<li class="dropdown"><a href="https://jquery.org/">jQuery Foundation</a>
<ul>
<li><a href="https://jquery.org/join/">Join</a></li>
<li><a href="https://jquery.org/members/">Members</a></li>
<li><a href="https://jquery.org/team/">Team</a></li>
<li><a href="http://brand.jquery.org/">Brand Guide</a></li>
<li><a href="https://jquery.org/donate/">Donate</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</section>
</header>
<div id="container">
<div id="logo-events" class="constrain clearfix">
<h2 class="logo"><a href="http://jquery.com/" title="jQuery API Documentation">jQuery API Documentation</a></h2>
<aside><div id="broadcast"><a href="http://engine.adzerk.net/r?e=eyJhdiI6MjIyMzYsImF0IjoxMzE0LCJjbSI6MTM3ODc0LCJjaCI6ODM2OCwiY3IiOjQwOTQzOSwiZGkiOiIxMmRjY2UzZmNmMjM0ZGMwYTQ4YTc1M2UzZWZjZTk3NiIsImRtIjoxLCJmYyI6NDk2MTU0LCJmbCI6MjU0NDQwLCJpcCI6IjUwLjE1Ny4yMzEuMjUiLCJudyI6NTQ0OSwicGMiOjAsInByIjoyMTkzNywicnQiOjEsInJmIjoiaHR0cDovL2pxZnVuZGFtZW50YWxzLmNvbS9jaGFwdGVyL2pxdWVyeS1iYXNpY3MiLCJzdCI6NTM4MjksInVrIjoidWUxLWZjNTViZjRhZjk1NzRlMGRhMDEyNjhjMTFjY2Q4Y2JkIiwidHMiOjE0MTA2NTgwNzA3NDksInVyIjoiaHR0cDovLzIwMTQuY3NzZGV2Y29uZi5jb20vP3V0bV9zb3VyY2U9anF1ZXJ5Y29tJnV0bV9tZWRpdW09YmFubmVyJnV0bV9jYW1wYWlnbj1jc3NkZXZjb25mMjAxNCJ9&amp;s=dr6PMnuXSGVPk_nFv33NRb8WkaM" rel="nofollow" target="_blank" title="CSS Dev Conference 2014"><img src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/252d1bca0e21492bbb0d390e8685097e.png" title="CSS Dev Conference 2014" alt="CSS Dev Conference 2014" border="0" height="100" width="400"></a><img src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/i.gif" style="position:absolute;" border="0" height="0px" width="0px"></div></aside>
</div>
<nav id="main" class="constrain clearfix">
<div class="menu-top-container">
<ul id="menu-top" class="menu l_tinynav2">
<li class="menu-item"><a href="http://jquery.com/download/">Download</a></li>
<li class="menu-item current"><a href="http://api.jquery.com/">API Documentation</a></li>
<li class="menu-item"><a href="http://blog.jquery.com/">Blog</a></li>
<li class="menu-item"><a href="http://plugins.jquery.com/">Plugins</a></li>
<li class="menu-item"><a href="http://jquery.com/browser-support/">Browser Support</a></li>
</ul><select class="tinynav tinynav2" id="tinynav2"><option selected="selected">Navigate...</option><option value="http://jquery.com/download/">Download</option><option value="http://api.jquery.com/">API Documentation</option><option value="http://blog.jquery.com/">Blog</option><option value="http://plugins.jquery.com/">Plugins</option><option value="http://jquery.com/browser-support/">Browser Support</option></select>
</div>
<form method="get" class="searchform" action="//api.jquery.com/">
<button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
<label>
<span class="visuallyhidden">Search jQuery API Documentation</span>
<input name="s" placeholder="Search" type="text">
</label>
</form>
</nav>
<div id="content-wrapper" class="clearfix row">
<div class="content-right twelve columns">
<div id="content">
<article id="post-363" class="post-363 post type-post status-publish format-standard hentry category-core category-setup-methods category-10">
<header class="entry-header">
<h1 class="entry-title">jQuery.noConflict()</h1>
<hr>
<div class="entry-meta">
Categories: <span class="category"><a href="http://api.jquery.com/category/core/" title="View all posts in Core">Core</a></span><span class="category-divider"> | </span><span class="category"><a href="http://api.jquery.com/category/miscellaneous/" title="View all posts in Miscellaneous">Miscellaneous</a> &gt; <a href="http://api.jquery.com/category/miscellaneous/setup-methods/" title="View all posts in Setup Methods">Setup Methods</a></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<article id="jQuery-noConflict1" class="entry method"><h2 class="section-title">
<span class="name">jQuery.noConflict( [removeAll ] )</span><span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object">Object</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Relinquish jQuery's control of the <code>$</code> variable.</p>
<ul class="signatures"><li class="signature">
<h4 class="name">
<span class="version-details">version added: <a href="http://api.jquery.com/category/version/1.0/">1.0</a></span><a id="jQuery-noConflict-removeAll" href="#jQuery-noConflict-removeAll"><span class="icon-link"></span>jQuery.noConflict( [removeAll ] )</a>
</h4>
<ul><li>
<div><strong>removeAll</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a>
</div>
<div>A Boolean indicating whether to remove all jQuery variables from the global scope (including jQuery itself).</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-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 you need to use another JavaScript library alongside jQuery, return control of <code>$</code> back to the other library with a call to <code>$.noConflict()</code>. Old references of <code>$</code> are saved during jQuery initialization; <code>noConflict()</code> simply restores them.</p>
<p>If for some reason two versions of jQuery are loaded (which is not recommended), calling <code>$.noConflict( true )</code> from the second version will return the globally scoped jQuery variables to those of the first version.</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">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">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>&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>This technique is especially effective in conjunction with the <code>.ready()</code> method's ability to alias the jQuery object, as within callback passed to <code>.ready()</code> you can use <code>$</code> if you wish without fear of conflicts later:</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">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">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>&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>If necessary, you 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 you must
do this (for example, if you need to use multiple versions of the
jQuery library on the same page), you need to consider that most
plug-ins rely on the presence of the <code>jQuery</code> variable and may not operate correctly in this situation.</p>
</div>
<section class="entry-examples" id="entry-examples"><header><h2>Examples:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">Map the original object that was referenced by $ back to $.</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">Revert the $ alias and then create and
execute a function to provide the $ as a jQuery alias inside the
function's 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>
<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>
<div class="line n8">8</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> </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">Create a different alias instead of jQuery to use in the rest of the script.</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><span class="keyword">var</span> j = jQuery.noConflict();</code></div></div><div class="container"><div class="line"><code> </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> </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">Completely move jQuery to a new namespace in another object.</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>
<div class="line n7">7</div>
<div class="line n8">8</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> </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> </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>
<div class="line n31">31</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> <span class="attribute">lang</span>=<span class="value">"en"</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">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">title</span>&gt;</span>jQuery.noConflict demo<span class="tag">&lt;/<span class="title">title</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">"//code.jquery.com/jquery-1.10.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><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">"//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">// Restore globally scoped jQuery variables to the first version loaded</span></code></div></div><div class="container"><div class="line"><code><span class="comment">// (the newer version)</span></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"><iframe height="250" width="100%"></iframe></div>
</div></section>
</div></article> </div><!-- .entry-content -->
</article><!-- #post-363 -->
</div>
<div id="sidebar" class="widget-area" role="complementary">
<aside id="categories" class="widget">
<ul>
<li class="cat-item cat-item-1"><a href="http://api.jquery.com/category/ajax/" title="View all posts filed under Ajax">Ajax</a>
<ul class="children">
<li class="cat-item cat-item-2"><a href="http://api.jquery.com/category/ajax/global-ajax-event-handlers/" title="View all posts filed under Global Ajax Event Handlers">Global Ajax Event Handlers</a>
</li>
<li class="cat-item cat-item-3"><a href="http://api.jquery.com/category/ajax/helper-functions/" title="View all posts filed under Helper Functions">Helper Functions</a>
</li>
<li class="cat-item cat-item-4"><a href="http://api.jquery.com/category/ajax/low-level-interface/" title="View all posts filed under Low-Level Interface">Low-Level Interface</a>
</li>
<li class="cat-item cat-item-5"><a href="http://api.jquery.com/category/ajax/shorthand-methods/" title="View all posts filed under Shorthand Methods">Shorthand Methods</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-6"><a href="http://api.jquery.com/category/attributes/" title="View all posts filed under Attributes">Attributes</a>
</li>
<li class="cat-item cat-item-7"><a href="http://api.jquery.com/category/callbacks-object/" title="View all posts filed under Callbacks Object">Callbacks Object</a>
</li>
<li class="cat-item cat-item-8 current-cat"><a href="http://api.jquery.com/category/core/" title="View all posts filed under Core">Core</a>
</li>
<li class="cat-item cat-item-9"><a href="http://api.jquery.com/category/css/" title="View all posts filed under CSS">CSS</a>
</li>
<li class="cat-item cat-item-10"><a href="http://api.jquery.com/category/data/" title="View all posts filed under Data">Data</a>
</li>
<li class="cat-item cat-item-11"><a href="http://api.jquery.com/category/deferred-object/" title="View all posts filed under Deferred Object">Deferred Object</a>
</li>
<li class="cat-item cat-item-87"><a href="http://api.jquery.com/category/deprecated/" title="View all posts filed under Deprecated">Deprecated</a>
<ul class="children">
<li class="cat-item cat-item-90"><a href="http://api.jquery.com/category/deprecated/deprecated-1.3/" title="View all posts filed under Deprecated 1.3">Deprecated 1.3</a>
</li>
<li class="cat-item cat-item-88"><a href="http://api.jquery.com/category/deprecated/deprecated-1.7/" title="View all posts filed under Deprecated 1.7">Deprecated 1.7</a>
</li>
<li class="cat-item cat-item-89"><a href="http://api.jquery.com/category/deprecated/deprecated-1.8/" title="View all posts filed under Deprecated 1.8">Deprecated 1.8</a>
</li>
<li class="cat-item cat-item-93"><a href="http://api.jquery.com/category/deprecated/deprecated-1.10/" title="View all posts filed under Deprecated 1.10">Deprecated 1.10</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-12"><a href="http://api.jquery.com/category/dimensions/" title="View all posts filed under Dimensions">Dimensions</a>
</li>
<li class="cat-item cat-item-13"><a href="http://api.jquery.com/category/effects/" title="View all posts filed under Effects">Effects</a>
<ul class="children">
<li class="cat-item cat-item-14"><a href="http://api.jquery.com/category/effects/basics/" title="View all posts filed under Basics">Basics</a>
</li>
<li class="cat-item cat-item-15"><a href="http://api.jquery.com/category/effects/custom-effects/" title="View all posts filed under Custom">Custom</a>
</li>
<li class="cat-item cat-item-16"><a href="http://api.jquery.com/category/effects/fading/" title="View all posts filed under Fading">Fading</a>
</li>
<li class="cat-item cat-item-17"><a href="http://api.jquery.com/category/effects/sliding/" title="View all posts filed under Sliding">Sliding</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-18"><a href="http://api.jquery.com/category/events/" title="View all posts filed under Events">Events</a>
<ul class="children">
<li class="cat-item cat-item-19"><a href="http://api.jquery.com/category/events/browser-events/" title="View all posts filed under Browser Events">Browser Events</a>
</li>
<li class="cat-item cat-item-20"><a href="http://api.jquery.com/category/events/document-loading/" title="View all posts filed under Document Loading">Document Loading</a>
</li>
<li class="cat-item cat-item-21"><a href="http://api.jquery.com/category/events/event-handler-attachment/" title="View all posts filed under Event Handler Attachment">Event Handler Attachment</a>
</li>
<li class="cat-item cat-item-22"><a href="http://api.jquery.com/category/events/event-object/" title="View all posts filed under Event Object">Event Object</a>
</li>
<li class="cat-item cat-item-23"><a href="http://api.jquery.com/category/events/form-events/" title="View all posts filed under Form Events">Form Events</a>
</li>
<li class="cat-item cat-item-24"><a href="http://api.jquery.com/category/events/keyboard-events/" title="View all posts filed under Keyboard Events">Keyboard Events</a>
</li>
<li class="cat-item cat-item-25"><a href="http://api.jquery.com/category/events/mouse-events/" title="View all posts filed under Mouse Events">Mouse Events</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-26"><a href="http://api.jquery.com/category/forms/" title="View all posts filed under Forms">Forms</a>
</li>
<li class="cat-item cat-item-27"><a href="http://api.jquery.com/category/internals/" title="View all posts filed under Internals">Internals</a>
</li>
<li class="cat-item cat-item-28"><a href="http://api.jquery.com/category/manipulation/" title="View all posts filed under Manipulation">Manipulation</a>
<ul class="children">
<li class="cat-item cat-item-29"><a href="http://api.jquery.com/category/manipulation/class-attribute/" title="View all posts filed under Class Attribute">Class Attribute</a>
</li>
<li class="cat-item cat-item-30"><a href="http://api.jquery.com/category/manipulation/copying/" title="View all posts filed under Copying">Copying</a>
</li>
<li class="cat-item cat-item-32"><a href="http://api.jquery.com/category/manipulation/dom-insertion-around/" title="View all posts filed under DOM Insertion, Around">DOM Insertion, Around</a>
</li>
<li class="cat-item cat-item-33"><a href="http://api.jquery.com/category/manipulation/dom-insertion-inside/" title="View all posts filed under DOM Insertion, Inside">DOM Insertion, Inside</a>
</li>
<li class="cat-item cat-item-34"><a href="http://api.jquery.com/category/manipulation/dom-insertion-outside/" title="View all posts filed under DOM Insertion, Outside">DOM Insertion, Outside</a>
</li>
<li class="cat-item cat-item-35"><a href="http://api.jquery.com/category/manipulation/dom-removal/" title="View all posts filed under DOM Removal">DOM Removal</a>
</li>
<li class="cat-item cat-item-36"><a href="http://api.jquery.com/category/manipulation/dom-replacement/" title="View all posts filed under DOM Replacement">DOM Replacement</a>
</li>
<li class="cat-item cat-item-37"><a href="http://api.jquery.com/category/manipulation/general-attributes/" title="View all posts filed under General Attributes">General Attributes</a>
</li>
<li class="cat-item cat-item-38"><a href="http://api.jquery.com/category/manipulation/style-properties/" title="View all posts filed under Style Properties">Style Properties</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-39"><a href="http://api.jquery.com/category/miscellaneous/" title="View all posts filed under Miscellaneous">Miscellaneous</a>
<ul class="children">
<li class="cat-item cat-item-40"><a href="http://api.jquery.com/category/miscellaneous/collection-manipulation/" title="View all posts filed under Collection Manipulation">Collection Manipulation</a>
</li>
<li class="cat-item cat-item-41"><a href="http://api.jquery.com/category/miscellaneous/data-storage/" title="View all posts filed under Data Storage">Data Storage</a>
</li>
<li class="cat-item cat-item-42"><a href="http://api.jquery.com/category/miscellaneous/dom-element-methods/" title="View all posts filed under DOM Element Methods">DOM Element Methods</a>
</li>
<li class="cat-item cat-item-43"><a href="http://api.jquery.com/category/miscellaneous/setup-methods/" title="View all posts filed under Setup Methods">Setup Methods</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-44"><a href="http://api.jquery.com/category/offset/" title="View all posts filed under Offset">Offset</a>
</li>
<li class="cat-item cat-item-45"><a href="http://api.jquery.com/category/properties/" title="View all posts filed under Properties">Properties</a>
<ul class="children">
<li class="cat-item cat-item-46"><a href="http://api.jquery.com/category/properties/jquery-object-instance-properties/" title="View all posts filed under Properties of jQuery Object Instances">Properties of jQuery Object Instances</a>
</li>
<li class="cat-item cat-item-47"><a href="http://api.jquery.com/category/properties/global-jquery-object-properties/" title="View all posts filed under Properties of the Global jQuery Object">Properties of the Global jQuery Object</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-92"><a href="http://api.jquery.com/category/removed/" title="View all posts filed under Removed">Removed</a>
</li>
<li class="cat-item cat-item-48"><a href="http://api.jquery.com/category/selectors/" title="View all posts filed under Selectors">Selectors</a>
<ul class="children">
<li class="cat-item cat-item-49"><a href="http://api.jquery.com/category/selectors/attribute-selectors/" title="View all posts filed under Attribute">Attribute</a>
</li>
<li class="cat-item cat-item-50"><a href="http://api.jquery.com/category/selectors/basic-css-selectors/" title="View all posts filed under Basic">Basic</a>
</li>
<li class="cat-item cat-item-51"><a href="http://api.jquery.com/category/selectors/basic-filter-selectors/" title="View all posts filed under Basic Filter">Basic Filter</a>
</li>
<li class="cat-item cat-item-52"><a href="http://api.jquery.com/category/selectors/child-filter-selectors/" title="View all posts filed under Child Filter">Child Filter</a>
</li>
<li class="cat-item cat-item-53"><a href="http://api.jquery.com/category/selectors/content-filter-selector/" title="View all posts filed under Content Filter">Content Filter</a>
</li>
<li class="cat-item cat-item-54"><a href="http://api.jquery.com/category/selectors/form-selectors/" title="View all posts filed under Form">Form</a>
</li>
<li class="cat-item cat-item-55"><a href="http://api.jquery.com/category/selectors/hierarchy-selectors/" title="View all posts filed under Hierarchy">Hierarchy</a>
</li>
<li class="cat-item cat-item-56"><a href="http://api.jquery.com/category/selectors/jquery-selector-extensions/" title="View all posts filed under jQuery Extensions">jQuery Extensions</a>
</li>
<li class="cat-item cat-item-57"><a href="http://api.jquery.com/category/selectors/visibility-filter-selectors/" title="View all posts filed under Visibility Filter">Visibility Filter</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-58"><a href="http://api.jquery.com/category/traversing/" title="View all posts filed under Traversing">Traversing</a>
<ul class="children">
<li class="cat-item cat-item-59"><a href="http://api.jquery.com/category/traversing/filtering/" title="View all posts filed under Filtering">Filtering</a>
</li>
<li class="cat-item cat-item-60"><a href="http://api.jquery.com/category/traversing/miscellaneous-traversal/" title="View all posts filed under Miscellaneous Traversing">Miscellaneous Traversing</a>
</li>
<li class="cat-item cat-item-61"><a href="http://api.jquery.com/category/traversing/tree-traversal/" title="View all posts filed under Tree Traversal">Tree Traversal</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-63"><a href="http://api.jquery.com/category/utilities/" title="View all posts filed under Utilities">Utilities</a>
</li>
<li class="cat-item cat-item-64"><a href="http://api.jquery.com/category/version/" title="View all posts filed under Version">Version</a>
<ul class="children">
<li class="cat-item cat-item-65"><a href="http://api.jquery.com/category/version/1.0/" title="View all posts filed under Version 1.0">Version 1.0</a>
</li>
<li class="cat-item cat-item-66"><a href="http://api.jquery.com/category/version/1.0.4/" title="View all posts filed under Version 1.0.4">Version 1.0.4</a>
</li>
<li class="cat-item cat-item-67"><a href="http://api.jquery.com/category/version/1.1/" title="View all posts filed under Version 1.1">Version 1.1</a>
</li>
<li class="cat-item cat-item-68"><a href="http://api.jquery.com/category/version/1.1.2/" title="View all posts filed under Version 1.1.2">Version 1.1.2</a>
</li>
<li class="cat-item cat-item-69"><a href="http://api.jquery.com/category/version/1.1.3/" title="View all posts filed under Version 1.1.3">Version 1.1.3</a>
</li>
<li class="cat-item cat-item-70"><a href="http://api.jquery.com/category/version/1.1.4/" title="View all posts filed under Version 1.1.4">Version 1.1.4</a>
</li>
<li class="cat-item cat-item-71"><a href="http://api.jquery.com/category/version/1.2/" title="View all posts filed under Version 1.2">Version 1.2</a>
</li>
<li class="cat-item cat-item-72"><a href="http://api.jquery.com/category/version/1.2.3/" title="View all posts filed under Version 1.2.3">Version 1.2.3</a>
</li>
<li class="cat-item cat-item-73"><a href="http://api.jquery.com/category/version/1.2.6/" title="View all posts filed under Version 1.2.6">Version 1.2.6</a>
</li>
<li class="cat-item cat-item-74"><a href="http://api.jquery.com/category/version/1.3/" title="View all posts filed under Version 1.3">Version 1.3</a>
</li>
<li class="cat-item cat-item-75"><a href="http://api.jquery.com/category/version/1.4/" title="View all posts filed under Version 1.4">Version 1.4</a>
</li>
<li class="cat-item cat-item-76"><a href="http://api.jquery.com/category/version/1.4.1/" title="View all posts filed under Version 1.4.1">Version 1.4.1</a>
</li>
<li class="cat-item cat-item-77"><a href="http://api.jquery.com/category/version/1.4.2/" title="View all posts filed under Version 1.4.2">Version 1.4.2</a>
</li>
<li class="cat-item cat-item-78"><a href="http://api.jquery.com/category/version/1.4.3/" title="View all posts filed under Version 1.4.3">Version 1.4.3</a>
</li>
<li class="cat-item cat-item-79"><a href="http://api.jquery.com/category/version/1.4.4/" title="View all posts filed under Version 1.4.4">Version 1.4.4</a>
</li>
<li class="cat-item cat-item-80"><a href="http://api.jquery.com/category/version/1.5/" title="View all posts filed under Version 1.5">Version 1.5</a>
</li>
<li class="cat-item cat-item-81"><a href="http://api.jquery.com/category/version/1.5.1/" title="View all posts filed under Version 1.5.1">Version 1.5.1</a>
</li>
<li class="cat-item cat-item-82"><a href="http://api.jquery.com/category/version/1.6/" title="View all posts filed under Version 1.6">Version 1.6</a>
</li>
<li class="cat-item cat-item-83"><a href="http://api.jquery.com/category/version/1.7/" title="View all posts filed under Version 1.7">Version 1.7</a>
</li>
<li class="cat-item cat-item-84"><a href="http://api.jquery.com/category/version/1.8/" title="View all posts filed under Version 1.8">Version 1.8</a>
</li>
<li class="cat-item cat-item-86"><a href="http://api.jquery.com/category/version/1.9/" title="View all posts filed under Version 1.9">Version 1.9</a>
</li>
</ul>
</li>
</ul>
</aside>
</div>
</div>
</div>
</div>
<footer class="clearfix simple">
<div class="constrain">
<div class="row">
<div class="six columns offset-by-three">
<h3><span>Books</span></h3>
<ul class="books">
<li>
<a href="http://www.packtpub.com/learning-jquery-with-simple-javascript-techniques-fourth-edition/book">
<img src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/learning-jquery-4th-ed.jpg" alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" height="114" width="92">
Learning jQuery Fourth Edition
<cite>Karl Swedberg and Jonathan Chaffer</cite>
</a>
</li>
<li>
<a href="http://www.manning.com/derosa?a_aid=141d9491&amp;a_bid=bdd5b7ad">
<img src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/jquery-in-action.jpg" alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" height="114" width="92">
jQuery in Action
<cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite>
</a>
</li>
<li>
<a href="http://www.syncfusion.com/resources/techportal/ebooks/jquery?utm_medium=BizDev-jQuery.org0513">
<img src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/jquery-succinctly.jpg" alt="jQuery Succinctly by Cody Lindley" height="114" width="92">
jQuery Succinctly
<cite>Cody Lindley</cite>
</a>
</li>
</ul>
</div>
</div>
<div id="legal">
<ul class="footer-site-links">
<li><a class="icon-pencil" href="http://learn.jquery.com/">Learning Center</a></li>
<li><a class="icon-group" href="http://forum.jquery.com/">Forum</a></li>
<li><a class="icon-wrench" href="http://api.jquery.com/">API</a></li>
<li><a class="icon-twitter" href="http://twitter.com/jquery">Twitter</a></li>
<li><a class="icon-comments" href="http://irc.jquery.org/">IRC</a></li>
<li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
</ul>
<p class="copyright">
Copyright 2014 <a href="https://jquery.org/team/">The jQuery Foundation</a>.
<a href="https://jquery.org/license/">jQuery License</a>
<span class="sponsor-line"><a href="http://mediatemple.net/" rel="nofollow" class="mt-link">Web hosting by Media Temple</a> | <a href="http://www.maxcdn.com/" rel="nofollow" class="mc-link">CDN by MaxCDN</a> | <a href="http://wordpress.org/" class="wp-link">Powered by WordPress</a> | Thanks: <a href="https://jquery.org/members/">Members</a>, <a href="https://jquery.org/sponsors/">Sponsors</a></span>
</p>
</div>
</div>
</footer>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1076265-1']);
_gaq.push(['_setDomainName', 'api.jquery.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="jQuery.noConflict%28%29%20_%20jQuery%20API%20Documentation_files/comment-reply.js"></script>
<div style="display: none;" id="cboxOverlay"></div><div style="display: none;" class="" id="colorbox"><div id="cboxWrapper"><div><div style="float: left;" id="cboxTopLeft"></div><div style="float: left;" id="cboxTopCenter"></div><div style="float: left;" id="cboxTopRight"></div></div><div style="clear: left;"><div style="float: left;" id="cboxMiddleLeft"></div><div style="float: left;" id="cboxContent"><div style="width: 0px; height: 0px; overflow: hidden; float: left;" id="cboxLoadedContent"></div><div style="float: left;" id="cboxTitle"></div><div style="float: left;" id="cboxCurrent"></div><div style="float: left;" id="cboxNext"></div><div style="float: left;" id="cboxPrevious"></div><div style="float: left;" id="cboxSlideshow"></div><div style="float: left;" id="cboxClose"></div></div><div style="float: left;" id="cboxMiddleRight"></div></div><div style="clear: left;"><div style="float: left;" id="cboxBottomLeft"></div><div style="float: left;" id="cboxBottomCenter"></div><div style="float: left;" id="cboxBottomRight"></div></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div></div></body></html>
c4science · Help