返回值:ObjectjQuery.noConflict([removeAll])
放弃jQuery对 $
变量的控制权。
-
1.0 新增jQuery.noConflict([removeAll])
removeAll (Boolean) 可选参数,一个布朗值,用于确定是否在全局作用域中移除所有 jQuery 变量,包括 jQuery 本身。
许多 JavaScript 库会跟 jQuery 一样使用 $
作为一个函数或者变量名。在 jQuery 中 $
仅仅是 jQuery
对象的别名,所以就算不用 $
也可以通过 jQuery
完整地使用所有功能。例如,用到 $("div p") 的地方,换成 jQuery("div p") 也是可以的。下面的例子就展示了如果你需要跟 jQuery 同时使用其他 JavaScript 库,我们可以通过调用 $.noConflict()
来把 $
的控制权交还给其他库:
<script type="text/javascript" src="other_lib.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.noConflict(); // 这里的代码使用其他库中的 $ 。 </script>
这里有个技巧对于解决冲突特别有效。.ready() 方法可以给 jQuery 对象取个别名,这样就能够在传给 .ready() 的回调函数的内部继续使用 $ 而不用担心冲突:
<script type="text/javascript" src="other_lib.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.noConflict(); jQuery(document).ready(function($) { // 这里的代码使用 jQuery 中的 $ }); // 这里的代码使用其他库的 $ </script>
如果有必要,我们只要把参数 true
传给这个方法,就可以把 jQuery
这个变量完全释放。这种情况非常罕见,但有时候我们必须这么做(比如我们需要在一个页面中引入多个版本的 jQuery
库)。注意,这样做很有可能导致插件失效,因为插件通常依赖于 jQuery 变量。
示例:
把原先映射在 $ 上的对象重新映射到 $ 上。
jQuery 代码:
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
示例:
恢复 $ 别名,然后创建并执行一个函数,其内部作用域提供了 $ 作为 jQuery 的别名。这样,就不会访问到全局的 $ 对象了。大多数不依赖其他库的插件在这个函数中都可以正常使用。
jQuery 代码:
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
示例:
你可以对 jQuery.noConflict() 进行链式操作来调用 ready 的快捷方式,这样可以压缩代码。
jQuery 代码:
jQuery.noConflict()(function(){
// code using jQuery
});
// other code using $ as an alias to the other library
示例:
创建一个不同的别名,之后的脚本中就可以使用这个别名来替代 jQuery 。
jQuery 代码:
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
示例:
完全把 jQuery 移到另一个对象上新的命名空间中。
jQuery 代码:
var dom = {};
dom.query = jQuery.noConflict(true);
结果:
// Do something with the new jQuery
dom.query("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
// Do something with another version of jQuery
jQuery("div > p").hide();