如何解决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 substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
vue-router传参用法详解
Jan 19 Javascript
一文了解Vue中的nextTick
May 06 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
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php在线代理转向代码
2012/05/05 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PDO::errorInfo讲解
2019/01/28 PHP
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
定制FileField中的上传文件名称实例
2017/08/23 Python
python模块之paramiko实例代码
2018/01/31 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
实例代码讲解Python 线程池
2020/08/24 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
培训协议书范本
2014/04/22 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
节电标语大全
2014/06/23 职场文书
垂直极限观后感
2015/06/08 职场文书
离婚财产分割协议书
2015/08/11 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android