Solve multiple jQuery versions and conflict with other js libraries. jqueryjs

Solve multiple jQuery versions and conflict with other js libraries. jqueryjs

Multiple versions of jQuery or conflicts with other js libraries are commonly used $ symbols. jquery has reserved a solution for us early on. Let's take a look at the solution below.

1. Multiple jQuery versions or conflict solutions on the same page.

<! DOCTYPE html> <Script> (function ($) {// At this time $ is the jQuery-1.6.4 $ ('#') ;}) (jq164 ); </script> <script> jq142 (function ($) {// At this time $ is the jQuery-1.4.2 $ ('#');}); </script> </body> 
 
2. Conflict Between jQuery and other js libraries on the same page
JQuery noConflict () method
The noConflict () method releases the control of $ identifier, so that other scripts can use it.
Jquery. js was introduced before prototype. js, for example:
<script src="jquery.js" type="text/javascript"></script><script src="prototype.js" type="text/javascript"></script><p id="pp">test---prototype</p><p>test---jQuery</p>
2.1 of course, you can still use jQuery by replacing the abbreviated name with the full name:
<Script type = "text/javascript"> jQuery. noConflict (); // you can assign control of variable $ to prototype. js without calling the full name. JQuery (function () {// use jQuery ("p "). click (function () {alert (jQuery (this ). text () ;};}); // You cannot write $ again here. $ represents prototype. $ symbol defined in js. $ ("Pp"). style. display = 'none'; // use prototype </script>
2.2 you can also create your own shorthand. NoConflict () returns a reference to jQuery. You can save it to a variable for later use. See this example:
<Script type = "text/javascript"> var $ j = jQuery. noConflict (); // customize a short shortcut $ j (function () {// use jQuery $ j ("p "). click (function () {alert ($ j (this ). text () ;}) ;}; $ ("pp "). style. display = 'none'; // use prototype </script>
2.3 if your jQuery code block uses the $ Abbreviation and you do not want to change this shortcut, you can pass the $ symbol as a variable to the ready method. In this way, you can use the $ symbol in the function. In addition to the function, you still have to use "jQuery ":
<Script type = "text/javascript"> jQuery. noConflict (); // assign control of variable $ to prototype. jsjQuery (document ). ready (function ($) {$ ("p "). click (function () {// continue to use the $ method alert ($ (this ). text () ;}); jQuery (function ($) {// use jQuery $ ("p "). click (function () {// continue to use the $ method alert ($ (this ). text () ;}); </script>
2.4 use statement blocks:
<Script type = "text/javascript"> jQuery. noConflict (); // assign control of variable $ to prototype. js (function ($) {// defines an anonymous function and sets the parameter to $ (function () {// $ inside the anonymous function is jQuery $ ("p "). click (function () {// continue to use the $ method alert ($ (this ). text () ;};}) ;}( jQuery); // executes an anonymous function and passes the real parameter jQuery $ ("pp "). style. display = 'none'; // use prototype </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.
 
Note:
1. When referencing the javascript class library, put jQuery reference at the end to avoid conflict.
2. When jQuery () is used instead of $ (), jQuery is case sensitive, because javascript itself is case sensitive.