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

在使用jQuery开发的时候,可能还会使用到其他的JS库或插件,比如Prototype,但多库共存时可能会发生冲突导致发生各种意外。下面就和大家分享几种jquery库与其他库发生冲突时的解决方法。

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

  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4. <title>jquery库与prototype库冲突的解决方法</title> 
  5. <!--先导入jQuery --> 
  6. <script type="text/javascript" src="http://www.daimajiayuan.com/templets/skins/js/jquery-1.8.1.min.js"></script> 
  7. <!--后导入其他库 --> 
  8. <script type="text/javascript" src="http://www.daimajiayuan.com/templets/skins/js/prototype-1.6.0.3.js"></script> 
  9. </head> 
  10. <body> 
  11. <p>这是一篇关于如何解决jquery库与prototype库冲突的方法分享</p> 
  12. <script type="text/javascript"> 
  13. jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。 
  14.     jQuery("p").click(function(){  
  15.            alert( jQuery(this).text() ); 
  16.     }); 
  17. }); 
  18. $("p").style.display='none'; //使用prototype 
  19. </script> 
  20. </body> 
  21. </html> 

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

(1)方法一

  1. <script type="text/javascript"> 
  2. var $j=jQuery.noConflict(); //自定义一个比较短快捷方式 
  3.     $j(function(){ //使用jQuery 
  4.     $j("p").click(function(){ 
  5.         alert( $j(this).text() ); 
  6.     }); 
  7. }); 
  8. $("p").style.display='none'; //使用prototype 
  9. </script> 

(2)方法二

  1. <script type="text/javascript"> 
  2. jQuery.noConflict(); //将变量$的控制权让渡给prototype.js 
  3.     jQuery(function($){ //使用jQuery 
  4.     $("p").click(function(){ //继续使用 $ 方法 
  5.         alert( $(this).text() ); 
  6.     }); 
  7. }); 
  8. $("p").style.display = 'none'; //使用prototype 
  9. </script> 

(3)方法三

  1. <script type="text/javascript"> 
  2. jQuery.noConflict(); //将变量$的控制权让渡给prototype.js 
  3. (function($){ //定义匿名函数并设置形参为$ 
  4.     $(function(){ //匿名函数内部的$均为jQuery 
  5.         $("p").click(function(){ //继续使用 $ 方法 
  6.             alert($(this).text()); 
  7.         }); 
  8.     }); 
  9. })(jQuery); //执行匿名函数且传递实参jQuery 
  10. $("p").style.display = 'none'; //使用prototype 
  11. /*********************************************************************/ 
  12. jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去  
  13.     jQuery.noConflict();  
  14. }); 
  15. </script> 

转载请注明:代码家园 » jquery库与其他库冲突的解决方法

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)