jQuery解决$符号命名冲突


Posted in Javascript onJune 18, 2016

前些天朋友让我帮他解决一个页面中jquery特效的兼容性问题,觉得这是一个很容易忽略也很重要的一点,特在此记录一下。

朋友给的页面中用到了三个特效,其中两个特效可以显示,第三个没有效果。通过查看引用的js文件,我发现页面中不光引入了jquery.js,还引入了一个名为prototype.js的文件。 这个prototype.js之前未曾听说过,特意在百度上搜了一下,原来它也是一个js类库,功能和jquery差不多,而且很强大。

通过一点点的排查,我发现那两个可以显示的特效引用的是jquery,而不显示的那个特效引用的是这个prototype.js。 稍一分析,终于找到了出错的关键:jquery中的$和prototype.js中的$冲突了,两个类库中都是通过$符号来调用,然而如果直接这样写的话就会不知道这个$是属于谁的,该调用哪个类库中的方法来实现特效的显示。

既然找到了问题的根结所在,那这个问题也就好解决了。

方法一:在jquery中,有这样一段代码:

// Expose jQuery to the global object

window.jQuery = window.$ = jQuery;

也就是说,我们可以通过jQuery来代替jquery.js中的$符号进行调用,前提必须声明一下:

jQuery = $;

那,新的问题又出现了。页面中有那么多地方用到了$,我不仅要区分到底哪些$是属于jquery的,还要将这些$替换成jQuery这个单词,更严重的是,如果该页面中要增加新的jquery特效,我还要时刻的提醒自己,调用$的时候要用jQuery来代替,稍一疏忽,不仅出不来想要的效果,而且修改起来也是一个大工作量的任务。看来,这种方法是行不通的。

难道就没有一个一劳永逸的方法可以将这个$的"归属权"给明确的区分出来吗?办法当然是有的!

方法二:使用jquery语句块来实现:

首先,来看一下jquery语句块的格式:

(function($){ 
 ..... 
 $('#msg').show();//此时在这个语句块中使用的都是jquery.js中定义的$. 

})(JQuery)

这样,我们在调用jquery中的$实现特效显示时,只要把这段代码写在这个语句块中,$符号该怎么调用还怎么调用。而prototype.js中的$写在语句块外,$符号也是该怎么调用怎么调用,两者根本不会产生什么影响了。

以上就是本文的全部内容,希望这个方法也能给遇到相同问题的其他人带来帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript prototype对象的属性说明
Mar 13 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
node.js实现端口转发
Apr 14 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
js实现弹幕墙效果
Dec 10 Javascript
prototype.js常用函数详解
Jun 18 #Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 #Javascript
Javascript中prototype的使用详解
Jun 18 #Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 #Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 #Javascript
JavaScript的this关键字的理解
Jun 18 #Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 #Javascript
You might like
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
javascript事件问题
2009/09/05 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
学习python处理python编码问题
2011/03/13 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python 求数组局部最大值的实例
2019/11/26 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
《开国大典》教学反思
2014/04/19 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
美术学专业求职信
2014/07/23 职场文书
社区党员公开承诺书
2014/08/30 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
离婚协议书范文
2015/01/26 职场文书
自考生自我评价
2019/06/21 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL