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 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
js仿淘宝放大镜效果
Dec 28 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获取文件名后缀常用方法小结
2015/02/24 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
基于python的列表list和集合set操作
2019/11/24 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
正隆泰信息技术有限公司上机题
2012/06/14 面试题
会务接待方案
2014/02/27 职场文书
应用数学专业求职信
2014/03/14 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
节水口号标语
2014/06/19 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
募捐感谢信
2015/01/22 职场文书
医院感染管理制度
2015/08/05 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
python 单机五子棋对战游戏
2022/04/28 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python