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 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
JavaScript运行原理分析
Feb 09 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
JS Canvas接口和动画效果大全
Apr 29 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
重置版战役片段
2020/04/09 魔兽争霸
在PHP中执行系统外部命令
2006/10/09 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
python使用7z解压apk包的方法
2015/04/18 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python网络编程详解
2017/10/31 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python jieba库分词模式实例用法
2021/01/13 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
班训口号大全
2014/06/18 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
陪护人员误工证明
2015/06/24 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS