jQuery入门：避免和其他库冲突

Avoiding Conflicts with Other Libraries

jQuery库和几乎它所有的插件被包含在

jQuery

命名空间内。和一般的规则一样，全局对象也存储于jQuery命名空间内，所以不会遇到jQuery和任何其他库之间的冲突（就象prototype.js，MooTools或者YUI）。

当然，提醒一下：默认情况下，jQuery使用

$

做为

jQuery

的简写。因此，如果你用其他使用

$

变量的JavaScript库，你运行jQuery会遇到冲突。为了避免这些冲突，你需要在页面装载它以后且在页面中应用jQuery之前即刻设置jQuery在非冲突模式下运行。

设置jQuery到非冲突模式

如果你要把jQuery设置为非冲突模式，你要用新变量名来替换

$

别名。

<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

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 src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

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装载后被装载。如果jQeury包含在其他库之前，当做某些用

jQuery

工作的时候，你可以用jQuery,但是

$

将会被其他库重定义。没有必要调用

jQuery.noConflict()

来放弃

$

别名。

<!-- Loading jQuery before other libraries. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>

// 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 src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

// 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 src="prototype.js"></script>
<script src="jquery.js"></script>
<script>

jQuery.noConflict();

(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );

</script>

注意，如果你运用这种技巧，你不能应用在即时调用函数之内的prototype.js方法。

$

将被jQuery引用而不是 prototype.js。

应用传递给

jQuery( document ).ready()

函数的变量

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>

jQuery(document).ready(function( $ ) {
// Your jQuery code here, using $ to refer to jQuery.
});

</script>

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

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>

jQuery(function($){
// Your jQuery code here, using the $
});

</script>

原文地址