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

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

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

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

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

<!-- 引入1.6.4版的jq -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>

<script> var jq164 = jQuery.noConflict(true); </script>

<!-- 引入1.4.2版的jq -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script> var jq142 = jQuery.noConflict(true); </script>

<script>

(function($) {

    // 此时的$是jQuery-1.6.4

    $('#');

})(jq164);

</script>

<script>

jq142(function($) {

    // 此时的$是jQuery-1.4.2

    $('#');

});

</script>

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

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

<script src="prototype.js" type="text/javascript"></script>

<script src="jquery.js" type="text/javascript"></script>

<p id="pp">test---prototype</p>

<p>test---jQuery</p>

<script type="text/javascript">

jQuery.noConflict(); // 将变量$的控制权让渡给prototype.js，全名可以不调用。

jQuery(function() { // 使用jQuery

    jQuery("p").click(function() {

        alert(jQuery(this).text() );

    });

});

// 此处不可以再写成$，此时的$代表prototype.js中定义的$符号

$("pp").style.display = 'none';        //使用prototype

</script>

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

<script type="text/javascript">

var $j = jQuery.noConflict();  // 自定义一个比较短的快捷方式

$j(function() { // 使用jQuery

    $j("p").click(function() {

        alert( $j(this).text() );

    });

});

$("pp").style.display = 'none'; // 使用prototype

</script>

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

<script type="text/javascript">

jQuery.noConflict(); // 将$符号的控制权让渡给prototype.js

jQuery(document).ready(function($) {

    $("p").click(function() { // 继续使用$符号

        alert( $(this).text());

    });

});

// 或者如下

jQuery(function($) { // 使用jQuery

    $("p").click(function() { // 继续使用$符号

        alert( $(this).text() );

    });

});

</script>
<script type="text/javascript">

jQuery.noConflict(); // 将$符号的控制权让渡给prototype.js

(function($) { // 定义匿名函数并设置形参为$

    $(function() { // 匿名函数内部的$均为jQuery

        $("p").click(function() { // 继续使用 $ 方法

            alert($(this).text());

        });

    });

})(jQuery); // 执行匿名函数且传递实参jQuery

$("pp").style.display = 'none'; // 使用prototype

</script>

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

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

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

<!-- 引入 jQuery  -->

<script src="../../scripts/jquery.js" type="text/javascript"></script>

<!-- 引入 prototype  -->

<script src="lib/prototype.js" type="text/javascript"></script>

<body>

<p id="pp">Test-prototype(将被隐藏)</p>

<p >Test-jQuery(将被绑定单击事件)</p>

<script type="text/javascript">

jQuery(function() { // 直接使用jQuery,没有必要调用"jQuery.noConflict()"函数

    jQuery("p").click(function(){

        alert(jQuery(this).text() );

    });

});

$("pp").style.display = 'none'; // 使用prototype

</script>

</body>

jQuery.noConflict()的原理

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

var

// Map over jQuery in case of overwrite

_jQuery = window.jQuery,

// Map over the $ in case of overwrite

_$ = window.$,

jQuery.extend({

    noConflict: function(deep) {

            if (window.$ === jQuery) {

                window.$ = _$;

            }

            if (deep && window.jQuery === jQuery) {

                window.jQuery = _jQuery;

            }

            return jQuery;

        }

});

首先，在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. Java生鲜电商平台-销售管理设计与架构

    Java生鲜电商平台-销售管理设计与架构 说明:在Java开源生鲜电商平台中,销售人员我们称为跟餐饮店老板沟通与下载APP的一类地推人员.(所谓地推指的就是一个一个上门拜访.) 由于销售人员有以下几类 ...

  2. 记一次CTF出题WP

    笔者有幸参与一次CTF入门级的出题,在此记录一下WP 1.测试你得手速 1.用IDA打开程序 找到单击次数, 获取全局变量地址. 打开程序 打开OllyDbg attcach后在左下角按CTRL+N ...

  3. Vim操作：打开文件

    1.打开文件并定位到某一行 vim +20 vendor/laravel/framework/src/Illuminate/Support/Facades/Facade.php # 定位至第20行 2 ...

  4. 中国爬虫违法违规案例汇总github项目介绍

    中国爬虫违法违规案例汇总github项目介绍 GitHub - 本项目用来整理所有中国大陆爬虫开发者涉诉与违规相关的新闻.资料与法律法规.致力于帮助在中国大陆工作的爬虫行业从业者了解我国相关法律,避免 ...

  5. iconfont采坑

    1. iconfont采坑 1.1. 前言 使用iconfont过程中踩过坑特此记录 不知道iconfont的这里也简单介绍一笔,阿里开放的一个图标素材库,用来快速找图标下载使用图标 iconfont ...

  6. 如何在linux CentOS 上安装chrome 谷歌浏览器？

    获得linux命令的root权限:http://blog.csdn.net/mddy2001/article/details/76521101. 更改密码在终端中输入:sudo passwd root ...

  7. 代码方式给控件添加背景图片（WPF）

    wpf中常常需要给控件添加背景图片,下边以wrapPanel为例,使用代码添加背景图片 WrapPanel xwraPanel = new WrapPanel(); ImageBrush ximgBr ...

  8. JS三座大山再学习 ---- 异步和单线程

    本文已发布在西瓜君的个人博客,原文传送门 前言 写这一篇的时候,西瓜君查阅了很多资料和文章,但是相当多的文章写的都很简单,甚至互相之间有矛盾,这让我很困扰:同时也让我坚定了要写出一篇好的关于JS异步. ...

  9. 跟着ALEX 学python day2 基础2 模块 数据类型 运算符 列表 元组 字典 字符串的常用操作

    声明 : 文档内容学习于 http://www.cnblogs.com/xiaozhiqi/  模块初始: Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相 ...

  10. 201871010101-陈来弟《面向对象程序设计（java)》第十五周学习总结

                                                                                                         ...