jquery plug-in conflict (jquery.noconflict) solution sharing

  This article mainly resolves how to get multiple different jquery versions to coexist on the same page without conflict, and the friends you need can refer to the following

Many of the JS framework class libraries choose to use the $ symbol as a function or variable name, jquery is one of the most typical. In JQuery, the $ symbol is just a reference to the Window.jquery object, so even if $ is deleted, Window.jquery remains a strong backing for the integrity of the entire class library. The JQuery API design takes into account the reference conflict between multiple frameworks, and we can use the Jquery.noconflict method to easily implement the handover of control. The   Jquery.noconflict method contains an optional Boolean parameter [1] that determines whether to hand over the JQuery object itself at the same time as the transfer $ reference:   code is as follows: Jquery.noconflict ([RemoveAll]) & nbsp   By default, execution Noconflict transfers control of the variable $ to the first library to produce $, and when RemoveAll is set to true, execution noconflict transfers control of the $ and JQuery objects themselves to the first generation Their library.   For example, when Kissy and JQuery are mixed, and the use of $ = Kissy to simplify API operations, the problem of naming conflicts can be solved by this method.   So how is this mechanism implemented? Read the JQuery source at the beginning [2], the first thing to do is this:     code as follows://Map over jQuery (case of overwrite _jquery = Window.jquery,   Map over the $ into case of overwrite _$ = window.$,     It is easy to understand that jquery maps jquery and $ two objects in window environment through two private variables To prevent the variable from being forcibly overwritten. Once the Noconflict method is invoked, the transfer of control is determined by the difference between _jquery, _$, JQuery, and $ Four, with specific code as follows:   Noconflict:function (deep) {  & nbsp             if (window.$ = = JqueRY) {                        window.$ = _$     &N Bsp                             if (Deep && W Indow.jquery = = jQuery) {                        Window.jqu ery = _jquery;                                   R Eturn JQuery;        } to look at the above parameter setting problem, if Deep is not set, _$ overwrite window.$, at this time jquery alias $ invalid, but jquery itself intact. If there is another class library or code redefining the $ variable, its control is completely handover. Conversely, if deep is set to True, _jquery overrides Window.jquery, at which point $ and jQuery are invalidated.   The benefit of this operation is that, whether it is a framework mix or a highly conflicting execution environment with multiple versions of JQuery, the conflict can be resolved by variable mapping because of the handover mechanism provided by the Noconflict method and the return of the jquery object that is not overwritten.   But unavoidable fact is the possibility of the failure of plug-ins and other issues, of course, by simply modifying the context parameters can restore the $ alias:     Code as follows: var query = Jquery.noconflict (true); (function ($) {//plug-in or other form of code, or you can set the parameter to JQuery }) (query);     The following example is a solution to this problem   jquery since its inception, more and more versions, and the new version of the jquery website is constantly updated and released, but we have in the previous project has used the old version of jquery, For example, has appeared: 1.3.X, 1.4.X, 1.5.X, 1.6.2 and so on.   Because of the needs of the project, it is necessary to constantly use the newer version of jquery, but for the old jquery version that has already existed and already adopted, how can we have several different jquery versions coexist on the same page without conflict?   In fact, using the jquery.noconflict () feature, we can not only allow jquery to coexist with other JS libraries, such as prototype. You can also coexist with different versions of jquery itself without conflict.   Code as follows: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > <html>     <head>     &NB Sp   <title> load multiple different jquery versions on the same page </title>         <!--load jquery latest version from Google server-->         <script type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1/ Jquery.js "></script>         <script type=" Text/javascript ">       & nbsp     var jquery_new = $.noconflict (true);         </script>         <!--loading jQuery1.6.2 version--&GT         <script type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2 /jquery.min.js "></script>         <script type=" Text/javascript ">             var jquery_1_6_2 = $.noconflict (true);         </script>         <!--load jQuery1.5.2 version-->     &NBSP ;   <script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" ></script>         <script type= "Text/javascript" >           & nbsp var jquery_1_5_2 = $.noconflict (true);         </script>         <!--load jQuery1.4.2 version-->     &NBSP ;   <script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>         <script type="Text/javascript" >             var jquery_1_4_2 = $.noconflict (true);         </script>         <!--load jQuery1.3.2 version-->     &NBSP ;   <script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>         <script type= "Text/javascript" >           & nbsp var jquery_1_3_2 = $.noconflict (true);         </script>         <script type= "Text/javascript" >   &nbsp ;         alert (jQuery_New.fn.jquery);             alert (jQuery_1_6_2.fn.jquery);             alert (jQuery_1_5_2.fn.jquery);             alert (jQuery_1_4_2.fn.jquery);             alert (jQuery_1_3_2.fn.jquery);       &NBsp       Jquery_new (function ($) {$ (' <p> I am the newest ' +$.fn.jquery+ ' version added in.) </p> '). Appendto (' body ');             Jquery_1_6_2 (function ($) {$ (' <p> I am ' +$.fn.jquery+ ' version added in.) </p> '). Appendto (' body ');             Jquery_1_5_2 (function ($) {$ (' <p> I am ' +$.fn.jquery+ ' version added in.) </p> '). Appendto (' body ');             Jquery_1_4_2 (function ($) {$ (' <p> I am ' +$.fn.jquery+ ' version added in.) </p> '). Appendto (' body ');             Jquery_1_3_2 (function ($) {$ (' <p> I am ' +$.fn.jquery+ ' version added in.) </p> '). Appendto (' body ');         </script>     </head>     <body>       &N Bsp Load multiple different jquery versions on the same page         <br>     </body> </html>