jQuery与其他库冲突的解决方法
今天使用了mootools库的图片轮换效果。结果出差了。原来这个文件中已经引用了Jquery库。
两库相冲突。导致不能运行。
主要原因是$的重载造成的。$("Divid")为Jquery以为的库使用的参数调用方式。
Jquery则使用$("#id"),这样造成Jquery下的很多不能使用。
我的解决办法://定义匿名函数并设置形参为$ //执行匿名函数且传递实参jQuery
网上的其它解决方法:
一、 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>
通过以上几方法就可以很好的去解决多库共存会发生冲突的问题了.