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 arguments 传递给函数的隐含参数
Aug 21 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
node.js从数据库获取数据
May 08 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 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
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
JS Date函数整理方便使用
2013/10/23 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
python3 读写文件换行符的方法
2018/04/09 Python
对python中的pop函数和append函数详解
2018/05/04 Python
使用tensorflow实现线性回归
2018/09/08 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
应聘英语教师求职信
2014/04/24 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
经营目标管理责任书
2014/07/25 职场文书
2014年护士长工作总结
2014/11/11 职场文书
护士自荐信范文
2015/03/25 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python