在jQuery库中,几乎所有的插件都被限制在它的命名空间里。通常,全局对象都被很好地存储在jQuery命名空间里,因此当把jQuery和其他JavaScript库一起使用时,不会引起冲突。
1、jQuery库在其他库之后导入
在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。
<!-- 引入prototype --> <script type="text/javascript" src="prototype.js"></script> <!-- 引入jQuery --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权交给prototype jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert(jQuery(this).text()); }); }); $("pp").style.display = 'none';//使用prototype.js隐藏元素 </script>然后,就可以在程序里将jQuery()函数作为 jQuery对象的制造工厂。
此外,还有另一种选择。如果想确保jQuery不会与其他库冲突,但又想自定义一个快捷方式,可以进行如下操作:
var $j = jQuery.noConflict(); //自定义一个快捷方式 $j(function(){ //使用jQuery,利用自定义快捷方式——$j $j("p").click(function(){ alert($j(this).text()); }); }); $("pp").style.display = 'none'; //使用prototype.js隐藏元素可以自定义备用名称jq $J等。
如果不想给jQuery自定义这些备用名称,还想使用$而不管其他库的$()方法,同时又不想与其他库相冲突,那么可以使用以下两种解决方法。
其一:
jQuery.noConflict(); //将变量$的控制权交给prototype jQuery(function($){ //使用jQuery设定页面加载时执行的函数 $("p").click(function(){ //在函数内部继续使用$()方法 alert($(this).text()); }); }); $("pp").style.display = 'none';//使用prototype.js隐藏元素其二:
jQuery.noConflict(); //将变量$的控制权交给prototype (function($){ //定义匿名函数并设置形参为$ $(function(){ //匿名函数内部的$均为jQuery $("p").click(function(){//继续使用$()方法 alert($(this).text()); }); }); })(jQuery);//执行匿名函数且传递实参jQuery $("pp").style.display = 'none';//使用prototype.js隐藏元素2、jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了,那么可以直接使用jQuery来做一些jQuery的工作。同时,可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。
<!-- 先导入jQuery --> <script type="text/javascript" src="jquery.js"></script> <!-- 后导入prototype --> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> jQuery(function(){ //直接使用jQuery,无需调用jQuery.noConflict()函数 jQuery("p").click(function(){ alert(jQuery(this).text()); }); }); $("pp").style.display = 'none';//使用prototype.js隐藏元素 </script>有了这些方法来解决冲突,就可以在项目中放心地引用jQuery了。