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 相关文章推荐
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
详解vue 组件
Jun 11 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
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
img标签中onerror用法
2009/08/13 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python获取邮件地址的方法
2015/07/10 Python
想学python 这5本书籍你必看!
2018/12/11 Python
django表单的Widgets使用详解
2019/07/22 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
建筑经济管理专业求职信分享
2014/01/06 职场文书
活动邀请函范文
2014/01/19 职场文书
幼师自我鉴定
2014/02/01 职场文书
亲子拓展活动方案
2014/02/20 职场文书
中国好声音华少广告词
2014/03/17 职场文书
合作经营协议书范本
2014/04/17 职场文书
创业培训计划书
2014/05/03 职场文书
珍惜资源的建议书
2014/08/26 职场文书
总经理司机岗位职责
2015/04/10 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js