Quick Solution for conflicts between JQuery $ and other JS

This article mainly introduces the quick solution to the conflict between JQuery $ and other JS files. If you need it, you can refer to it for help.

As we all know, jQuery is currently the most popular JS package, which simplifies many complicated JS programs. JQuery defines the browser DOM tree as $ and obtains each subnode through $. Then, JS plug-ins are not only JQuery, but also prototype. js and other good plug-ins. They also use $. So sometimes when you use these two JS plug-ins at the same time, the right to use $ conflict may occur. Now let's take a look at how to solve this conflict. See the following: we all know that JQuery has a function. jquery. noConflict () is used to transfer the control of $. Then we can use jQuery instead of $ to obtain the dom node example: Method 1: the code is as follows: <script type = "text/javascript"> jQuery. noConflict (); // assign control of variable $ to prototype. jsjQuery (function () {// use jQueryjQuery ("p "). click (function () {alert (jQuery (this ). text () ;}) ;}; $ ("pp "). style. display = 'none'; // use prototype </script> Method 2: We can use the noConflict () function to define a shortcut to get the dom Node Code as follows: <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>. You can also find other methods. Method 3: The Code is as follows: <script type = "text/javascript"> jQuery. noConflict (); // assign control of variable $ to prototype. jsjQuery (function ($) {// use jQuery $ ("p "). click (function () {// continue to use the $ method alert ($ (this ). text () ;}) ;}; $ ("pp "). style. display = 'none'; // use prototype </script> Method 4: the code is as follows: <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>