加载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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 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安全开发库中文详细介绍
2015/03/22 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
Python自动发邮件脚本
2017/03/31 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python实现海螺图片的方法示例
2019/05/12 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python猜数字算法题详解
2020/03/01 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
外包公司软件测试工程师
2014/11/01 面试题
自我鉴定书范文
2013/10/02 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
客房服务员岗位职责
2015/02/09 职场文书
工程催款通知书
2015/04/17 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技