在jQuery库中,几乎所有的插件都被限制在它的命名空间里。
通常,全局对象都被很好地存储到jQuery命名空间里,因此当把jQuery和其他JavaScript库(例如Prototype、MooTools或YUI)在一起使用时,不会引起冲突
那么如果有冲突该如何解决?
下边以jQuery和Prototype库为例。(本例中需要文件prototype.js)
1.jQuery库在其他库之后导入
在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。
例如:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>冲突解决1</title>
<!-- 引入 prototype -->
<script src="prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype.js隐藏元素
</script>
</body>
</html>
上例子中,如果没有<script></script>代码块,也不会引入任何库文件。即原始代码为
<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>
</body>
而如果利用
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
此时 <p id="pp">标签的内容通过调用Prototype库,使用文件 prototype.js 将被隐藏。利用jQuery变量进行jQuery库的功能延续。
页面输出结果为,只显示<p >Test-jQuery(将被绑定单击事件)</p>内容,当点击这行文字时候弹出框
实现上述Prototype库和jQuery库不冲突的原因就是代码行的功劳
jQuery.noConflict();
$("pp").style.display = 'none';
并且会因为
jQuery(function(){
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
代码块中的代码,点击 “Test-prototype(将被隐藏)” 这一行文字同样也实现弹框功能
如果想确保jQuery不会与其他库冲突,但又想自定义一个快捷方式,可以用如下代码实现
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype.js隐藏元素
</script>
可以看出区别就是利用var $j = jQuery.noConflict(); ,自定义了另一个备用名称。
上例子中是将“$j”当作jQuery库的另一个快捷方式,此时Prototype库再使用“$”时两者就不会再起冲突
也可以自定义名称 jq、aaa等快捷方式。为了方便以 “$”开头的话更便于区分字母和快捷方式“$”.
此外,如果不想给jQuery自定义这些备用名称,还想使用“$”而不管其他库的$()方法,同时又不想与其他库冲突,那么可以使用以下两种方法解决:
方法一:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery 设定页面加载时执行的函数
$("p").click(function(){ //在函数内部继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
上述方法在jQuery(function($){ //.... });内部中可以使用$
方法二:
<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>
上述方法利用匿名函数传参方式重新定义并继续使用$
最后,如果 jQuery库 在其他库之前就导入了,那么可以直接使用“jQuery”来做一些jQuery的工作,同时可以使用 $作为其他库的快捷方式。
这里无需再调用 jQuery.noConflict()函数。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 先引入 jQuery -->
<script src="jquery.js" type="text/javascript"></script>
<!-- 后引入 prototype -->
<script src="prototype.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>