解决jQuery和其它库的冲突

通常,全局(global)对象都被很好地存储在jQuery命名空间里,因此当把jQuery和其它JavaScript库(例如Prototype、MooTools或YUI)一起使用时,不会引起冲突。

默认清空下,jQuery用$作为自身的快捷方式。

1、jQuery库在其它库之后导入

在其它库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConfilct()函数来将变量$的控制权移交给其它JavaScript库。示例如下:

<html>
<head></head>
<body>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>
<!-- 引入prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript">
jQuery.noConflict();//将变量$的控制权移交给prototype.js
jQuery(function(){//使用jQuery
  jQuery("p").click(function(){
    alert(jQuery(this).text());    
  })
})
$("pp").style.display="none";//使用prototype
</script>
</body>
</html>

然后,就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。

此外,还有另一种选择。如果想确保jQuery不会与其它库冲突,但又想自定义一个快捷方式,可以进行如下操作

//...省略其它代码
var &j = jQuery.noConflict();//自定义一个快捷方式
$j(funciton(){//使用jQuery,利用自定义快捷方式——$j
  $j("p").click(function(){
    alert($j(this).text());
  })
})
$("pp").style.display="none";//使用prototype
//...省略其它代码

可以自定义备用名称,例如jq、$j、awesomequery等。

如果不想给jQuery自定义这些备用名称,还想使用$而不管其它库的$()方法,同时又不想与其它库相冲突,那么可以使用以下两种解决方法

其一:

//...省略其它代码
jQuery.noConflict();//将变量$的控制权让渡给prototype.js
jQuery(function($){//使用jQuery设定页面加载时执行的函数
  $("p").click(function(){//在函数内部继续使用$()方法
    alert($(this).text());
  })
})
$("pp").style.display="none";//使用prototype
//...省略其它代码

其二:
//...省略其它代码
jQuery.noConflict();//将变量$的控制权让渡给prototype.js
(function($){//定义匿名函数并设置形参为$
  $(function(){//匿名函数内部的$均为jQuery
    $("p").click(function(){//继续使用$()方法
      alert($(this).text());
    });
  });
})(jQuery);//执行匿名函数且传递实参jQuery
$("p").style.display="none";//使用prototype
//...省略其它代码

这应该是最理想的方式,因为可以通过改变最少的代码来实现全面的兼容性。

2、jQuery库在其他库之前导入

如果jQuery库在其它库之前就导入了,那么可以直接使用"jQuery"来做一些jQuery的工作。同时,可以使用$()方法作为其它库的快捷方式。这里无需调用jQuery.noConflict()函数。示例如下:
<html>
<head></head>
<body>
<p id="pp">test--prototype</p>
<p>test---jQuery</p>
<!--先导入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>
<script language="javascript">
jQuery(function(){//直接使用jQuery,无需调用"jQuery.onConflict()"函数
  jQuery("p").click(function(){
    alert(jQuery(this).text());
  })
})
$("pp").style.display="none";//使用prototype
</script>
</body>
</html>
有了这些方法来解决冲突,就可以在项目中放心地引用jQuery了。