发布于：使用 jQuery 核心

避免与其他库冲突

jQuery 库及其几乎所有插件都包含在 jQuery 命名空间中。通常，全局对象也存储在 jQuery 命名空间中，因此 jQuery 不应与任何其他库（如 prototype.js、MooTools 或 YUI）发生冲突。

话虽如此，有一个注意事项：默认情况下，jQuery 使用 $ 作为 jQuery 的快捷方式。因此，如果您使用另一个使用 $ 变量的 JavaScript 库，则可能会与 jQuery 发生冲突。为了避免这些冲突，您需要在 jQuery 加载到页面后立即将其置于无冲突模式，然后在页面中尝试使用 jQuery 之前。

link 将 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>

这可能是您大部分代码的理想解决方案，因为您需要更改的代码更少才能实现完全兼容性。

link 在其他库之前包含 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>

link 引用 jQuery 函数的方法摘要

当存在另一个库在 $ 变量的使用上产生冲突时，以下是引用 jQuery 函数的方法回顾

link 创建新别名

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>

link 使用立即调用函数表达式

您可以通过将代码包装在立即调用函数表达式中来继续使用标准的 $；这也是 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。

link 使用传递给 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>