jQuery.noConflict()

分类: Core | Miscellaneous > Setup Methods

jQuery.noConflict( [removeAll ] )返回: Object

描述: 放弃jQuery控制$ 变量。

  • 添加的版本: 1.0jQuery.noConflict( [removeAll ] )

    • removeAll
      类型: Boolean
      一个布尔值，判断是否从全局作用域中内去除所有jQuery变量(包括jQuery本身)。

很多javascript库使用 $ 作为一个函数或者变量名，正如jquery做的一样。在jQuery下 $只是jQuery的一个别名，所以不使用 $所有功能都是有效的。如果我们需要同时使用jQuery和其他javascript库，我们可以使用 $.noConflict()把 $的控制权交给其他库。旧引用的$ 被保存在jQuery的初始化; noConflict() 简单的恢复它们。

如果由于某种原因，加载两个版本的jQuery（这是不推荐）， 第二个版本中调用$.noConflict(true) 将返回全局的jQuery变量给第一个版本。

1
2
3
4
5
6
 
<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()是一个闭包）：

1
2
3
4
5
6
7
8
9
 
<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存在的变量,这种情况下，可能导致插件不能正常操作。

例子:

Example: 将$引用的对象映射回原始的对象。

1
2
3
4
5
 
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Example: 恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

1
2
3
4
5
6
7
 
jQuery.noConflict();
(function($) {
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

Example: 你可以通过jQuery.noConflict() ready约束为一小段代码

1
2
3
4
5
 
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Example: 创建一个新的别名用以在接下来的库中使用jQuery对象。

1
2
 
var dom = {};
dom.query = jQuery.noConflict(true);

Result:

1
2
3
4
5
6
 
// 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();

Example: Load two versions of jQuery (not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
<script src="//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>

Demo: