加载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 相关文章推荐
jQuery源码分析之Event事件分析
Jun 07 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
canvas绘制的直线动画
Jan 23 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
vue addRoutes路由动态加载操作
Aug 04 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
跟我学Laravel之路由
2014/10/15 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
php格式文件打开的四种方法
2018/02/24 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
javascript获取当前ip的代码
2009/05/10 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
学习Vue组件实例
2018/04/28 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python Socket编程之多线程聊天室
2018/07/28 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python多线程使用方法实例详解
2019/12/30 Python
为什么称python为胶水语言
2020/06/16 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Python绘制组合图的示例
2020/09/18 Python
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
学校运动会开幕演讲稿
2014/01/04 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
家长给孩子的评语
2014/01/30 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
导游词之上海豫园
2019/10/24 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
MySQL 分组查询的优化方法
2021/05/12 MySQL
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
Vue Element plus使用方法梳理
2022/12/24 Vue.js