JS中JQuery与其他库冲突问题的解决办法
在JS中，当使用JQuery开发引入时，可能还会用到其他库，比如Prototype、MooTools等，这时对$符的争夺，将造成程序混乱，可能通过以下几种方式进行解决：
一、JQuery库在其他库之前导入
将JQueryy库在其他库之前导入，并用JQuery代替$解释符，即将$(回调)用JQuery(回调)代替。如下示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery库在其他库之前导入</title>
<!--先导入JQuery-->
<script src="js/jquery-1.11.1.min.js"></script>
<!--后导入prototype-->
<script src="js/prototype.js"></script>
</head>
<body>
<p id="prototypepp">prototype</p>
<p>JQuery将被绑定在click事件上</p>
<script>
jQuery(function(){//在这里直接使用JQuery代替$符
jQuery("p").click(function(){
alert(jQuery(this).html());
})
})
$("prototypepp").style.display="none";//因JQuery已将$符让出，故在此可使用prototype库了
</script>
</body>
</html>
二、JQuery库在其他库之后导入
JQuery在其他库之后导入，可以使用JQuery.noConflick()方法将变量$的控制权让出去，然后再通过以下两种解决办法使用JQuery库。
(一)将JQuery()函数作为JQuery对象的制造工厂
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery库在其他库之后导入</title>
<!--先导入prototype-->
<script src="js/prototype.js"></script>
<!--后导入JQuery-->
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<p id="prototypepp">prototype</p>
<p>JQuery将被绑定在click事件上</p>
<script>
jQuery.noConflict();//将变量&符的控制权交出去
jQuery(function(){//在这里直接使用JQuery代替$符
jQuery("p").click(function(){
alert(jQuery(this).html());
})
})
$("prototypepp").style.display="none";//因JQuery已将$符让出，故在此可使用prototype库了
</script>
</body>
</html>
(二)自定一个快捷方式(如$j、$m等)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery库在其他库之后导入</title>
<!--先导入prototype-->
<script src="js/prototype.js"></script>
<!--后导入JQuery-->
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<p id="prototypepp">prototype</p>
<p>JQuery将被绑定在click事件上</p>
<script>
var $m=jQuery.noConflict();//将变量&符的控制权交出去，然后自定义一个$m来代替
$m(function(){//在这里直接使用JQuery代替$符
$m("p").click(function(){
alert($m(this).html());
})
})
$("prototypepp").style.display="none";//因JQuery已将$符让出，故在此可使用prototype库了
</script>
</body>
</html>
原文地址：https://blog.csdn.net/m0_74157361/article/details/142518448
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！