jQuery noConflict() method

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

jQuery and other JavaScript frameworks

As you have already learned, jQuery uses the $ symbol as an abbreviation for jQuery.

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

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

Some frameworks also use the $ symbol as a shorthand (like jQuery), and if you are using two different frameworks that use the same shorthand symbol, it may cause the script to stop running.

The jQuery team has considered this issue and implemented the noConflict() method.

jQuery noConflict() method

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

Example

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

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

Try it yourself

Example

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

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

Try it yourself

Example

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

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

Try it yourself

jQuery Core Reference Manual

For a complete overview of jQuery core methods, please visit our jQuery Core Reference Manual.