在magento中用的js库是prototype,而现在我们想用jQuery,那么这就涉及到兼容性问题了，因为prototype控制着magento默认的所有js效果，我们不可能去花费大量时间去把prototype替换成jQuery,这样代价太大了，下面就在magento中jQuery兼容prototype解决方法做下讲解

jQuery命名空间里包含了它的库和所有插件。一般来说，全局对象存储在jQuery的命名空间里，所以不应该与其它库发生冲突（比如 prototype.js, MooTools,或者YUI）

也就是说，这里警告大家：默认地，jQuery使用$作为jQuery的缩写。因此，如果你正使用JavaScript库中的$变量，那么就会与jQuery冲突。为 了避免这些冲突，你需要在jQuery载入页面和被使用前进入无冲突模式（no-conflict mode）。

让jQuery进入无冲突模式

当你让jQuery进入无冲突模式时，你可以用一个新的变量名来代替$别名。

<!-- Putting jQuery into no-conflict mode. -->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></scrip>
<script type="text/javascript">// <![CDATA[
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
 
$j(document).ready(function() {
    $j( "div" ).hide();
});
 
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
    var mainDiv = $( "main" );
}
// ]]></script>

在上面的代码中，$的意思会在原始库中被还原。使用jQuery函数全名和新别名$j效果是一样的。新的别名可以任由你命名，比如：jq, $J, awesomeQuery，等等。

最后，如果你不愿意替换掉jQuery函数名（超喜欢用$而不在乎其它库中的$方法），这里也有个方法你可以试试：简单地将$作为参数传到你的jQuery( document ).ready()方法中。这是最常用的技能利用jQuery代码简洁优势，又能避免冲突的方法。

<!-- Another way to put jQuery into no-conflict mode. -->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
 
jQuery( document ).ready(function( $ ) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
    $( "div" ).hide();
});
 
// The $ variable in the global scope has the prototype.js meaning.
window.onload = function(){
    var mainDiv = $( "main" );
}
// ]]></script>

对于大部分你的代码，这可能是理想的解决方式。考虑到一些少部分情况，你将要做些改变去达到完全兼容的效果。

在其它库前载入jQuery库

上面例子中，依赖jQuery的代码在prototype.js之后被读取。如果在其它库前载入jQuery，你就可以在jQuery作用的地方使用jquery，但是$会有其它库中定义的意思。这样就不需要通过调用jQuery.noConflict()放弃$别名了。

<!-- Loading jQuery before other libraries. -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">// <![CDATA[
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
    jQuery( "div" ).hide();
});
 
// Use the $ variable as defined in prototype.js
window.onload = function() {
    var mainDiv = $( "main" );
};
// ]]></script>

引用jQuery函数摘要

这里回顾下在冲突情况下如何引用jQuery函数

创建一个新别名

jQuery.noConflict()方法返回一个新的参数给jQuery函数，因此你可以在任何你想要的变量中捕捉它。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">// <![CDATA[
// Give $ back to prototype.js; create new alias to jQuery.
var $jq = jQuery.noConflict();
// ]]></script>

使用一个立即调用的函数表达式

通过将你的代码包含进一个立即调用函数表达式可以让你继续使用标准的$；这也是jQuery插件编写的一个标准模式，这里笔者不知道其它库是否会接管$。

<!-- Using the $ inside an immediately-invoked function expression. -->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
 
(function( $ ) {
    // Your jQuery code here, using the $
})( jQuery );
// ]]></script>

这里要注意的是，当你使用这项技术时，你将不能在立即调用函数内使用prototype.js方法。$将是jQuery的参数。

使用jQuery( document ).ready()函数的传递

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function( $ ) {
    // Your jQuery code here, using $ to refer to jQuery.
});
// ]]></script>

或者使用更简洁的语法DOM ready函数

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery(function($){
    // Your jQuery code here, using the $
});
// ]]></script>