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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 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调用时间格式的参数详解
2013/06/06 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python安装教程
2018/02/28 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Python编写打字训练小程序
2019/09/26 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
判断单链表中是否存在环
2012/07/16 面试题
美德少年事迹材料
2014/01/23 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
实习工作表现评语
2014/12/31 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python