Five solutions to resolve naming conflicts in Jquery

Five solutions to resolve naming conflicts in Jquery_jquery

WBOY

Release： 2016-05-16 17:55:05

Original

1243 people have browsed it

Because many JavaScript libraries use $ as function or variable names, jquery does the same. In fact, $ is just an alias for jquery. If we need to use another js library other than jquery, we can return control to the library by calling $.noConflict(). Below is a collection of five solutions to this problem, one of which you will find useful.
Example 1:

Copy code The code is as follows:

Conflict resolution 1

test---prototype

test--- jQuery

Example 2:

Copy code The code is as follows:

Conflict Resolution 2

< !--Introducing jQuery -->

test---prototype

test-- -jQuery

Example 3:

Copy code The code is as follows:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Conflict Resolution 3< /title> <br> <br><script src="prototype-1.6.0.3.js" type="text/javascript"></script> <br> <br><script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"> </script> <br><script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <br><body> <br><p id="pp">test---prototype</p> <br><p > test---jQuery</p> <br><script type="text/javascript"> <br>jQuery.noConflict(); //Transfer control of variable $ to prototype.js <br> jQuery(function($){ //Use jQuery <br>$("p").click(function(){ //Continue to use the $ method <br>alert( $(this).text() ); <br>}); <br>}); <br>$("pp").style.display = 'none'; //Use prototype <br></script> <br></body> <br></html> <br> </div> <br>Example 4: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="53989" class="copybut" id="copybut53989" onclick="doCopy('code53989')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code53989"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br> <title>Conflict resolution 4

test---prototype

test---jQuery

Example 5:

Copy code The code is as follows:

Conflict resolution 5

test--- prototype

test---jQuery

The above examples are packaged and downloaded