jQuery Core - noConflict() Method

jQuery Core Reference Manual

Instance

Use the noConflict() method to specify a new name for the jQuery variable:

var jq=$.noConflict();

Try it yourself

Definition and Usage

The noConflict() method delegates the control of the $ variable to jQuery.

This method releases jQuery's control over the $ variable.

This method can also be used to specify a new custom name for the jQuery variable.

Tip:This method is very useful when other JavaScript libraries use $ for their functions.

Syntax

jQuery.noConflict(removeAll)
Parameter Description
removeAll Boolean. Indicates whether to completely restore the jQuery variable.

Description

Many JavaScript libraries use $ as a function or variable name, and jQuery is no exception. In jQuery, $ is just an alias for jQuery, so all functionality can be guaranteed even without using $. If we need to use another JavaScript library outside of jQuery, we can return control to that library by calling $.noConflict():

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code using $ from another library
</script>

This can be combined with the .ready() method to create aliases for jQuery objects, which is a very effective technique:

<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 using jQuery's $
  });
  // Code using $ from another library
</script>

In addition, by passing the parameter true to this method, we can return control of $ and jQuery to the original library. Please consider carefully before using it!

This is a more extreme version than the simple noConflict method, because it will completely redefine jQuery. It is usually used in extreme cases, such as embedding jQuery into a highly conflicting environment. Note: It is very likely that calling this method will cause plugins to fail.

Instance

Example 1

Map the $-referenced object back to the original object:

jQuery.noConflict();
jQuery("div p").hide();	// Using jQuery
$("content").style.display = "none";	// Using other library's $()

Example 2

Restore the use of the alias $, then create and execute a function, in which $ is still used as the alias for jQuery within the function's scope. The original $ object is invalid in this function. This is very effective for most plugins that do not depend on other libraries:

jQuery.noConflict();
(function($) { 
  $(function() {
    // Code using $ as jQuery alias
  });
})(jQuery);
... // Other libraries' code using $ as an alias

Example 3

You can combine jQuery.noConflict() with the shorthand ready to make the code more compact:

jQuery.noConflict()(function()
    // Code using jQuery
});
... // Other library code using $ as an alias

Example 4

Create a new alias to use jQuery objects in the following library:

var j = jQuery.noConflict();
j("div p").hide();	// jQuery code based on jQuery
$("content").style.display = "none";	// $() code based on other libraries

Example 5

Fully move jQuery to a new namespace:

var dom = {};
dom.query = jQuery.noConflict(true);

Result:

dom.query("div p").hide();	// New jQuery code
$("content").style.display = "none";	// Another library's $() code
jQuery("div > p").hide();	// Another version of jQuery code

jQuery Core Reference Manual