jQuery与其它库冲突的解决方法


Posted in Javascript onJune 25, 2010

(注意:默认情况下,jQuery用$作为自身的缩写而以)
如果jQuery类库和别的类库冲突的话,可以使用jQuerynoConflict()函数来将变量$的控制权移交出给其它的javaScipt库。看下面小片断代码
<script type="text/javascript" src="../JS/JsCOM.js"></script>
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
假设JsCOM.js库中,有这样一个函数

function $(objName) { 
if (document.getElementById) { 
return eval('document.getElementById("' + objName + '")') 
} 
else { 
return eval("document.all." + objName) 
}

大家都知道jQuery里面也一个这样的函数,为了不引起冲突,我们将jQuery的变量$的控制权移交出给别的javascript库
jQuery.noConflict(); //将变量$的控制权移交给JsCOM.js 
var $cr = jQuery("#cr"); //照样使用jQuery类库,只是用jQuery代替了原来的$而以。 
var JsCOM_cr = $("cr"); //使用JsCOM.js类库

在这里可以把jQuery()函数作为jQuery对象的制造工厂.
在这里要注意几点
1.引用javascript类库时,一定要把jQuery引用放在最后面,就像上面一样,JsCOM.js的引用在jQuery引用的前面(具体原因我也不知,不过确实需要这样)
2.特别要注意jQuery()代替$()时,jQuery是区分大小写的,因为javascript本身就是区分大小写的(好像说这个有点多余,不过还是希望大家不要犯这种错误)
基本上根据上面的
方法就可以解决jQuery和其它库的冲突问题了!
如果你觉得上面的方式不爽,每次都要打jQuery来代替$增加了您敲键盘的工作量,那请接着看。。
除上面之外,还有另一种选择。如果想确保jQuery不会与其它库冲突,但又想自定义一个快捷方式,可以进行如下操作;
var $j = jQuery.noConflict(); //自定一个快捷方式 
var $cr = $j("#cr"); //使用jQuery类库,得用自定义快捷方式----$j; 
var JsCOM_cr = $("cr"); //和上一段代码一样,使用的是JsCOM.js类库

如果您还有别的要求,想继续使用原先的$(),同时还需要与别的类库不冲突的话,还有两种解决方法
其一:
jQuery.noConflict(); //将变量$的控制权让给JsCOM.js 
jQuery(function($) 
{ 
$("p").click(function() //在函数内继续可以使用jquery类库的$()方法 
{ 
alert($(this).text()); 
}) 
}) 
var JsCOM_cr = $("cr"); // 在函数外面,照样可以使用JsCOM.js的$()方法

其二:
jQuery.noConflict(); //将变量$的控件权移交给别的类库,使用jquery类库的$符号时,请使用jQuery("#id"); 
(function($) { //定义匿名函数并设置形参为$ 
$(function() { //匿名函数内部的$均为jQuery 
$("div").click(function() {//继续使用$()方法 
alert($(this).text()); 
}) 
}) 
}) 
(jQuery); //使用匿名函数且传递实参jQUery 
alert($("cr")); //使用的是jsCOM.js类库中的$()函数

第二种方法应该是兼容旧的代码最好的方式,修改的代码是最少的!
不过如果是新写的jQuery代码,我还是比较喜欢使用刚开始讲的那种(jQuery.noConflict(),然后就使用jQuery("#id"),这种方式)
如果您的页面是先引用jQuery类库再引入别的类库的话,那么我们可以直接使用jQuery来做一些工作,同时,可以使用$()方法作为其它库的快捷方式。这里无需调用jQuery.noConflict()函数,请看下面代码
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script> 
<script type="text/javascript" src="../JS/JsCOM.js"></script> 
jQuery().ready(function() { //无需调用jQuery.noConflict()函数 
var $cr = jQuery("#cr"); 
$cr.click(function() { 
if ($cr.is(":checked")) { 
alert("感谢你的支持!你可以继续操作了.."); 
} 
}) 
}) 
alert($("cr")); //使用的是jsCOM.js类库中的$()函数

好了,看了上面这么多种方法来解决冲突,这下你可以放心的在您的项目中引用jQuery了吧 :)
Javascript 相关文章推荐
Javascript 类与静态类的实现(续)
Apr 02 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 #Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 #Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 #Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 #Javascript
javascript面向对象编程(一) 实例代码
Jun 25 #Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 #Javascript
jQuery对象和DOM对象使用说明
Jun 25 #Javascript
You might like
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
twig里使用js变量的方法
2016/02/05 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PDO::getAttribute讲解
2019/01/28 PHP
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python之Socket网络编程详解
2016/09/29 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python使用多进程的实例详解
2018/09/19 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python合并多个excel文件的示例
2020/09/23 Python
DataReader和DataSet的异同
2014/12/31 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
自荐书模板
2013/12/15 职场文书
卖车协议书范例
2014/09/16 职场文书
财政局个人年终总结
2015/03/03 职场文书
运动会宣传稿50字
2015/07/23 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
详解在OpenCV中如何使用图像像素
2022/03/03 Python