概述 jQuery.noConflict( [removeAll ] )
返回值:Object
描述:放弃jQuery控制$
变量。
很多javascript库使用 $
作为一个函数或者变量名,正如jquery做的一样。在jQuery下 $
只是jQuery
的一个别名,所以不使用 $
所有功能都是有效的。如果我们需要同时使用jQuery和其他javascript库,我们可以使用 $.noConflict()
把 $
的控制权交给其他库。旧引用的$
被保存在jQuery的初始化; noConflict()
简单的恢复它们。
如果由于某种原因,加载两个版本的jQuery(这是不推荐),
第二个版本中调用$.noConflict(true)
将返回全局的jQuery变量给第一个版本。
- <script type="text/javascript" src="other_lib.js"></script>
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- $.noConflict();
- // Code that uses other library's $ can follow here.
- </script>
这里有个技巧对于解决冲突特别有效。.ready()
方法可以给 jQuery 对象取个别名,这样就能够在传给 .ready()
的回调函数的内部继续使用 $ 而不用担心冲突(手册网注:原因:.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($) {
- // Code that uses jQuery's $ can follow here.
- });
- // Code that uses other library's $ can follow here.
- </script>
如果必要的话,我们可以释放jQuery
名字,传递true
作为一个参数给这个方法。 这不是必须的,如果我们必须这样做的话(举个示例,如果我们在同一个页面上使用多个版本的jQuery库), 我们必须考虑到大多数插件依靠jQuery
存在的变量,这种情况下,可能导致插件不能正常操作。
示例
将$引用的对象映射回原始的对象。
- jQuery.noConflict();
- // Do something with jQuery
- jQuery("div p").hide();
- // Do something with another library's $()
- $("content").style.display = 'none';
恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为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约束为一小段代码
- var j = jQuery.noConflict();
- // Do something with jQuery
- j("div p").hide();
- // Do something with another library's $()
- $("content").style.display = 'none';
创建一个新的别名用以在接下来的库中使用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();
Load two versions of jQuery (not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery.
运行一下
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery.noConflict demo</title>
- <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
- </head>
- <body>
- <div id="log">
- <h3>Before $.noConflict(true)</h3>
- </div>
- <script src="https://code.jquery.com/jquery-1.6.2.js"></script>
- <script>
- var $log = $( "#log" );
- $log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
- // Restore globally scoped jQuery variables to the first version loaded
- // (the newer version)
- jq162 = jQuery.noConflict( true );
- $log.append( "<h3>After $.noConflict(true)</h3>" );
- $log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
- $log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
- </script>
- </body>
- </html>