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 生成指定范围数值随机数
Jan 09 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
Vue实现动态查询规则生成组件
May 27 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
深入理解React高阶组件
2017/09/28 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
使用Python读取大文件的方法
2018/02/11 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python感知机实现代码
2019/01/18 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
python的数学算法函数及公式用法
2020/11/18 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
演讲主持词
2014/03/18 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
决心书格式及范文
2019/06/24 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
nginx访问报403错误的几种情况详解
2022/07/23 Servers