如何解决Jquery库及其他库之间的$命名冲突


Posted in Javascript onSeptember 15, 2013

首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生。比如说:$('#xmlas')和JQuery('#xmlas') 虽然在写法上不同,但在实际上却是完全等同的。

要想解决这个冲突,其实最简单的方法就是使用不同的名称来命名,或者让执行代码认为是不同的命名空间即可。

一、 jQuery库在其他库之前导入,直接使用jQuery(callback)方法如:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先导入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--后导入其他库 -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>

二、jQuery库在其他库之后导入,使用jQuery.noConflict()方法将变量$的控制权让渡给其他库,有以下几种方式:

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

代码二

<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

代码三

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

代码四

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none'; //使用prototype
/*********************************************************************/
jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去
jQuery.noConflict();
});
</script>

除了上面的方法之外,我们还可以采用第二种方法来解决冲突的问题,那就是最笨但最有效的解决方法:用自定义的命名空间来避免冲突。
比如说需要的项目名称为xmlas,那么我们原来的代码:

$('contentArea').show()

就可以写成以下这种形式:

XMLAS('contentArea').show()

3.在jquery代码中,当遇到冲突的时候我们可以使用$符号,这需要我们在ready事件中添上以下代码:

jQuery(document).ready(function($) { 
//你在这里可以放心的使用$了 
});

当然,您也可以简写成下面的形式:

jQuery(function($){ 
//这里为使用$的代码 
});

由此,根据第一个方法来实现的完整代码如下:

//jquery库与其他库冲突的完整解决办法 
<script type="text/javascript" src="photolist.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$.noConflict(); 
jQuery(function($) { 
//使用了$的jquery代码 
}); 
//这里是你的其他js库代码 
</script>

 

当然,你也可以对上面的完整代码进行一步的简化,简化代码如下:

//简化后的代码 
$.noConflict()(function(){ 
//这里是你的带$的jquery代码 
}); 
//这里是其他库的代码
Javascript 相关文章推荐
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
js轮播图之旋转木马效果
Oct 13 Javascript
异步动态加载js与css文件的js代码
Sep 15 #Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 #Javascript
js左侧三级菜单导航实例代码
Sep 13 #Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 #Javascript
jquery mobile事件多次绑定示例代码
Sep 13 #Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 #Javascript
javascript仿php的print_r函数输出json数据
Sep 13 #Javascript
You might like
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
简单实现js浮动框
2016/12/13 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
vue实例的选项总结
2020/06/09 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python 统计字数的思路详解
2018/05/08 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
学生会竞选自荐信
2013/10/12 职场文书
走群众路线剖析材料
2014/10/09 职场文书
单位婚育证明范本
2014/11/21 职场文书
党支部考察意见范文
2015/06/02 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
JVM之方法返回地址详解
2022/02/28 Java/Android