1.5解决jQuery和其他库的冲突

在 jQuery 库中，几乎所有的插件都被限制在它的命名空间里。通常，全局对象都被很好地存储在jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）一起使用时，不会引起冲突。

注意：默认情况下，jQuery用$作为自身的快捷方式。

1．jQuery库在其他库之后导入

在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。示例如下：

<!--//⋯省略其他代码-->
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>
<!-- 引入 prototype  -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery  -->
<script src="../../scripts/jquery.js" type="text/javascript"></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对象的制造工厂。

此外，还有另一种选择。如果想确保jQuery不会与其他库冲突，但又想自定义一个快捷方式，可以进行如下操作：

// ⋯省略其他代码
var $j = jQuery.noConflict(); //自定义一个快捷方式
$j(function(){ //使用jQuery，利用自定义快捷方式—$j
    $j("p").click(function(){
        alert( $j(this).text() );
    })
})
$("pp").style.display = 'none'; //使用prototype.js隐藏元素
//⋯省略其他代码

可以自定义备用名称，例如jq、$J、awesomequery`等。

如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库相冲突，那么可以使用以下两种解决方法。

其一：

//⋯省略其他代码
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery设定页面加载时执行的函数
    $("p").click(function(){ //在函数内部继续使用$()方法
        alert($(this).text() );
    })
})
$("pp").style.display = 'none'; //使用prototype
//⋯省略其他代码

其二：

//⋯省略其他代码
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
    $(function(){ //匿名函数内部的$均为jQuery
        $("p").click(function(){ //继续使用 $()方法
            alert($(this).text() );
        });
    });
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
//⋯省略其他代码

这应该是最理想的方式，因为可以通过改变最少的代码来实现全面的兼容性。

2．jQuery库在其他库之前导入

如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例如下：

<!--//⋯省略其他代码-->
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定单击事件)</p>
<!--先导入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!--后导入其他库 -->
<script src="lib/prototype.js" type="text/javascript"></script>
<script>
    jQuery(function () {  //直接使用jQuery，无需调用"jQuery.noConflict()"函数
        jQuery("p").click(function () {
            alert(jQuery(this).text());
        })
    })
    $("pp").style.display = 'none'; //使用prototype
</script>

有了这些方法来解决冲突，就可以在项目中放心地引用jQuery了。