Easy Tutorial
❮ Sel Class Jquery Ref Events ❯

jQuery - noConflict() Method


How to use jQuery alongside other frameworks on the same page?


jQuery and Other JavaScript Frameworks

As you already know, 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 two different frameworks that you are using are using the same shorthand symbol, it could potentially cause the scripts to stop working.

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


jQuery noConflict() Method

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

Of course, you can still use jQuery by its full name instead of the shorthand:

Example

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

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. Here is an example:

Example

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

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 allows you to 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!");
  });
});
❮ Sel Class Jquery Ref Events ❯