在jqury库中,几乎所有的插件都被限制在它的命名空间里。通常,全局对像都被很好地存储在jQuery命名空间里,因此当把jQuery和其他JavaScript库(例如Prototype、Mootools或YUI)一起使用时,不会引起冲突。
注意:默认情况下,jQuery用$作为自身的快捷方式。
1、jQuery库在其他库之后导入
在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$控制权移交给其他JavaScript库。示例如下:
(1)方法一:
//...省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>
<p>备注:prototype.js是对原生对象的功能增强,多是扩充原生对象。
jquery.js是对原生语句的封装,多是构建自己的对象。<p>
<!--引入prototype-->
<script src="lib/prototype.js"></script>
<!--引入jQuery-->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
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对象的制造工厂。
(2)方法二:
可以自定义备注名称,如jq、$j、awesmequery等。
如果想确保jQuery不会与其他库冲突,但又想自定义一个快捷方式,可以进行如下操作。
//...省略其他代码
var $j=jQuery.noConflict(); //自定义一个快捷方式
$j(function(){ //使用jQuery,利用自定义快捷方式——$j
$j('p').click(function(){
alert($j(this).text());
});
});
$('pp').style.display='none';//使用prototype.js隐藏元素
//...省略其他代码
(3)如果不想给jQuery自定义这些备用名称,还想使用
而不管其他库的
()方法,同时又不想与其他库相冲突,那么可以使用以下2种解决方法。
①方法三:
//...省略其他代码
jQuery.noConflict();//将变量$的控制权移交给prototype.js
jQuery(function($){//使用jQuery设定页面加载时执行的函数
$('p').click(function(){//在函数内部继续使用$()方法
alert($(this).text());
});
});
$('pp').style.display='none';//使用prototype.js隐藏元素
//...省略其他代码
②方法四:
aSuncat备注:个人比较倾向于此方法
//...省略其他代码
jQuery.noConflict(); //将变量$的控制权移交给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$('p').click(function(){ //继续使用$()方法
alert($(this).text());
});
});
})(jQuery);
$('pp').style.display='none'; //使用prototype.js隐藏元素
//...省略其他代码
(5)方法五
aSuncat备注:如果工程项目用到jquery,但是插件要用zepto,就会倾向于使用这种方法。
//jquery与zepto的冲突
window.$$=window.Zepto=Zepto;
$(function(){
//jquery用$
$('p').on('click',funciton(){});
//zepto用$$
$$('#delayReason').on('click', function (){
weui.picker(itemsDelayArr, {
onConfirm: function (index) {
alert(1);
}
});
});
}
如果是要用到zepto的插件,直接用$$就行,
2、jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了,那么可以直接调用“jQuery”来做一些jQuery的工作,同时,可以使用$()方法作为其他库的快捷方式,这里无需调用jQuery.noConflict()函数。示例如下:
(1)方法六:
//...省略其他代码
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>
<p>备注:prototype.js是对原生对象的功能增强,多是扩充原生对象。
jquery.js是对原生语句的封装,多是构建自己的对象。<p>
<!--先导入jQuery-->
<script src="js/jquery-1.12.4.min.js"></script>
<!--后导入其他库-->
<script src="lib/prototype.js"></script>
<script>
jQuery(function(){ //直接使用jQuery,无需调用”jQuery.noConflict()函数“
jQuery('p').click(function(){
alert(jQuery(this).text());
});
});
$('pp').style.display='none';//使用prototype.js隐藏元素
</script>
//...省略其他代码