转自:zend实验室
注:jquery官方原文:Using jQuery with Other Libraries
本篇文章将帮助你解决Jquery与其它js框架之间的共享冲突的问题,实现jquery与Mootools之间的共存。最近在做一些关于CRM的界面,其中用到了一套界面库,是以Mootools为基础开发的,但是后来考虑需要引入一些新的组件,并且这些组件都是以jquery为基础开发的,如leightbox等。结果引入jquery之后却发现$在两个框架中都有各自的定义,冲突也显现出来了。经过收集,网上大致提供了三种解决办法。
方法一、
<html>
<head>
<script src="Mootools.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();//释放jquery中$定义,并直接使用jQuery代替平时的$
jQuery(document).ready(function(){
jQuery("div").hide();
});
$('someid').style.display = 'none';//此处中的$为原Mootools中的$,使用方法不变
</script>
</head>
<body>
</body>
</html>
方法二、
<html>
<head>
<script src="Mootools.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
//将你使用的jquery代码放到document ready方中
jQuery(document).ready(function($){
// 此处为jQuery的$定义
$("div").hide();
});
//此处为Mootools的定义
$('someid').style.display = 'none';
</script>
</head>
<body>
</body>
</html>
方法三、
<html>
<head>
<script src="Mootools.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();//以$j来替代jQuery中的$,同时区分mootools
$j(document).ready(function(){
$j("div").hide();
});
$('someid').style.display = 'none'; //原mootools中的$照旧使用
</script>
</head>
<body></body>
</html>
zend实验室强烈建议你使用第三中方法来解决jquery与其它js框架之间共享冲突问题,理由是它既简短,又能实现你想要的结果,并且不会像第二个方法中那样存在使用位置限制。想在哪用就在哪用,随心所欲。