jQuery Basic

jQuery Home jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events

jQuery Effects

jQuery Show/Hide jQuery Fade jQuery Slide jQuery Animation jQuery Stop jQuery Chaining jQuery Callback

jQuery manipulation

jQuery Get/Set jQuery Insert jQuery Remove jQuery CSS Classes jQuery Style Properties jQuery Dimensions

jQuery advanced

jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering jQuery Ajax jQuery Load jQuery Get/Post jQuery No-Conflict

jQuery Exercises

jQuery Practice Examples jQuery Quiz

jQuery References

jQuery Overview jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Misc jQuery Properties

jQuery noConflict() Method

This is a way to avoid conflicts between jQuery and other JavaScript library or framework. We will learn how to avoid conflicts.

jQuery uses the dollar sign ($) as a shortcut or alias for jQuery. And There are many other popular JavaScript frameworks like: Angular, Backbone, Ember, Knockout, and more.

Thus, if you use another JavaScript library that also uses the $ sign as a shortcut, along with the jQuery library on the same page, conflicts could occur. Fortunately, jQuery provides a special method named noConflict() to deal with such situation.

jQuery noConflict() Method

The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. You can of course still use jQuery, simply by writing the full name instead of the shortcut:

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

Now, you can create your your own shortcut very easily. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use. Here is an example:

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

If you have a block of jQuery code which uses the $ shortcut and you do not want to change it all, you can pass the $ sign in as a parameter to the ready method. This allows you to access jQuery using $, inside this function - outside of it, you will have to use "jQuery":

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

To Test your knowledge about jQuery click on jQuery Quiz