在jQuery中使用$而避免跟其它库产生冲突的方法


Posted in Javascript onAugust 13, 2015

在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 设置为 no-conflict 模式后,可以给$设置个别名:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

如果还想继续是用 jQuery 的$,需要将代码包含在一个自执行的函数内,这也是一些 jQuery 插件作者的通用做法,因为这些作者并不知道项目中是否引用了其它库:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
  // 这里依然可以继续使用 jQuery 的 $
})(jQuery);
</script>

二.自定义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>

代码

<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库的,而这种语句块的写法却能屏蔽冲突。

Javascript 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
JS 树形递归实例代码
May 18 Javascript
JavaScript之自定义类型
May 04 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 #Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 #Javascript
JavaScript生成SQL查询表单的方法
Aug 13 #Javascript
对于jQuery性能的一些优化建议
Aug 13 #Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 #Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 #Javascript
理解和运用JavaScript的闭包机制
Aug 13 #Javascript
You might like
PHP中的cookie
2006/11/26 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
Javascript this 的一些学习总结
2012/08/02 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
JS常用算法实现代码
2016/11/14 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
Python如何读取、写入CSV数据
2020/07/28 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
机械工程师求职自我评价
2013/09/23 职场文书
生产总经理岗位职责
2013/12/19 职场文书
总裁助理岗位职责
2014/02/17 职场文书
开业主持词
2014/03/21 职场文书
求职意向书范文
2014/04/01 职场文书
五水共治一句话承诺
2014/05/30 职场文书
国庆节活动总结
2014/08/26 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
未婚证明书模板
2014/10/08 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2014年社区工作总结
2014/11/18 职场文书
任命通知范文
2015/04/21 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
高一数学教学反思
2016/02/18 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS