jQuery中 $ 符号的冲突问题及解决方案


Posted in Javascript onNovember 04, 2016

在jQuery中,$是jQuery的别名,为了书写方便,我们更习惯用$('#id')这一类的方式来书写代码。当同一页面引用了jQuery多个版本或者jQuery与某些其他js库产生冲突,控制台就会报错。

同一个页面多个版本冲突解决办法

你可能会问,为什么在一个页面上会引用多个版本的jQuery,只引用一个不就好了吗?

答案是:不行。一般要用到两个(或以上)版本的jQuery库的原因是:现有的网站已经用了旧版本的jQuery以及相关插件,直接将jQuery升级到新版本会导致这些基于旧版本jQuery的插件不能工作,除非你能把这些插件全部升级,或者等各个插件的作者发布支持新版本jQuery的插件版本。

解决办法:使用jQuery.noConflict([extreme])方法。

比如我引用的是jquery-1.11.0.js和jquery-1.5.0.js。

<script src="jquery-1.5.0.js"></script>
<script src="jquery-1.11.0.js"></script>
<script>
console.log($.fn.jquery); //'1.11.0'
var $jq = jQuery.noConflict(true);
console.log($.fn.jquery); //'1.5.0'
</script>

可以看到jQuery.noConflict将变量 $ 的控制权让渡给了1.5.0版本的jQuery库。而要使用1.11.0的版本则要用 $jq() 代替。

但是引入了两个版本的jQuery后,代码很乱,导致别人难以理解甚至误删了一些重要代码怎么办?

改进的方法是:

先直接引用新版的jQuery库。

<script src="jquery-1.11.0.js"></script>
<script src="myJS.js"></script>

把我们写的脚本myJS.js中的主体内容写在立即调用函数里头,引用的是新的版本的jQuery。

//myJS.js
(function() {
//myJS.js的代码,引用的是v1.11.0
})();

再写一个立即调用函数,把旧版本的jQuery代码嵌进去(压缩代码只有几行)。然后在里面写代码,此时变量$所引用的前面嵌进去的jQuery

//myJS.js
(function () {
//...此处省略/jquery1.5.0
//jquery1.5.0的压缩代码
var $ = jQuery.noConflict(true);
//此处开始写的$()所引用的是jquery1.5.0
})();

Ps:需要检查jQuery的协议是否允许我们把jQuery源码直接嵌入我们自己的JavaScript代码

2. 同一页面jQuery和其他js库冲突解决方法

①依然可以使用jQuery.noConflict将变量$的控制权让渡给其他js库。

如果jQuery在其他js库前,不需要使用noConflict。 

<!-- 引入 jquery库 -->
<script src="jquery-1.11.0.js"></script>
<script type="text/javascript">
var $jq = $;
console.log($.fn.jquery); //'1.11.0'
</script>
<!-- 引入 其他库-->
<script type="text/javascript">
$ = {
fn:{
jquery:"otherJS"
}
};
</script>
<script type="text/javascript"> 
console.log($.fn.jquery); //otherJS
console.log($jq.fn.jquery); //'1.11.0'
</script>

如果在其他js库之后,用noConflict让渡。

<!-- 引入 其他库-->
<script type="text/javascript">
$ = {
fn:{
jquery:"otherJS"
}
};
</script>
<!-- 引入 jquery库 -->
<script src="jquery-1.11.0.js"></script>
<script type="text/javascript"> 
console.log($.fn.jquery); //'1.11.0'
var $180 = $.noConflict(); //解除冲突
console.log($.fn.jquery); //otherJS
console.log($jq.fn.jquery); //'1.11.0'
</script>

它的缺点是:在接下来的js代码中只要引用到jQuery就必须把$换成$jq。

②ready函数是jquery的入口函数

可以将

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

替换成:

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

它的缺点是:只对ready嵌套内的代码有效,如果ready函数外还有一些子函数,对嵌套外的代码是无效的。

③把$作为参数传进去

(function($) { 
//你的js代码 
})(jQuery);

或者

jQuery(function($){ 
//你的js代码
}

你的js代码可以包括上面说到的ready函数和子函数。在用jQuery写公共组件的时候,使用这种方式既能避免$冲突,又无需要求使用公共组件的人修改自己的代码。

以上所述是小编给大家介绍的jQuery中 $ 符号的冲突问题及解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
vue跨域解决方法
Oct 15 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
详解vue表单——小白速看
Apr 08 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
Vue程序调试的方法
Jun 17 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 #Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 #Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 #Javascript
AngularJS过滤器filter用法实例分析
Nov 04 #Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 #Javascript
Angular页面间切换及传值的4种方法
Nov 04 #Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 #Javascript
You might like
PHP的面试题集
2006/11/19 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
Python字符串格式化
2015/06/15 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
使用python绘制二维图形示例
2019/11/22 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
会计毕业生自荐书
2014/06/12 职场文书
社区服务活动小结
2014/07/08 职场文书
2019销售早会主持词
2019/06/27 职场文书