如何解决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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
js实现文字截断功能
Sep 14 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 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
一个显示天气预报的程序
2006/10/09 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
HTTP 304错误的详细讲解
2013/11/13 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python管理Windows服务小脚本
2018/03/12 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
python列表的逆序遍历实现
2020/04/20 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
家长给孩子的表扬信
2014/01/17 职场文书
机关单位动员会主持词
2014/03/20 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
中学生打架检讨书
2014/10/13 职场文书
红白喜事主持词
2015/07/06 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL