加载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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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请求远程地址设置超时时间的解决方法
2016/10/29 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
javascript的对话框详解与参数
2007/03/08 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
nodejs教程之入门
2014/11/21 NodeJs
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python中的多重装饰器
2015/04/11 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
汇智创新科技发展有限公司
2015/12/06 面试题
大四学生思想汇报
2014/01/13 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
政风行风评议整改方案
2014/09/15 职场文书
教师听课评语大全
2014/12/31 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
编写python程序的90条建议
2021/04/14 Python
python中的plt.cm.Paired用法说明
2021/05/31 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技