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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
动态加载jQuery的方法
Jun 16 Javascript
js中数组的常用方法小结
Dec 30 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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手册及PHP编程标准
2006/12/17 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php随机显示图片的简单示例
2014/02/15 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
jquery中radio checked问题
2015/03/16 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
canvas实现钟表效果
2017/02/13 Javascript
js实现登录与注册界面
2017/11/01 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
python装饰器decorator介绍
2014/11/21 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python实现FTP循环上传文件
2020/03/20 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
如何设置Java的运行环境
2013/04/05 面试题
介绍一下Linux中的链接
2016/06/05 面试题
物流管理毕业生自荐信范文
2014/03/15 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
中秋节主题班会
2015/08/14 职场文书
投资入股协议书
2016/03/22 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python