发布在：使用 jQuery Core

避免与其他库发生冲突

jQuery 库及其几乎所有插件都包含在 jQuery 命名空间内。作为一般规则，全局对象也存储在 jQuery 命名空间内，因此 jQuery 和任何其他库（如 prototype.js、MooTools 或 YUI）之间不会发生冲突。

也就是说，有一个警告：默认情况下，jQuery 使用 $ 作为 jQuery 的快捷方式。因此，如果你使用另一个将 $ 变量作为快捷方式的 JavaScript 库，则可能会与 jQuery 发生冲突。为了避免这些冲突，你需要在将 jQuery 加载到页面上并尝试在页面中使用 jQuery 之前，立即将 jQuery 置于无冲突模式。

链接 将 jQuery 置于无冲突模式

当你将 jQuery 置于无冲突模式时，你可以选择分配一个新的变量名来替换 $ 别名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!-- 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 代码的好处，但又不想与其他库发生冲突的情况下，最常使用此方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!-- 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

上面的代码片段依赖于在加载 prototype.js 之后加载 jQuery。如果在其他库之前包含 jQuery，则可以在使用 jQuery 执行某些操作时使用 jQuery，但 $ 将具有其他库中定义的含义。无需通过调用 jQuery.noConflict() 放弃 $ 别名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!-- 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 函数的引用，因此你可以在任何你喜欢的变量中捕获它

1
2
3
4
5
6
7
8
 
<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 插件创作的标准模式，其中作者无法知道另一个库是否已接管 $。有关编写插件的更多信息，请参阅 插件 部分。

1
2
3
4
5
6
7
8
9
10
11
12
 
<!-- 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() 函数的参数

1
2
3
4
5
6
7
8
9
 
<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 函数语法

1
2
3
4
5
6
7
8
9
 
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
 
jQuery(function($){
    // Your jQuery code here, using the $
});
 
</script>