jQuery - noConflict() Method

How to use jQuery and other frameworks simultaneously on a page?

jQuery and Other JavaScript Frameworks

As you have already learned, jQuery uses the $ symbol as a shorthand for jQuery.

What if other JavaScript frameworks also use the $ symbol as a shorthand?

Some other JavaScript frameworks include: MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman, and Ext JS.

Some of these frameworks also use the $ symbol as a shorthand (just like jQuery). If you are using two different frameworks that use the same shorthand symbol, it may cause scripts to stop running.

The jQuery team took this issue into consideration and implemented the noConflict() method.

jQuery noConflict() Method

The noConflict() method releases control of the $ identifier, so other scripts can use it.

Of course, you can still use jQuery by replacing the shorthand with the full name:

Example

$.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); });

Try it yourself »

You can also create your own shorthand. noConflict() returns a reference to jQuery, which you can store in a variable for later use. Take a look at this example:

Example

var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery is still working!"); }); });

Try it yourself »

If your jQuery code block uses the $ shorthand and you are unwilling to change this shortcut, you can pass the $ symbol as a variable to the ready method. This way, you can use the $ symbol inside the function - while outside the function, you still have to use "jQuery":

Example

$.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery is still working!"); }); });

Try it yourself »
Other Extensions