欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

jQuery.noConflict() 函数详解 多个jquery 版本冲突 有大用

shiping1 的头像
jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权

一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQuery("p")$("p")是等价的。由于变量$只有一个字符,并且特点鲜明,因此我们更加习惯使用$来操作jQuery库。

不过,其他JS库也可能使用变量$来进行操作,例如Prototype库。这个时候两个库可能会由于变量$的控制权问题而发生冲突。

此时,你可以使用该函数让出jQuery库对变量$的控制权,将该变量交给上一个实现它的JS库,之后我们只能使用变量jQuery来操作jQuery库。

此外,使用该函数,还可以同时让出变量$和变量jQuery的控制权,从而实现多个不同版本的jQuery库共存(详情见下面的示例说明)。

该函数属于全局jQuery对象。

语法

静态函数jQuery.noConflict()的语法如下:

jQuery.noConflict( [ removeAll ] )

参数

参数描述
removeAll可选/Boolean类型是否彻底移交对变量jQuery的控制权,默认为false

如果省略了参数removeAll或该参数不为true,则表示只让出对变量$的控制权;如果该参数为true,则表示同时让出变量$jQuery的控制权。

返回值

jQuery.noConflict()函数的返回值是jQuery类型,返回变量jQuery的引用。

示例&说明

以下是加载Prototype和jQuery库的情况:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// 让出对变量$的控制权
jQuery.noConflict();

// 使用jQuery进行DOM操作
jQuery("#uname").hide();

// 使用Prototype进行DOM操作
$("myDiv").setStyle( {color: "#ffffff"} );
</script>

运行代码 (以下代码请自行复制到演示页面运行,注意不要同时执行,请分别执行)

此外,我们还可以使用其他自定义的变量名来操作jQuery:

// 让出对变量$的控制权,并将jQuery赋给新的别名j
var j = jQuery.noConflict();

// 基于jQuery进行DOM操作(使用变量j)
j("#uname").hide();

// 基于Prototype进行DOM操作
$("myDiv").setStyle( {color: "#ffffff"} );

即使是多个库共存,我们也可以在jQuery.ready()的回调函数或其他自定义函数中将局部变量$作为jQuery的别名使用:

// 让出jQuery库对变量$的控制权
jQuery.noConflict();

jQuery(document).ready(function($){
    // 使用局部变量$进行jQuery操作
    $("p").css("color", "");    
});


(function($){
    // 使用局部变量$进行jQuery操作
    $("ul li").addClass("item");    
}(jQuery));

如果要实现两个版本的jQuery库共存,我们可以编写如下代码:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
// 让出jQuery-1.11.1对变量$和变量jQuery的控制权
var j = jQuery.noConflict( true );

document.writeln( j.fn.jquery ); // 1.11.1 得到版本号

document.writeln( $.fn.jquery ); // 1.4.2  得到版本号

document.writeln( jQuery.fn.jquery ); // 1.4.2  得到版本号


/*
 * 如果前面的jQuery.noConflict()没有传入参数true,
 * 也就是说只让出变量$的控制,则$表示1.4.2,jQuery表示1.11.1
 * 此时,jQuery.fn.jquery为1.11.1
 */
 </script>

三个版本的jQuery库共存,对应的jQuery示例代码如下:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
// 让出jQuery-1.11.1对变量$和变量jQuery的控制权,使用变量j来控制
var j = jQuery.noConflict( true );

// 让出jQuery-1.8.3对变量$的控制权
jQuery.noConflict();

document.writeln( j.fn.jquery ); // 1.11.1
document.writeln( jQuery.fn.jquery ); // 1.8.3
document.writeln( $.fn.jquery ); // 1.4.2
</script>

注意:多个可能存在全局变量重名冲突的JS库,变量的实际控制权一般取决于JS库的加载顺序。以上面三个版本的jQuery库的示例代码为例,后加载的jQuery库的变量覆盖了之前版本的变量,因此每次让出变量的控制权,控制权就会交给上一个JS库。

来自 http://www.365mini.com/page/jquery_noconflict.htm


jQuery中noConflict()用法实例分析

作者:whazhl 字体:[增加 减小] 类型:转载 时间:2015-02-08 我要评论

这篇文章主要介绍了jQuery中noConflict()用法,实例分析了noConflict()的功能、定义及相关使用技巧,需要的朋友可以参考下
 

本文实例讲述了jQuery中noConflict()用法。分享给大家供大家参考。具体分析如下:

jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库。这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。

一、"$"操作符

1、jQuery默认使用"$"操作符,prototype等其他框架也是是使用"$",于是,如果jQuery在其他库之后引入,那么jQuery将获得"$"使用权。这样的情况也很容易理解,毕竟JS是从上到下流式执行的。

2、如果在其他使用"$"的库之前引入jQuery,那么jQuery将不会占用"$"。

提示:在其他 JavaScript 库为其函数使用 $ 时,该方法很有用。

我们在jquery中获取变量都会使用到$,但是还有很多插件都是可以使用$这个符号了,如果我们同时要引用就会导致出现问题了,jquery为了防止这种事情发生就引入了noconflict()

二、jQuery.noConflict的定义
 
jQuery.noConflict 方法包含一个可选的布尔参数,用以决定移交 $ 引用的同时是否移交 jQuery 对象本身:

1
jQuery.noConflict([removeAll])

函数的说明:

缺省情况下,执行 noConflict 会将变量 $ 的控制权移交给第一个产生 $ 的库;当 removeAll 设置为 true 时,执行 noConflict 则会将 $ 和 jQuery 对象本身的控制权全部移交给第一个产生他们的库。
 
三、jQuery.noConflict源码分析
 
jQuery 源码开头,首先做的一件事情是这样的:

1
2
3
4
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,

容易理解的是,jQuery 通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象,以防止变量被强行覆盖。一旦 noConflict 方法被调用,则通过 _jQuery, _$, jQuery, $ 四者之间的差异,来决定控制权的移交方式,具体的代码如下:

1
2
3
4
5
6
7
8
9
noConflict: function( deep ) {
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}

再来看上面所说的参数设定问题,如果 deep 没有设置,_$ 覆盖 window.$,此时 jQuery 别名 $ 失效,但 jQuery 本身完好无损。如果有其他类库或代码重新定义了 $ 变量,它的控制权就完全交接出去了。反之如果 deep 设置为 true 的话,_jQuery 覆盖 window.jQuery,此时 $ 和 jQuery 都将失效。
这种操作的好处是,不管是框架混用还是 jQuery 多版本共存这种高度冲突的执行环境,由于 noConflict 方法提供的移交机制,以及本身返回未被覆盖的 jQuery 对象,完全能够通过变量映射的方式解决冲突。

四、jQuery.noConflict实例
 
1、将 $ 引用的对象映射回原始的对象:

1
2
3
jQuery.noConflict();
jQuery("div p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $()

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

1
2
3
4
5
6
7
jQuery.noConflict();
(function($) {
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
... // 其他用 $ 作为别名的库的代码

3、可以将 jQuery.noConflict() 与简写的 ready 结合,使代码更紧凑:

1
2
3
4
jQuery.noConflict()(function(){
  // 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码

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

1
2
3
var j = jQuery.noConflict();
j("div p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5、完全将 jQuery 移到一个新的命名空间:

1
2
3
4
5
6
var dom = {};
dom.query = jQuery.noConflict(true);
//结果:
dom.query("div p").hide();  // 新 jQuery 的代码
$("content").style.display = "none"// 另一个库 $() 的代码
jQuery("div > p").hide();  // 另一个版本 jQuery 的代码

希望本文所述对大家的jQuery程序设计有所帮助。


来自  http://www.jb51.net/article/60873.htm


定义和用法

noConflict() 方法让渡变量 $ 的 jQuery 控制权。

语法

jQuery.noConflict([removeAll])
参数描述
removeAll布尔值。指示是否允许彻底将 jQuery 变量还原。

说明

许多 JavaScript 库使用 $ 作为函数或变量名,jQuery 也一样。在 jQuery 中,$ 仅仅是 jQuery 的别名,因此即使不使用 $ 也能保证所有功能性。假如我们需要使用 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 对象起别名,这项技术非常有效:

 

复制代码
<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 的控制权都交还给原来的库。用之前请考虑清楚!

这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义 jQuery。这通常用于一种极端的情况,比如你想要将 jQuery 嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。

实例

例子 1

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

 

jQuery.noConflict();

jQuery(
"div p").hide();    // 使用 jQuery

$("content").style.display = "none";    // 使用其他库的 $()
例子 2

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


复制代码
jQuery.noConflict();

(
function($) { 
  $(
function() {
    
// 使用 $ 作为 jQuery 别名的代码
  });
})(jQuery);
复制代码
... // 其他用 $ 作为别名的库的代码

例子 3

可以将 jQuery.noConflict() 与简写的 ready 结合,使代码更紧凑:


jQuery.noConflict()(function(){
    
// 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码

例子 4

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

 

var j = jQuery.noConflict();

j(
"div p").hide();    // 基于 jQuery 的代码

$("content").style.display = "none";    // 基于其他库的 $() 代码
例子 5

完全将 jQuery 移到一个新的命名空间:

 

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

结果:

dom.query("div p").hide();    // 新 jQuery 的代码

$("content").style.display = "none";    // 另一个库 $() 的代码

jQuery("div > p").hide();    // 另一个版本 jQuery 的代码


来自 http://www.cnblogs.com/scy251147/archive/2011/04/02/2003783.html


普通分类: