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 eval和JSON之间的联系
Dec 31 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
javaScript Array api梳理
Mar 31 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+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python制作小说爬虫实录
2017/08/14 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Django中的session用法详解
2020/03/09 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
医校毕业生自我鉴定
2014/01/25 职场文书
专题组织生活会方案
2014/06/15 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
关于运动会的广播稿
2014/09/22 职场文书
初中教师个人工作总结
2015/02/10 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS