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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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模型Model类封装数据库操作示例
2019/03/14 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
js图片预加载示例
2014/04/30 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
详解Python中的正则表达式
2018/07/08 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python更新所有已安装包的操作
2020/02/13 Python
pygame实现飞机大战
2020/03/11 Python
基于Python绘制个人足迹地图
2020/06/01 Python
树莓派升级python的具体步骤
2020/07/05 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
Farnell德国:电子元器件供应商
2018/07/10 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
python获取对象信息的实例详解
2021/07/07 Python