Home > Developer > Web Develop
jquery multiple versions or conflicts with other JS libraries are mostly commonly used in the $ sign problem, this problem jquery early on to give us a reservation processing method, the following to see the solution.
1. Multiple versions of jquery on the same page or conflict resolution methods.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8" /> <title>jquery test Page</title></Head><Body><!--introduction of the 1.6.4 version of JQ -<Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></Script><Script> varjq164=Jquery.noconflict (true); </Script><!--introduction of the 1.4.2 version of JQ -<Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></Script><Script> varjq142=Jquery.noconflict (true); </Script>
<Script>(function($){ //at this time the $ is jQuery-1.6.4 $('#');}) (jq164);</Script> <Script>jq142 (function($){ //at this time the $ is jQuery-1.4.2 $('#');});</Script> </Body></HTML>
2. Same page jquery and other JS Library conflict resolution methods
JQuery noconflict () method
The Noconflict () method frees the control of the $ identifier so that other scripts can use it.
Jquery.js is introduced before prototype.js, such as:
<Scriptsrc= "Jquery.js"type= "Text/javascript"></Script><Scriptsrc= "Prototype.js"type= "Text/javascript"></Script><PID= "pp">Test---Prototype</P><P>Test---JQuery</P>
2.1 Of course, you can still use JQuery by using the full name instead of shorthand:
<Scripttype= "Text/javascript">jquery.noconflict (); //The control of the variable $ is passed to Prototype.js, and the full name can not be called. JQuery (function(){ //using jqueryJQuery ("P"). Click (function() {alert (JQuery ( This). text ()); });});//This can no longer be written as $, at which time the $ represents the $ symbol defined in Prototype.js. $("pp"). Style.display= 'None'; //using prototype</Script>
2.2 You can also create your own shorthand. Noconflict () can return a reference to JQuery, which you can put into a variable for later use. Take a look at this example:
<Scripttype= "Text/javascript">var$j=jquery.noconflict (); //Customizing a short shortcut$j (function(){ //using jquery$j ("P"). Click (function() {alert ($j ( This). text ()); });}); $("pp"). Style.display= 'None'; //using prototype</Script>
2.3 If your JQuery code block uses $ shorthand and you do not want to change the shortcut, you can pass the $ symbol as a variable to the Ready method. This makes it possible to use the $ symbol within a function-and, outside of the function, you still have to use "jQuery":
<Scripttype= "Text/javascript">jquery.noconflict (); //Assign control of variable $ to prototype.jsjQuery (document). Ready (function($){ $("P"). Click (function(){ //continue using the $ methodAlert ($ ( This). text ()); });}); JQuery (function($){ //using jquery $("P"). Click (function(){ //continue using the $ methodAlert ($ ( This). text ()); });});</Script>
2.4 Using statement blocks:
<Scripttype= "Text/javascript">jquery.noconflict (); //Assign control of variable $ to prototype.js(function($){ //define an anonymous function and set the formal parameter to $ $(function(){ //inside the anonymous function, $ all is jquery $("P"). Click (function(){ //continue using the $ methodAlert ($ ( This). text ()); }); });}) (JQuery); //Execute anonymous function and pass argument jquery$("pp"). Style.display= 'None'; //using prototype</Script>
This method of using the block of statements is very useful, we should use this when we write the jquery plugin, because we do not know how the specific work process in the sequence of the introduction of the various JS libraries, and this block of syntax can be used to mask the conflict.
Attention:
1. When referencing a JavaScript class library, it is possible to avoid conflicts by putting jquery references on the last side.
2. In particular, when jquery () replaces $ (), jquery is case-sensitive because JavaScript itself is case-sensitive.
Resolves multiple versions of jquery and conflicts with other JS 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
