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

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

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

相关推荐