JQuery的$命名冲突详细解析


Posted in Javascript onDecember 28, 2013

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

第一种情况:jquery.js在prototype.js之后进行引入,如:
<script src="prototype.js" type="text/javascript"/>
<script src="jquery.js" type="text/javascript"/>

在这种情况下,我们在自己的js代码中如下写的话:

$('#msg').hide();

$永远代表的是jquery中定义的$符号,也可以写成JQuery('#msg').hide();如果想要使用prototype.js中定义的$,我们在后面再介绍。

第二种情况:jquery.js在prototype.js之前进行引入,如:
<script src="jquery.js" type="text/javascript"/>
<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中的$,我们还是可以使用上面介绍的语句块的方法,如:

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 
(function($){ 
..... 
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
})(JQuery) 
</script>

这种使用语句块的方法非常有用,在我们自己写jquery插件时,应该都使用这种写法,因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

(function($){})(jQuery)

1 首先(function(){})()这种写法 是创建了一个匿名的方法并立即执行(function(){})这个是匿名方法后面的括号就是立即调用了这个方法)。
这样做可以创建一个作用域以保证内部变量与外部变量不发生冲突,比如$ jQuery 等jquery内部定义的变量。

2 (function($){})(jQuery) 这个写法主要的作用还是保证jquery不与其他类库或变量有冲突 首先是要保证jQuery这个变量名与外部没有冲突(jquery内部$与jQuery是同一个东西 有两个名字的原因就是怕$与其他变量名有冲突二jQuery与其他变量冲突的几率非常小)并传入匿名对象,匿名对象给参数起名叫做$(其实和jquery内部是一样的) 然后你就可以自由的在(function($){})(jQuery)里写你的插件而不需要考虑与外界变量是否存在冲突

Javascript 相关文章推荐
js下拉菜单语言选项简单实现
Sep 23 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
使用Vue生成动态表单
Nov 26 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
Vuex实现购物车小功能
Aug 17 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
js中call与apply的用法小结
Dec 28 #Javascript
SinaEditor使用方法详解
Dec 28 #Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 #Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 #Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 #Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 #Javascript
jquery改变tr背景色的示例代码
Dec 28 #Javascript
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python操作kafka实践的示例代码
2019/06/19 Python
python按比例随机切分数据的实现
2019/07/11 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
银行职员自我鉴定
2014/04/20 职场文书
十佳护士先进事迹
2014/05/08 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2015年质检工作总结
2015/05/04 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS