Solve the dollar sign naming conflict problem in jquery_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: script src = " prototype.js " type = " text/javascript " />
script src = " jquery.js " type = " text/javascript " />
In this case, we write the following in our own 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.

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 own 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 file order.

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. So the last one that has control of $ is jquery. 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 now on, $ represents the $ defined in prototype.js. The $ in jquery.js can no longer be used. You can only use the $ in jquery.js. The full name is JQuery.

2. Customize the alias of JQuery
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(); // Here $j represents JQuery
From now on $ represents prototype $ defined in .js and $ 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(); // At this time, the $ used in the entire ready event method is the $ defined in jquery.js. }); Or use the following statement block:
(function($){ $( ' #msg ' ).hide(); // At this time, the $ defined in jquery.js is used in this statement block. })(JQuery)
If in the In the second case of introducing the order of js library files, 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(); // At this time, the $ defined in jquery.js is used in this statement block. })(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.

ps: The meaning of special characters in jquery:
# Instruction id 🎜>~ Brother
Next
: Sub (multi-function)
() Functional filtering and search