解决jquery中美元符号命名冲突问题


Posted in Javascript onJanuary 08, 2014

在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法。然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突。下面以引入两个库文件 jquery.js和prototype.js为例来进行说明。

第一种情况:jquery.js在prototype.js之后进行引入,如: <</span> script src = " prototype.js " type = " text/javascript " />
<</span> script src = " jquery.js " type = " text/javascript " />
在这种情况下,我们在自己的js代码中如下写的话:
$( ' #msg ' ).hide();
$永远代表的是jquery中定义的$符号,也可以写成JQuery('#msg').hide();如果想要使用prototype.js中定义的$,我们在后面再介绍。

第二种情况:jquery.js在prototype.js之前进行引入,如: <</span> script src = " jquery.js " type = " text/javascript " />
<</span> script src = " prototype.js " type = " text/javascript " />
在这种情况下,我们在自己的js代码中如下写的话:
$( ' #msg ' ).hide();
$此时代表的prototype.js中定义的$符号,如果我们想要调用jquery.js中的工厂选择函数功能的话,只能用全称写法JQuery('#msg').hide().

下面先介绍在第一种引入js库文件顺序的情况下,如何正确的使用不同的js库中定义的$符号。

一.使用JQuery.noConflict()
该方法的作用就是让Jquery放弃对$的所有权,将$的控制权交还给prototype.js,因为jquery.js是后引入的,所以最后拥有$控制权的是jquery。它的返回值是JQuery。当在代码中调用了该 方法以后,我们就不可以使用$来调用jquery的方法了,此时$就代表在prototype.js库中定义的$了。如下: JQuery.noConflict();
// 此处不可以再写成$('#msg').hide(),此时的$代表prototype.js中定义的$符号。
JQuey( ' #msg ' ).hide();
自此以后$就代表prototype.js中定义的$,jquery.js中的$无法再使用,只能使用jquery.js中$的全称JQuery了。

二.自定义JQuery的别名
如果觉得第一种方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全称比较麻烦的话,我们还可以为JQuery重定义别名。如下:
var $j = JQuery.noConflict();
$j( ' #msg ' ).hide(); // 此处$j就代表JQuery
自此以后$就代表prototype.js中定义的$,jquey.js中的$无法再使用,只能使用$j来作为jquey.js中JQuery的别名了。

三.使用语句块,在语句块中仍然使用jquery.js中定义的$,如下:
JQuery.noConflict();
JQuery(document).ready(function($){ $( ' #msg ' ).hide(); // 此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. }); 或者使用如下语句块:
(function($){ $( ' #msg ' ).hide(); // 此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery)
如果在第二种引入js库文件顺序的情况下,如何使用jquery.js中的$,我们还是可以使用上面介绍的语句块的方法,如:
<</span> script src = " jquery.js " type = " text/javascript " />
<</span> script src = " prototype.js " type = " text/javascript " />
<</span> script type = " text/javascript " >
(function($){ $( ' #msg ' ).hide(); // 此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery)
</</span> script >
这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

ps :jquery中特殊字符的含义:
#

指示 id 
.

指示 class 
*

全选 
,

多选 
空格 后代 
>

子 
~

兄弟 
+

下一个 
:

子(多功能) 
()

函数式的过滤与查找

Javascript 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
javascript this详细介绍
Sep 19 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
vue生命周期的探索
Apr 03 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
js实现拖动缓动效果
Jan 13 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 #Javascript
iframe窗口高度自适应的实现方法
Jan 08 #Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 #Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 #Javascript
js获取当前页面路径示例讲解
Jan 08 #Javascript
js获取当前路径的简单示例代码
Jan 08 #Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 #Javascript
You might like
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JS中Location使用详解
2015/05/12 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python生成圆形图片的方法
2020/03/25 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
详解python分布式进程
2018/10/08 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
软件工程师岗位职责
2013/11/16 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
大气污染防治方案
2014/05/19 职场文书
人事任命书范文
2014/06/04 职场文书
幼儿园个人总结
2015/02/28 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
企业员工辞职信范文
2015/05/12 职场文书
2015年暑期见闻
2015/07/14 职场文书
spring 项目实现限流方法示例
2022/07/15 Java/Android