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 判断数组是否已包含了某个元素的函数
May 30 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
javascript打开word文档的方法
Apr 16 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
js如何打印object对象
Oct 16 Javascript
解决vue移动端适配问题
Dec 12 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
理解JavaScript原型链
2016/10/25 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
Python创建日历实例
2014/08/21 Python
常见python正则用法的简单实例
2016/06/21 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
乡下人家教学反思
2014/02/01 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
山楂树之恋观后感
2015/06/11 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers