jQuery: The Write Less, Do More JavaScript Library

Core/jQuery.noConflict

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Core

jQuery.noConflict( )

Run this function to give control of the $ variable back to whichever library first implemented it.
This helps to make sure that jQuery doesn't conflict with the $ object of other libraries. By using this function, you will only be able to access jQuery using the 'jQuery' variable. For example, where you used to do $("div p"), you now must do jQuery("div p").

Examples:
Maps the original object that was referenced by $ back to $.

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

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.

jQuery.noConflict();
(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

Creates a different alias instead of jQuery to use in the rest of the script.

var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

NameType

jQuery.noConflict( extreme )

Revert control of both the $ and jQuery variables to their original owners. Use with discretion.
This is a more-extreme version of the simple noConflict method, as this one will completely undo what jQuery has introduced. This is to be used in an extreme case where you'd like to embed jQuery into a high-conflict environment. NOTE: It's very likely that plugins won't work after this particular method has been called.
Arguments:
extremeBoolean
Set to true to enable the extreme rollback of jQuery and it's variables.

Examples:
Completely move jQuery to a new namespace in another object.

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

// 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();

NameType