加载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 相关文章推荐
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
德生PL660的电路分析和打磨
2021/03/02 无线电
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Python实现画图软件功能方法详解
2020/07/28 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
群众路线党员自我评议范文2014
2014/09/24 职场文书
医德医风学习心得体会
2016/01/25 职场文书
小学四年级作文之写景
2019/08/23 职场文书
导游词之潮音寺
2019/09/26 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python