Description: Relinquish jQuery's control of the $ variable.
removeAllA Boolean indicating whether to remove all jQuery variables from the global scope (including jQuery itself).
Many JavaScript libraries use $
as a function or variable name, just as jQuery does. In jQuery's case, $
is just an alias for jQuery
, so all functionality is available without using $
. If we need to use another JavaScript library alongside jQuery, we can return control of $
back to the other library with a call to $.noConflict()
:
<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>
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:
<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>
If necessary, we can free up the jQuery
name as well by passing true
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 jQuery
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.
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
jQuery.noConflict()(function(){
// code using jQuery
});
// other code using $ as an alias to the other library
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
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();