[jQuery] jQuery / jQuery.noConflict () / Prevent conflicts with other libraries, different versions of jQuery

#jQuery

Using jQuery may conflict with other libraries. There are two causes of collision.

1.Conflict with other libraries
2.Conflicts with other versions of jQuery

Let's see how we can prevent collisions in each case.

Conflict with other libraries

jQuery uses $ as an alias for jQuery. However, if you use $ as a function or variable in other libraries, jQuery may not work properly. The way to prevent this is to avoid using $ as an alias in jQuery.

If you put the following code, other libraries will use $, and when writing jQuery code, jQuery will be used instead of $.

jQuery.noConflict();

If you want to continue using $, do the following: In AAA jQuery uses $ and in BBB other libraries use $.

jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
  // AAA
});
// BBB

There is also a way to make the jQuery alias different.

var jb = jQuery.noConflict();

Doing the above will use jb as the jQuery alias instead of $.

jb( 'p' ).addClass( 'abc' );

 

 

Conflicts with other versions of jQuery

Although uncommon, you may use multiple versions of jQuery. A way to prevent conflicts in these cases is to create separate aliases for each version.

<script src='jquery-1.11.1.js'></script>
<script>
  var jb = jQuery.noConflict();
</script>
<script src='jquery-2.1.1.js'></script>
<script>
  var hs = jQuery.noConflict();
</script>

Use jb as the alias when using 1.11.1 and hs when using 2.1.1.