加载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 UI的拖拽功能实现方法小结
Mar 14 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
在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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
销售部主管岗位职责
2013/12/18 职场文书
学生宿舍管理制度
2014/01/30 职场文书
公司薪酬管理制度
2014/01/31 职场文书
晚归检讨书
2014/02/19 职场文书
物业管理专业求职信
2014/06/11 职场文书
中国梦口号
2014/06/13 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python