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 radio 联动效果
Mar 04 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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实现建立多层级目录的方法
2014/07/19 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
javascript中数组array及string的方法总结
2014/11/28 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
python中文编码问题小结
2014/09/28 Python
python编程实现希尔排序
2017/04/13 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
python实现kNN算法
2017/12/20 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
英语教师自荐信
2014/05/26 职场文书
给校长的一封检讨书
2014/09/20 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server