加载jQuery后$冲突的解决办法


Posted in Javascript onJuly 09, 2010

网站开发中的javasript部分,现在的开发人员很少有再去手工写document.getElementById()的了吧,那还不得累死,你还真别说,getElementById还真不好写,字母还挺多又区分大小写,一不留神就写错了。因此一下诸如用$来实现document.getElemetnById()就常见了。

function $() { 
var elements = new Array(); 
for (var i = 0; i < arguments.length; i++) { 
var element = arguments[i]; 
if (typeof element == 'string') 
element = document.getElementById(element); 
if (arguments.length == 1) 
return element; 
elements.push(element); 
} 
return elements; 
}

微软的asp.net ajax客户端框架也有类似用$get来实现的代码。
var $get = Sys.UI.DomElement.getElementById = function Sys$UI$DomElement$getElementById(id, element) { 
/// <param name="id" type="String"></param> 4.5. 
/// <param name="element" domElement="true" optional="true" mayBeNull="true"></param> 6.7. 
/// <returns domElement="true" mayBeNull="true"></returns> 8.9. 
var e = Function._validateParams(arguments, [ 
{name: "id", type: String}, 
{name: "element", mayBeNull: true, domElement: true, optional: true} 
]); 
if (e) throw e; 
if (!element) return document.getElementById(id); 
. if (element.getElementById) return element.getElementById(id); 
// Implementation for browsers that don't have getElementById on elements: 28.29. 
var nodeQueue = []; 
var childNodes = element.childNodes; 
for (var i = 0; i < childNodes.length; i++) { 
var node = childNodes[i]; 
if (node.nodeType == 1) { 
nodeQueue[nodeQueue.length] = node; 
} 
} 
while (nodeQueue.length) { 
node = nodeQueue.shift(); 
if (node.id == id) { 
return node; 
} 
childNodes = node.childNodes; 
for (i = 0; i < childNodes.length; i++) { 
node = childNodes[i]; 
if (node.nodeType == 1) { 
nodeQueue[nodeQueue.length] = node; 
} 
} 
} 
return null; 
}

由于jQuery的简约、优美,更重要的是被微软所大力推广,因此在项目中引入jQuery就显得自然而必然,jQuery采用$函数来返回一个jQuery对象,也就是$=jQuery,引入jQuery后针对$符号问题必然产生冲突,因此主要有2个思路来解决。
一、利用jQuery.noConfict()使得$$等于jQuery,代码为$$=jQuery.noConflict()。这样需要做一下几件事
1、在包含jQuery以及基于jQuery的javasript代码文件中最后加上$$=jQuery.noConflict(),jQuery的VS智能提示文件(jQueryXXX ?vsdoc.js)也最后的window.jQuery = window.$ = jQuery;也改成window.jQuery = window.$$ = jQuery;好了。
2、基于jQuery的插件和扩展文件最前面加上$=jQuery.noConflict();最后面加上$$=jQuery.noConflict();。
3、原有的$的实现文件中,最上面加上jQuery.noConflict()表示将$的“权力”交给其他我们自己的js文件,然后文件最后面加上$$=jQuery.noConflict()。
4、页面引入js的时候注意顺序,jQuery的相关文件放前面,与jQuery不相关的文件放后面。
这样做了之后,$还是表示以前的含义,而使用jQuery则直接用jQuery或者$$就可以了。
优点:只需要改几个文件就能达到目的。
缺点:$$使用起来并不顺手,以后引入jQuery插件时都需要按步骤2进行操作一次。

二、将原有的$进行替换,经过考虑后我采用的第二种方法,因为jQuery在以后的项目中将被广泛使用,使用$$或者jQuery来写代码毕竟别扭。考虑到asp.net ajax的兼容性,因此将原有$替换成$get。用Visual Studio来做替换到也不难

,但也还需要一点步骤。
1、首先用$get("替换掉$(",然后是用$get(‘替换掉$(',最后才是$get替换成$。
2、替换的时候利用VSS的签出提示功能,一个一个文件进行一定的确认(要是出了差错那可不是小事)。最后还是出了一些小问题,在同事的协助下也基本解决了。
3、Visual Studio的替换功能还真是袖里有乾坤,如下的一个Replace in Files东西还真不少。
加载jQuery后$冲突的解决办法
Use那个勾上上,可千万别选Regular expressions,因为在右边清楚的显示$表示End of Line。Look In那个当然选Current Project,当然右边的按钮按下后可以选多个目录来框定反问,这个倒是以前完全没用过的。Look at these file types可以选定特殊的一些文件类型来缩小范围。

Javascript 相关文章推荐
javascript设计模式 接口介绍
Jul 24 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
javascript实现日期格式转换
Dec 16 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 #Javascript
jquery multiSelect 多选下拉框
Jul 09 #Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 #Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 #Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 #Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 #Javascript
JQuery从头学起第三讲
Jul 06 #Javascript
You might like
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP数组相关函数汇总
2015/03/24 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
Vue的轮播图组件实现方法
2018/03/03 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
Python heapq使用详解及实例代码
2017/01/25 Python
python之django母板页面的使用
2018/07/03 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python socket模块方法实现详解
2019/11/05 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
python 实现按对象传值
2019/12/26 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
浅析Python 序列化与反序列化
2020/08/05 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
视光学毕业生自荐书范文
2014/02/13 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
银行实习推荐信
2015/03/27 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
建议书的格式及范文
2015/09/14 职场文书
以下牛机,你有几个
2022/04/05 无线电
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers