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 相关文章推荐
jQuery之日期选择器的深入解析
Jun 19 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
js实现缓动动画
Nov 25 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
js实现登录与注册界面
2017/11/01 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
js实现小星星游戏
2020/03/23 Javascript
python 合并文件的具体实例
2013/08/08 Python
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
python中dir函数用法分析
2015/04/17 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
大学生毕业求职信
2014/06/12 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
无工作证明怎么写
2015/06/15 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
企业愿景口号
2015/12/25 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技