前端开发很容易会遇到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. 【初识Spring】对象(Bean)实例化及属性注入(xml方式)

    title: [初识Spring]对象(Bean)实例化及属性注入(xml方式) date: 2018-08-29 17:35:15 tags: [Java,Web,Spring] --- #初识S ...

  2. 英语rhodita铑金RHODITA单词

    铑金RHODITA,铑属铂系元素.铂系元素几乎完全成单质状态存在,高度分散在各种矿石中,例如原铂矿.硫化镍铜矿.磁铁矿等.铂系元素几乎无例外地共同存在,形成天然合金.在含铂系元素矿石中,通常以铂为主要 ...

  3. undefined reference to `BN_new'

    出现如下错误 undefined reference to `BN_CTX_new' undefined reference to `BN_new' undefined reference to `B ...

  4. afnetwork使用

    Usage HTTP Request Operation Manager AFHTTPRequestOperationManager encapsulates the common patterns ...

  5. 基于JieBaNet+Lucene.Net实现全文搜索

    实现效果: 上一篇文章有附全文搜索结果的设计图,下面截一张开发完成上线后的实图: 基本风格是模仿的百度搜索结果,绿色的分页略显小清新. 目前已采集并创建索引的文章约3W多篇,索引文件不算太大,查询速度 ...

  6. nodejs实现简单爬虫

    nodejs结合cheerio实现简单爬虫 let cheerio = require("cheerio"), fs = require("fs"), util ...

  7. 【洛谷P5331】 [SNOI2019]通信

    洛谷 题意: \(n\)个哨站排成一列,第\(i\)个哨站的频段为\(a_i\). 现在每个哨站可以选择: 直接连接到中心,代价为\(w\): 连接到前面某个哨站\(j(j<i)\),代价为\( ...

  8. Appium基础:Desired Capabilities详讲

    Desired Capabilities在启动session的时候是必须提供的,先看如下代码: Desired Capabilities本质上是key value的对象,他告诉appium serve ...

  9. 代码审计-extract变量覆盖

    <?php $flag='xxx'; extract($_GET); if(isset($shiyan)) { $content=trim(file_get_contents($flag)); ...

  10. jmeter请求参数中文乱码及无法读取CSV文件解决办法

    解决办法:参考http://blog.csdn.net/u012167045/article/details/70868306 版本:2.6 我是修改请求http请中的编码为Content encod ...