加载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 html 静态页面传参数
Apr 10 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 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
javascript编程起步(第四课)
2007/01/10 Javascript
用jquery来定位
2007/02/20 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
Python拼接字符串的7种方法总结
2018/11/01 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Django实现跨域的2种方法
2019/07/31 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
应用心理学个人求职信范文
2013/12/11 职场文书
四风存在的原因分析
2014/02/11 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
2016七夕情人节寄语
2015/12/04 职场文书