如何避免jquery库和其它库的冲突

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 20.7999992370605px; background-color: rgb(255, 255, 255);">1.产生原因：</span>

默认情况下：jQuery使用 $ 作为jquery的快捷方式，如果别的js库也使用$的话，就可能产生冲突。为避免这种冲突，需要在把jquery引入页面后，使用jquery前把jquery设置为非冲突模式。

2.解决方法：

JQuery库在其他库之后导入——

  方法1：使用jquery的命名空间，当然就不会冲突了。

<!-- Loading jQuery before other libraries --><script src="jquery.js"></script><script src="prototype.js"></script><script> <span style="white-space:pre"></span>JQuery.noConflict();    // Use full jQuery function name to reference jQuery    jQuery(document).ready(function(){     jQuery("div").hide();   });     // Use the $ variable as defined in prototype.js    window.onload = function() {   var mainDiv = $('main');  }; </script>

方法2：声明一个新的变量，来代替$。

<!-- Putting jQuery into no-conflict mode --><script src="prototype.js"></script><script src="jquery.js"></script><script>    // $j is now an alias to the jQuery function;    // creating the new alias is optional    var $j = jQuery.noConflict();    $j(document).ready(function(){       $j("div").hide();     });     // The $ variable now has the prototype meaning,    // which is a shortcut for document.getElementById.    // mainDiv below is a DOM element, not a jQuery object    window.onload = function(){       var mainDiv = $('main');    }</script>

如果不想给JQquery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库冲突，那么可以使用一下两种解决方法。

方法3：给ready（）方法增加一个参数。比较常用此方法。

<!-- Another way to put jQuery into no-conflict mode --><script src="prototype.js"></script><script src="jquery.js"></script><script>     jQuery.noConflict();    jQuery(document).ready(function($){       // You can use the locally-scoped $ in here as an alias to jQuery       $("div").hide();     });     // The $ variable in the global scope has the prototype.js meaning    window.onload = function(){       var mainDiv = $('main');    } </script>

方法4：

JQuery.noConflict();(function($){  (function($){     $("p").click(function(){        alert("$(this).text());     })  })})(JQuery);$("pp").style.display='none';

JQuery库在其他库之前导入——

<script src="../JQuery/jquery.js" type="text/javascript"></script><script src="../lib/prototype.js" type="text/javascript"></script>

有了这些方法解决冲突，就可以在项目中放心的引用JQuery了。