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+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
深入分析javascript中console命令
Aug 14 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
关于Vue中$refs的探索浅析
Nov 05 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 404错误页面实现代码
2009/06/22 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
浅谈Django REST Framework限速
2017/12/12 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
大学生求职推荐信
2013/11/27 职场文书
工作睡觉检讨书
2014/02/25 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
地球一小时活动总结
2015/02/27 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL