Resolve the conflict between jQuery and other js script library references

In Jquery, $ is the alias of JQuery. You can use JQuery to replace $. For example, $ ('# msg') is equivalent to JQuery ('# msg '). However, when we introduce multiple js libraries and define the $ symbol in another js library, we will encounter a conflict when using the $ symbol. The following describes how to introduce two library files: jquery. js and prototype. js.

 

First case: jquery. js is introduced after prototype. js

For example:

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

 

Case 2: jquery. js was introduced before prototype. js.

For example:

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

 

 

The following describes how to correctly use the $ symbol defined in different js libraries when the file sequence of the first js library is introduced.

I. Use JQuery. noConflict () 
The function of this method is to let Jquery give up its ownership of $ and return the control of $ to prototype. js, because jquery. js is introduced later, so jquery is the final control of $. The returned value is JQuery. After the method is called in the code, we cannot use $ to call the jquery method. $ represents the $ defined in the prototype. js library. JQuery. noConflict ();

// You cannot write $ ('# msg'). hide () here. $ represents the $ symbol defined in prototype. js.

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

 

Ii. Customize the alias of JQuery
If the JQuery. noConflict () method is used in the first method, you can only use the full name of JQuery. We can also redefine the alias for JQuery. As follows:

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

3. Use the statement block. The $ defined in jquery. js is still used in the statement block, as shown below:

 

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

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

If $ in jquery. js is used when the file sequence of the js library is introduced in the second method, we can still use the statement block method described above, for example:

< script src = " jquery.js " type = " text/javascript " />< script src = " prototype.js " type = " text/javascript " /> < script type = " text/javascript " >($){ $( ' #msg ' ).hide(); </ script >

This method of using statement blocks is very useful. We should use this method when writing jquery plug-ins by ourselves, because we do not know how to introduce various js libraries in sequence during our work, however, the syntax of such statement blocks can avoid conflicts.

 

Ps: the meaning of special characters in jquery:

# Id

. Indicates class
* Select all
, Select multiple
Space descendant
> Sub-
~ Brother
+ Next
: Sub-function)

() Functional filtering and searching

Original article introduced from: