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>