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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 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读取文件内容的方法汇总
2015/01/24 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
PyTorch中的Variable变量详解
2020/01/07 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
乐观大学生的自我评价
2014/01/10 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
大学生找工作求职信
2014/07/09 职场文书
医院党员公开承诺书
2014/08/30 职场文书
我的生日感言
2015/08/03 职场文书