在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 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
Swiper实现导航栏滚动效果
Oct 16 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Python字典dict常用方法函数实例
2020/11/09 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
满月酒答谢词
2014/01/14 职场文书
年终考核评语
2014/01/19 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
药剂专业求职信
2014/06/20 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
后备干部推荐材料
2014/12/24 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python
Windows server 2016服务器基本设置
2022/08/14 Servers