前端开发很容易会遇到jQuery库与其他库冲突的场景，比如和prototype库冲突。

实际上这种冲突是因为不同的第三方JS库争夺对$标识符的控制权引起的。

解决方法，就是使用jQuery提供的jQuery.noConflict()方法，释放$标识符的控制，使其他的脚本可以使用$标识符而不会引起冲突。

更多的，jQuery.noConfilict()方法可以返回对jQuery的引用，可以将这个返回的引用存放到变量中，就可以使用这个变量来调用jQuery库提供的方法或对象。

同一个页面的jQuery多个版本冲突

  1. <!-- 引入1.6.4版的jq -->
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
  3. <script> var jq164 = jQuery.noConflict(true); </script>
  4. <!-- 引入1.4.2版的jq -->
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  6. <script> var jq142 = jQuery.noConflict(true); </script>
  7.  
  8. <script>
  9. (function($) {
  10.     // 此时的$是jQuery-1.6.4
  11.     $('#');
  12. })(jq164);
  13. </script>
  14.  
  15. <script>
  16. jq142(function($) {
  17.     // 此时的$是jQuery-1.4.2
  18.     $('#');
  19. });
  20. </script>

jQuery库在其他库之后导入引发冲突

1.通过jQuery的全限定名替代$简写来使用jQuery

  1. <script src="prototype.js" type="text/javascript"></script>
  2. <script src="jquery.js" type="text/javascript"></script>
  3.  
  4. <p id="pp">test---prototype</p>
  5. <p>test---jQuery</p>
  6.  
  7. <script type="text/javascript">
  8. jQuery.noConflict(); // 将变量$的控制权让渡给prototype.js，全名可以不调用。
  9. jQuery(function() { // 使用jQuery
  10.     jQuery("p").click(function() {
  11.         alert(jQuery(this).text() );
  12.     });
  13. });
  14. // 此处不可以再写成$，此时的$代表prototype.js中定义的$符号
  15.  
  16. $("pp").style.display = 'none';        //使用prototype
  17. </script>

2.自定义一个快捷方法（别名）

  1. <script type="text/javascript">
  2. var $j = jQuery.noConflict();  // 自定义一个比较短的快捷方式
  3. $j(function() { // 使用jQuery
  4.     $j("p").click(function() {
  5.         alert( $j(this).text() );
  6.     });
  7. });
  8.  
  9. $("pp").style.display = 'none'; // 使用prototype
  10. </script>

3.将$符号作为参数传到函数内部

  1. <script type="text/javascript">
  2. jQuery.noConflict(); // 将$符号的控制权让渡给prototype.js
  3. jQuery(document).ready(function($) {
  4.     $("p").click(function() { // 继续使用$符号
  5.         alert( $(this).text());
  6.     });
  7. });
  8. // 或者如下
  9. jQuery(function($) { // 使用jQuery
  10.     $("p").click(function() { // 继续使用$符号
  11.         alert( $(this).text() );
  12.     });
  13. });
  14. </script>
  1. <script type="text/javascript">
  2. jQuery.noConflict(); // 将$符号的控制权让渡给prototype.js
  3. (function($) { // 定义匿名函数并设置形参为$
  4.     $(function() { // 匿名函数内部的$均为jQuery
  5.         $("p").click(function() { // 继续使用 $ 方法
  6.             alert($(this).text());
  7.         });
  8.     });
  9. })(jQuery); // 执行匿名函数且传递实参jQuery
  10.  
  11. $("pp").style.display = 'none'; // 使用prototype
  12. </script>

jQuery库在其他库之前导入引发冲突

jQuery库在其他库之前导入，$的归属权默认归最后面的JavaScript库所有。那么可以直接使用【jQuery】来做一些jQuery的工作。

同时，可以使用$()方法作为其他库的快捷方式，也无须调用jQuery.noConflict()函数。

  1. <!-- 引入 jQuery  -->
  2. <script src="../../scripts/jquery.js" type="text/javascript"></script>
  3. <!-- 引入 prototype  -->
  4. <script src="lib/prototype.js" type="text/javascript"></script>
  5.  
  6. <body>
  7. <p id="pp">Test-prototype(将被隐藏)</p>
  8. <p >Test-jQuery(将被绑定单击事件)</p>
  9.  
  10. <script type="text/javascript">
  11. jQuery(function() { // 直接使用jQuery,没有必要调用"jQuery.noConflict()"函数
  12.     jQuery("p").click(function(){
  13.         alert(jQuery(this).text() );
  14.     });
  15. });
  16.  
  17. $("pp").style.display = 'none'; // 使用prototype
  18. </script>
  19. </body>

jQuery.noConflict()的原理

通过查看源码就能知道这个方法的原理。

  1. var
  2. // Map over jQuery in case of overwrite
  3. _jQuery = window.jQuery,
  4.  
  5. // Map over the $ in case of overwrite
  6. _$ = window.$,
  7.  
  8. jQuery.extend({
  9.     noConflict: function(deep) {
  10.             if (window.$ === jQuery) {
  11.                 window.$ = _$;
  12.             }
  13.             if (deep && window.jQuery === jQuery) {
  14.                 window.jQuery = _jQuery;
  15.             }
  16.             return jQuery;
  17.         }
  18. });

首先，在jQuery加载的时候，通过事先声明的_jQuery变量获取到当前window.jQuery，通过_$获取到当前window.$。

然后，通过jQuery.extend()把noConflict挂载到jQuery下面。所以我们在调用的时候都是jQuery.noConflict()这样调。

然后，在调用noConflict()时做了2个判断。第一个if判断把$的控制权交了出去；第二个if判断则在noConflict()传参的时候把jQuery的控制权交了出去。

最后，noConflict()返回jQuery对象，用哪个参数接收，哪个参数将拥有jQuery的控制权。

"我不知道自己到底在执着什么，我只是知道，我一直都在为难自己。"

jquery库与其他库（比如prototype）冲突的解决方法的更多相关文章

  1. git 本地库推送远程库 版本冲突的解决方法

    参考: http://blog.csdn.net/shiren1118/article/details/7761203 github上的版本和本地版本冲突的解决方法 $ git push XXX ma ...

  2. [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法

    最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property ‘msie’ of undefined.上jQuery网站上搜了一下,原因是$.browser这个a ...

  3. jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)

    最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property 'msie' of undefined.上jQuery网站上搜了一下,原因是$.browser这个a ...

  4. Git冲突与解决方法【转】

    本文转载自:https://www.cnblogs.com/gavincoder/p/9071959.html Git冲突与解决方法 1.git冲突的场景 情景一:多个分支代码合并到一个分支时: 情景 ...

  5. [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法 --转

    初用Yii的srbac模块.出现 Cannot read property ‘msie’ of undefined 错误.上网查询,找到如下的文章.使用文末的打补丁的方法,成功搞定.感谢. ===== ...

  6. [转载][jQuery] Cannot read property ‘msie’ of undefined错误的解决方法

    参考 [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法 ---------------------------------------- ...

  7. jquery ui中 accordion的问题及我的解决方法

    原文:jquery ui中 accordion的问题及我的解决方法 jquery有一套所谓的ui组件,很不错的.如果有兴趣的朋友,可以参考http://jqueryui.com/ 但其中的accord ...

  8. svn冲突文件解决方法

    svn冲突文件解决方法 工具/原料 svn客户端 方法/步骤 1 通过SVN客户端更新需要的文件,如果出现有感叹号的文件,找到出现感叹号的文件. 2 选择感叹号文件,即冲突文件,单击鼠标右键对冲突文件 ...

  9. 关于Android滑动冲突的解决方法（二）

    之前的一遍学习笔记主要就Android滑动冲突中,在不同方向的滑动所造成冲突进行了了解,这样的冲突非常easy理解,当然也非常easy解决.今天,就同方向的滑动所造成的冲突进行一下了解,这里就先以垂直 ...

  10. Hyper-V与VirtualBox或VMware虚拟机软件冲突的解决方法（VirtualBox只能创建32位虚拟机）

    Hyper-V与VirtualBox或VMware虚拟机软件冲突的解决方法 Hyper-V是微软的虚拟化软件,功能类似VirtualBox.VMware,可以用来创建虚拟机. 虚拟化软件都是基于CPU ...

随机推荐

  1. 十一：外观模式详解（Service，action与dao）

    定义:外观模式是软件工程中常用的一种软件设计模式.它为子系统中的一组接口提供一个统一的高层接口.这一接口使得子系统更加容易使用. 该定义引自百度百科,它的表现很简单,将一系列子接口的功能进行整理,从而 ...

  2. JavaScript addEventListener()事件监听方法

    addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...

  3. sql developer 17002报错无法连接

    问题登场: 使用sql developer 登录oracle 时报错,错误码17002 解决办法: 右键,点击properties 属性,检查每一项配置,发现ip 是之前的ip,更改为database ...

  4. Linux下用火焰图进行性能分析【转】

    转自:https://blog.csdn.net/gatieme/article/details/78885908 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...

  5. OpenStack Train版 简单部署流程

    environment 1.网络平面 management(管理网络)→软件安装,组件通信 provider(提供实例网络)→:提供者网络:直接获取ip地址,实例之间直接互通   自服务网络(私有网络 ...

  6. 深度学习中目标检测Object Detection的基础概念及常用方法

    目录 关键术语 方法 two stage one stage 共同存在问题 多尺度 平移不变性 样本不均衡 各个步骤可能出现的问题 输入: 网络: 输出: 参考资料 What is detection ...

  7. 201871010131-张兴盼《面向对象程序设计（java）》第十三周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  8. Cmakelists.txt 的基本框架

    # 执行 cmake . # 表示在当前目录下执行 cmake cmake .. # 表示在前一级目录下执行 cmake make # 在当前目录下执行 make # 语法 #1 设置 cmake 版 ...

  9. Docker容器数据卷（七）

    Docker致力于: 将运用与运行的环境打包形成容器运行 ,运行可以伴随着容器,但是我们对数据的要求希望是持久化的 容器之间希望有可能共享数据 Docker容器产生的数据,如果不通过docker co ...

  10. 八种排序算法原理及Java实现

    原文链接:http://ju.outofmemory.cn/entry/372908