解决jQuery和其他库的冲突

1.jQuery库在其他库后导入

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

//省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>
<!--引入prototype-->
<script src="lib/prototype.js" type="text/javascript"></script>
<!--引入jQuery-->
<script src="../jquery.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.js隐藏元素
</script>
</body>
//省略其他代码

然后就可以在程序里将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、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
$("pp").style.display='none'; //使用prototype
//省略其他代码

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

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

如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式，这里无需调用jQuery.noConflict()函数，示例如下：

//省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>
<!--先导入jQuery-->
<script src="../jquery.js" type="text/javascript"></script>
<!--后导入其他库-->
<script src="lib/prototype.js" type="text/javascript"></script>
<script language="javascript">
jQuery(function(){//直接使用jQuery，无需使用“jQuery.noConflict()”函数
jQuery("p").click(function(){
alert(jQuery(this).text());
})
})
$("p").style.display='none';//使用prototype
</script>
//省略其他代码