First of all, we should know that in jquery, $ (dollar sign) is the alias of jquery, which means that using $ is the same as using jquery, and that in many cases we namespace, it is because of this $ that conflicts arise. For example, the $ (' #xmlas ') and jquery (' #xmlas '), though different in writing, are actually identical in practice.
The easiest way to resolve this conflict is to use a different name, or to have the execution code think of a different namespace.
First, the jquery library is imported before other libraries, directly using the jquery (callback) method such as:
The code is as follows |
Copy Code |
<meta http-equiv= "Content-type" content= "text/html; charset=utf-8"/> <!-- Import jquery First, <script src=. /.. /scripts/jquery-1.3.1.js "type=" Text/javascript ></script> Import other libraries after <!--; <script src= " Prototype-1.6.0.3.js "type=" Text/javascript "></SCRIPT> <body> <p id=" pp ">test---prototype</p> <p >test---jquery</p> <script type=" Text/javascript "> jquery (function () {//Direct use of jquery, there is no need to invoke the Jquery.noconflict () function. jquery ("P"). Click (function () { alert (jquery (this). text ()); }); }); $ ("pp"). style.display = ' none ';//use prototype </script> </body> |
Second, the jquery library after other libraries import, using the Jquery.noconflict () method to transfer the control of the variable $ to other libraries, there are several ways:
The code is as follows |
Copy Code |
<script type= "Text/javascript" > Jquery.noconflict (); Transfer the control of the variable $ to prototype.js jquery (function () {//using jquery JQuery ("P"). Click (function () { Alert (JQuery (this). text ()); }); }); $ ("pp"). style.display = ' None '; Using prototype </script> |
Code two
The code is as follows |
Copy Code |
<script type= "Text/javascript" > var $j = jquery.noconflict (); Customize a shorter shortcut $j (function () {//using jquery $j ("P"). Click (function () { Alert ($j (this). text ()); }); }); $ ("pp"). style.display = ' None '; Using prototype </script> |
Code Three
The code is as follows |
Copy Code |
<script type= "Text/javascript" > Jquery.noconflict (); Transfer the control of the variable $ to prototype.js jquery (function ($) {//using jquery $ ("P"). Click (function () {//continue to use the $ method Alert ($ (this). text ()); }); }); $ ("pp"). style.display = ' None '; Using prototype </script> |
Generation//Code four
The code is as follows |
Copy Code |
<script type= "Text/javascript" > Jquery.noconflict (); Transfer the control of the variable $ to prototype.js (function ($) {///define anonymous function and set parameter to $ $ (function () {//The inside of the anonymous function is all jquery $ ("P"). Click (function () {//continue to use the $ method Alert ($ (this). text ()); }); }); }) (JQuery); Execute an anonymous function and pass the argument jquery $ ("pp"). style.display = ' None '; Using prototype /*********************************************************************/ JQuery (document). Ready (function () {//The right to get out when a page is loaded Jquery.noconflict (); }); </script> |
In addition to the above methods, we can use the second method to solve the problem of conflict, that is the most stupid but most effective solution: Use a custom namespace to avoid conflicts.
For example, the project name required is Xmlas, then our original code:
The code is as follows |
Copy Code |
$ (' Contentarea '). Show () |
It can be written in the following form:
The code is as follows |
Copy Code |
Xmlas (' Contentarea '). Show () |
3. In the jquery code, we can use the $ symbol when encountering a conflict, which requires us to add the following code to the Ready event:
The code is as follows |
Copy Code |
JQuery (document). Ready (function ($) { You can safely use $ in here. }); |
Of course, you can also write Jane in the following form:
The code is as follows |
Copy Code |
JQuery (function ($) { Here's the code for using $ }); |
Thus, the complete code that is implemented according to the first method is as follows:
code is as follows |
copy code |
//jquery the complete solution to conflicts with other libraries <script type= "Text/javascript" src= "photolist.js" ></script> <script type= "Text/javascript" src= "jquery.js" ></script> < Script type= "Text/javascript" > $.noconflict (); jquery (function ($) { //using $ jquery code }); //This is your other JS library code </script> |
Of course, you can also simplify the complete code, simplifying the code as follows:
The code is as follows |
Copy Code |
Simplified code $.noconflict () (function () { Here is your jquery code with $ }); This is the code for the other libraries. |