jQuery与其他库冲突的解决方法


在使用jQuery开发的时候，可能还会使用到其他的JS库，比如Prototype，但多库共存时可能会发生冲突；若是发生冲突后，可以通过以下几种方案进行解决：

一、 jQuery库在其他库之前导入，直接使用jQuery(callback)方法如：

Html代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <!--先导入jQuery -->  
  5. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>  
  6. <!--后导入其他库 -->  
  7. <script src="prototype-1.6.0.3.js" type="text/javascript"></script>  
  8. </head>  
  9. <body>  
  10. <p id="pp">test---prototype</p>  
  11. <p >test---jQuery</p>  
  12.   
  13. <script type="text/javascript">  
  14. jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。   
  15.     jQuery("p").click(function(){         
  16.         alert( jQuery(this).text() );   
  17.     });   
  18. });   
  19.   
  20. $("pp").style.display = 'none'; //使用prototype   
  21. </script>  
  22. </body>  
  23. </html>  

二、 jQuery库在其他库之后导入，使用jQuery.noConflict()方法将变量$的控制权让渡给其他库，有以下几种方式:

Js代码
  1. <script type="text/javascript">   
  2. jQuery.noConflict();                //将变量$的控制权让渡给prototype.js   
  3. jQuery(function(){                  //使用jQuery   
  4.     jQuery("p").click(function(){   
  5.         alert( jQuery(this).text() );   
  6.     });   
  7. });   
  8.   
  9. $("pp").style.display = 'none';     //使用prototype   
  10. </script>   
  11.   
  12. //代码二   
  13. <script type="text/javascript">   
  14. var $j = jQuery.noConflict();       //自定义一个比较短快捷方式   
  15. $j(function(){                      //使用jQuery   
  16.     $j("p").click(function(){   
  17.         alert( $j(this).text() );   
  18.     });   
  19. });   
  20.   
  21. $("pp").style.display = 'none';     //使用prototype   
  22. </script>   
  23.   
  24. //代码三   
  25. <script type="text/javascript">   
  26. jQuery.noConflict();                //将变量$的控制权让渡给prototype.js   
  27. jQuery(function($){                 //使用jQuery   
  28.     $("p").click(function(){        //继续使用 $ 方法   
  29.         alert( $(this).text() );   
  30.     });   
  31. });   
  32.   
  33. $("pp").style.display = 'none';     //使用prototype   
  34. </script>   
  35.   
  36. //代码四   
  37. <script type="text/javascript">   
  38. jQuery.noConflict();                //将变量$的控制权让渡给prototype.js   
  39. (function($){                   //定义匿名函数并设置形参为$   
  40.     $(function(){               //匿名函数内部的$均为jQuery   
  41.         $("p").click(function(){    //继续使用 $ 方法   
  42.             alert($(this).text());   
  43.         });   
  44.     });   
  45. })(jQuery);                 //执行匿名函数且传递实参jQuery   
  46.   
  47. $("pp").style.display = 'none';     //使用prototype   
  48. </script>   
  49.   
  50.     通过以上几方法就可以很好的去解决多库共存会发生冲突的问题了.

相关内容