首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

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

2012-10-29 
jQuery与其他库冲突的解决方法在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共

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



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

    <html>      <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <!--先导入jQuery -->      <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>      <!--后导入其他库 -->      <script src="prototype-1.6.0.3.js" type="text/javascript"></script>      </head>      <body>      <p id="pp">test---prototype</p>      <p >test---jQuery</p>            <script type="text/javascript">      jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。          jQuery("p").click(function(){                    alert( jQuery(this).text() );          });      });            $("pp").style.display = 'none'; //使用prototype      </script>      </body>      </html>  


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

<script type="text/javascript">  jQuery.noConflict();                //将变量$的控制权让渡给prototype.js  jQuery(function(){                  //使用jQuery      jQuery("p").click(function(){          alert( jQuery(this).text() );      });  });    $("pp").style.display = 'none';     //使用prototype  </script>    //代码二  <script type="text/javascript">  var $j = jQuery.noConflict();       //自定义一个比较短快捷方式  $j(function(){                      //使用jQuery      $j("p").click(function(){          alert( $j(this).text() );      });  });    $("pp").style.display = 'none';     //使用prototype  </script>    //代码三  <script type="text/javascript">  jQuery.noConflict();                //将变量$的控制权让渡给prototype.js  jQuery(function($){                 //使用jQuery      $("p").click(function(){        //继续使用 $ 方法          alert( $(this).text() );      });  });    $("pp").style.display = 'none';     //使用prototype  </script>    //代码四  <script type="text/javascript">  jQuery.noConflict();                //将变量$的控制权让渡给prototype.js  (function($){                   //定义匿名函数并设置形参为$      $(function(){               //匿名函数内部的$均为jQuery          $("p").click(function(){    //继续使用 $ 方法              alert($(this).text());          });      });  })(jQuery);                 //执行匿名函数且传递实参jQuery    $("pp").style.display = 'none';     //使用prototype  </script>  


    通过以上几方法就可以很好的去解决多库共存会发生冲突的问题了.

    参考 w3c: http://www.w3school.com.cn/jquery/core_noconflict.asp

热点排行