加载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 相关文章推荐
自动更新作用
Oct 08 Javascript
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
Vue自定义多选组件使用详解
Sep 08 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
B2K与车机的中波PK
2021/03/02 无线电
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python 实现两个npy档案合并
2020/07/01 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
python递归函数用法详解
2020/10/26 Python
python设置中文界面实例方法
2020/10/27 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
企业演讲稿范文
2013/12/28 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
软件项目实施计划书
2014/05/02 职场文书
2014年党务公开方案
2014/05/08 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
Python基础知识学习之类的继承
2021/05/31 Python