本文摘自《锋利的jQuery》
在jQuery库中，几乎所有的插件都被限制在它的命名空间里。通常，全局（global）对象都被很好地存储在jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）一起使用时，不会引起冲突。
注：默认情况下，jQuery用$作为自身的快捷方式。
1、jQuery库在其他库之后导入
在其他库和jQuery库都被加载完成后，可以在任何时候调用jQuery.noConflict（）函数来将变量$的控制权移交给其他JavaScript库。示例如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>
<script src="prototype.js" type="text/javascript"></script>
<script src="jquery-2.1.3.js" type="text/javascript"></script>
<script>
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(function(){ //使用jQuery，利用自定义快捷方式--$j
$j("p").click(function(){
alert($j(this).text());
});
});
$(‘pp‘).style.display=‘none‘;//使用prototype
如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么可以使用以下两种解决方法。
其一：
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery设定页面加载时执行的函数
$(‘p‘).click(function(){//在函数内部继续使用$()方法
alert($(this).text());
});
});
$(‘pp‘).style.display=‘none‘;//使用prototype
其二：
jQuery.noConflict();//将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(‘p‘).click(function(){//匿名函数内部的$均为jQuery
alert($(this).text());//继续使用$()方法
});
})(jQuery); //执行匿名函数且传递实参jQuery
$(‘pp‘).style.display=‘none‘;//使用prototype
这可以通过改变最少的代码来实现全面的兼容性。
2、jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>
<script src="jquery-2.1.3.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
<script>
jQuery(function()
{
jQuery("p").click(function(){
alert(jQuery(this).text());
});
});
$("pp").style.display=‘none‘;
</script>
</body>
</html>
时间： 2024-11-05 18:55:11