在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>