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 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
element实现合并单元格通用方法
Nov 13 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
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
python发送邮件功能实现代码
2016/07/15 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
教师自我鉴定范文
2014/03/20 职场文书
商铺租赁意向书
2014/04/01 职场文书
双拥工作宣传标语
2014/06/26 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers