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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 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 日常开发小技巧
2009/09/23 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
JavaScript事件列表解说
2006/12/22 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
javascript每日必学之封装
2016/02/23 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
ES6中module模块化开发实例浅析
2017/04/06 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python中update的基本使用方法详解
2019/07/17 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python中tab键是什么意思
2020/06/18 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
实习自我鉴定范文
2013/10/30 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
保护环境建议书
2014/03/12 职场文书
办公经费申请报告
2015/05/15 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
linux下安装redis图文详细步骤
2021/12/04 Redis
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL