夏日博客

A-A+

解决jQuery库使用$ 与 其他JS库试用$ 重复冲突问题

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

$符号是很多插件中会使用到的一个快速获取对象的一个方法了，有时我们一个页面会使用到几个库，那么就会碰到与jquery $符号冲突了，下面我们就冲突问题来看看解决办法。

有时候需要同时使用jQuery和其它javascript，但是可能由于jquery和其他js都使用了$作为简写，会造成js重复冲突的情况，导致js报错，页面的js无法正常运行，要让jQuery和其它javascript库共存，有以下三种方法（均来自于官方网站）：

1.覆盖$ 函数,使用jQuery代替$,代码如下:

  1. <script src="otherjs.js"></script>  
  2. <script src="jquery.js"></script>  
  3. <script type="text/javascript">  
  4. <!--  
  5.     //这一句不能少  
  6.      jQuery.noConflict();  
  7.     
  8.      // 使用jq的--将原来$改成jQuery  
  9.      jQuery(document).ready(function(){    
  10.        jQuery("div").hide();  
  11.      });  
  12.     
  13.      // 使用用了$(...)的otherjs，这个不变  
  14.      $('otherid').hide();  
  15.     
  16. // -->  
  17. </script>  

【这样会使$恢复到原始库，在下面的代码中使用”jQuery”，而不是”$”】

2、让jquery使用其他简称来代替 $,比如说$zhoumanhe代替原来的$,代码如下:

  1. <script src="otherjs.js"></script>  
  2. <script src="jquery.js"></script>  
  3. <script type="text/javascript">  
  4. <!--  
  5.     //这一句不能少，将$重新定义成 $zhoumanhe  
  6.      var $zhoumanhe = jQuery.noConflict();  
  7.     
  8.      // 使用jq的--将原来$改成jQuery  
  9.      $zhoumanhe(document).ready(function(){  
  10.        $zhoumanhe("div").hide();  
  11.      });  
  12.     
  13.      // 使用用了$(...)的otherjs，这个不变  
  14.      $('otherid').hide();  
  15.     
  16. // --></script>  

【这样的话相当于$zhoumanhe代替$，当然可以使用其它字符。】

3、在页面jq的$用得太多,不希望改动太大,希望保留$,用一下办法,代码如下:

  1. <script src="otherjs.js"></script>  
  2. <script src="jquery.js"></script>  
  3. <script>  
  4.     //这一句不能少  
  5.      jQuery.noConflict();  
  6.     
  7.      // Put all your code in your document ready area  
  8.     // 使用jq的--将jq的代码放到 jQuery(document).ready(）里面，里面的jq代码还是使用$  
  9.      jQuery(document).ready(function($){  
  10.        // 里面还是可以使用$  
  11.        $("div").hide();  
  12.      });  
  13.     
  14.      // 使用用了$(...)的otherjs，这个不变  
  15.      $('otherid').hide();  
  16. </script>  
标签：

给我留言