Most jQuery users love it for its easy CSS selectors, DOM manipulation and slick effects. We don’t normally think about what happens behind the scenes when we call our favorite jQuery methods, we just naturally expect they work as desired.

I’m going to start off my dissecting and explaining a relatively simple method called noConflict. If you want to follow along you can download a development copy of jQuery. As of this post, we’re using version 1.3.2.

Open up the file and go to line 19. You’ll see the code below

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
 
jQuery = window.jQuery = window.$ = function( selector, context ) {
	// The jQuery object is actually just the init constructor 'enhanced'
	return new jQuery.fn.init( selector, context );
},

Right away you’ll notice that 2 variables are created with an underscore, this is to hold a reference to the old namespaces that might be in use. For example, if we load the Prototype JavaScript framework before jQuery, it uses the $ function, so jQuery makes a copy of that reference before it over writes it with it’s own below. Now if we ever want to get back to the Prototype $ reference, we can get at it with the _$ variable.

Note: If you load the jQuery library before Prototype, there is no need to call noConflict(). But you will have to set up a new way to target elements – see below.

This now brings us to the noConflict method. If you go to line 619 you’ll see our lovely method:

noConflict: function( deep ) {
	window.$ = _$;
 
	if ( deep )
		window.jQuery = _jQuery;
 
	return jQuery;
},

Remember that _$ variable that get’s set at the top of the jQuery file? There it is! If you remember, we copied an existing $ reference (Prototype) into the _$ variable to get at it later if we wanted. In this method we return the $ sign to it’s owner, which in this case is the Prototype $ function. It’s set by the line that says window.$ = _$. We use the window prefix to reference the global namespace. Now we want our $ function back so we can use it for Prototype, you can do this by calling the noConflict() method:

jQuery.noConflict();
$('someid').hide(); // The $ function is now using Prototype to target elements
jQuery('#someid').hide() // The jQuery function is used instead of the $ function

But I hate typing jQuery each time I target some elements, what can I do? Simple. Since the noConflict() method returns the jQuery object, we can store that in a variable.

var jQ = jQuery.noConflict();
$('someid').hide(); // The $ function is now using Prototype to target elements
jQ('#someid').hide() // The jQ function after we set it above

The noConflict() method also accepts one boolean parameter called deep. For the most part, this does not need to be set unless you’re working in a high conflict environment. For example, you might have 2 versions of jQuery running or something else using the jQuery namespace (god I hope not). That might be grounds for setting the deep parameter to true. For example you could move the jQuery object to an entirely new namespace:

<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
var myNamespace = {};
myNamespace.query = jQuery.noConflict(true);
myNamespace.query('#my-id-with-new-version-of-jquery'); // This will execute using jQuery 1.3.2
jQuery('#my-id-with-old-version-of-jquery'); // This will execute using jQuery 1.3.1
$('my-id-with-prototype'); // This will execute using Prototype

View the the demo I made of jQuery.noConflict(true) in action.