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
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<!--first import jquery-->
<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 () {//directly using jquery, there is no need to invoke the Jquery.noconflict () function.
JQuery ("P"). Click (function () {
Alert (JQuery (this). text ());
});
});
$ ("pp"). style.display = ' None '; Using 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
<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
<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
<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
<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
$ (' Contentarea '). Show ()
It can be written in the following form:
The code is as follows
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
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
JQuery (function ($) {
Here's the code for using $
});
Thus, the complete code that is implemented according to the first method is as follows:
The code is as follows
A complete solution to the conflicts between jquery libraries and 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 the $ jquery code
});
Here 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
Simplified code
$.noconflict () (function () {
Here is your jquery code with $
});
This is the code for the other libraries.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
