jQuery.noConflict() 函数

时间:2021-08-04 09:32:57

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的引用。

示例&说明

1、以下是加载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>

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

// 让出对变量$的控制权,并将jQuery赋给新的别名j
var j = jQuery.noConflict(); // 基于jQuery进行DOM操作(使用变量j)
j("#uname").hide(); // 基于Prototype进行DOM操作
$("myDiv").setStyle( {color: "#ffffff"} );

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

// 让出jQuery库对变量$的控制权
jQuery.noConflict(); jQuery(document).ready(function($){
    // 使用局部变量$进行jQuery操作
    $("p").css("color", "");    
}); (function($){
    // 使用局部变量$进行jQuery操作
    $("ul li").addClass("item");    
}(jQuery));

4、如果要实现两个版本的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>

5、三个版本的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库。

jQuery.noConflict() 函数的更多相关文章

  1. jQuery&period;noConflict&lpar;&rpar; 函数详解

    jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权. 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQue ...

  2. jQuery&period;noConflict&lpar;&rpar;防冲突机制

    许多JS库都非常喜欢使用$作为函数.变量.有时候,由于页面复杂的历史问题,或者为了实现特定的功能,我们不得不在页面中引入多个JS库.今儿个来学习学习jQuery库是怎么解决$冲突问题.(jQuery- ...

  3. jquery库与其他库冲突的问题解决-jquery&period;noConflict&lpar;&rpar;

    在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共存时可能会发生冲突:若是发生冲突后,可以通过以下几种方案进行解决: 一. jQuery库在其他库之前导入,直接 ...

  4. jQuery&period;noConflict&lpar;&rpar;

    转载:http://blog.163.com/mjuxiaom@126/blog/static/13397047120117324320858/ 运行这个函数将变量$的控制权让渡给第一个实现它的那个库 ...

  5. 三分钟玩转jQuery&period;noConflict&lpar;&rpar;

      jQuery是目前使用最广泛的前端框架之一,有大量的第三方库和插件基于它开发.为了避免全局命名空间污染,jQuery提供了jQuery.noConflict()方法解决变量冲突.这个方法,毫无疑问 ...

  6. jquery noConflict详解

    noConflict是防止其他库也用了$作为全局变量而引起的冲突,我们看看jquery是怎么做的 首先jquery在代码的开始部分定义了2个私有变量: _jQuery = window.jQuery ...

  7. jQuery noConflict&lpar;&rpar; 方法

    如何在页面上同时使用 jQuery 和其他框架? jQuery 和其他 JavaScript 框架 正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写. 如果其他 JavaSc ...

  8. jQuery 核心函数 (十一)

    函数 描述 jQuery() 接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器. jQuery.noConflict() 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库.

  9. JQuery --- 第一期 &lpar;初识jQuery&comma; JQuery核心函数和工具方法&rpar;

    个人学习笔记  初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...

随机推荐

  1. LeetCode &vert; Unique Paths【摘】

    A robot is located at the top-left corner of a m x n grid (marked ‘Start’ in the diagram below). The ...

  2. python 操作excel 使用笔记

    写入excel, 保存的过程中需要注意,保存格式xls后缀,如果用xlsx会报错 def set_style(name,height,bold=False): """&q ...

  3. CentOS6&period;5安装配置Samba

    CentOS6.5安装配置Samba 本文的场景是虚拟机运行CentOS6.,本机是Win7,现欲把CentOS上的一个文件夹共享出来,Win的机器可以读写. Samba与window连接需要使用Ne ...

  4. iOS开发支付集成之微信支付

    这一篇是<iOS开发之支付>这一部分的继支付宝支付集成,银联支付集成第三篇,微信支付.在集成的时候建议都要去下载最新版的SDK,因为我知道的前不久支付宝,银联都更新了一次,微信的不太清楚更 ...

  5. Vue语法学习第一课——插值

    学习关于Vue的插值语法 ① 文本值 : "Mustache"语法,即双大括号 <span>Message:{{msg}}</span> 注:双大括号中的m ...

  6. Spring事务嵌套

    学习一下Spring的事务嵌套:https://blog.csdn.net/zmx729618/article/details/77976793 重点句子: Juergen Hoeller 的话:   ...

  7. Docker bridge br0 pipework

    Docker Centos7 下建立 Docker 桥接网络 - weifengCorp - 博客园https://www.cnblogs.com/weifeng1463/p/7468497.html ...

  8. MyEclipes相关配置

    0. MyEclipes10 相关下载资源(私人珍藏版) 链接:http://pan.baidu.com/s/1eSIdObS密码:0cjy 1. myEclipes连接Tomcat http://w ...

  9. InstallShield安装包在Win7下权限问题的解决方案 &lpar;转载&rpar;

    转载:http://blog.csdn.net/wuzhengqing1/article/details/6570149 转载:http://blog.csdn.net/brikoff/article ...

  10. wireshark 抓包

    Wireshark(前称Ethereal)是一个网络数据包分析软件.网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据.Wireshark使用WinPCAP作为接口,直接 ...