How to use $ in jQuery to avoid conflicts with other libraries_jquery

In Jquery, $ is an alias of JQuery. All places where $ is used can also be replaced by JQuery. For example, $('#msg') is equivalent to JQuery('#msg'). However, when we introduce multiple js libraries and the $ symbol is also defined in another js library, then there will be a conflict when we use the $ symbol. The following is an example of introducing two library files jquery.js and prototype.js.
The first case: jquery.js is introduced after prototype.js, such as:

adf3c3edb2b5b3fb3dba6da0f754db51 c07feab95c3a7303446b1b85f12feab6
In this case, we write the following in our js code:

$('#msg').hide(); 

$ always represents the $ symbol defined in jquery, which can also be written as JQuery('#msg').hide(); if you want to use the $ defined in prototype.js, we will introduce it later.

The second case: jquery.js is introduced before prototype.js, such as:

<script src="jquery.js" type="text/javascript"/>
 <script src="prototype.js" type="text/javascript"/> 

In this case, we write the following in our js code:

$('#msg').hide(); 

$ represents the $ symbol defined in prototype.js at this time. If we want to call the factory selection function in jquery.js, we can only use the full name JQuery('#msg').hide().

The following will first introduce how to correctly use the $ symbol defined in different js libraries in the first case of introducing js library files.

1. Use JQuery.noConflict()
The function of this method is to let Jquery give up the ownership of $ and return the control of $ to prototype.js. Because jquery.js was introduced later, it is jquery that finally has control of $. Its return value is JQuery. After calling this method in the code, we cannot use $ to call the jquery method. At this time, $ represents the $ defined in the prototype.js library. As follows:

JQuery.noConflict();//You can no longer write $('#msg').hide() here. The $ at this time represents the $ symbol defined in prototype.js. JQuey('#msg').hide();
From then on, $ represents the $ defined in prototype.js. The $ in jquery.js can no longer be used. You can only use the full name of $ in jquery.js, JQuery.
After setting jQuery to no-conflict mode, you can set an alias for $:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

If you still want to continue using jQuery's $, you need to include the code in a self-executing function. This is also a common practice among some jQuery plug-in authors, because these authors do not know whether other libraries are referenced in the project:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
  // 这里依然可以继续使用 jQuery 的 $
})(jQuery);
</script>

2. Customize JQuery alias
If you find it troublesome to only use the full name of JQuery after using the JQuery.noConflict() method in the first method, we can also redefine the alias for JQuery. As follows:

var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery 

From now on, $ represents the $ defined in prototype.js. The $ in jquey.js can no longer be used. You can only use $j as an alias for JQuery in jquey.js.

3. Use statement blocks, still use the $ defined in jquery.js in the statement block, as follows:

JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide();
//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. }); 

Or use the following statement block:

(function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) 

If in the second case of introducing js library file order, how to use $ in jquery.js, we can still use the statement block method introduced above, such as:

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 

(function($){ 
..... 
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
})(JQuery) 
</script>

Code

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> (function($){ ..... $('#msg').hide();
//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) </script>

This method of using statement blocks is very useful. When we write jquery plug-ins ourselves, we should use this method of writing, because we don’t know how to sequentially introduce various js libraries during the specific work process, and this kind of statement The block writing method can shield conflicts.