加载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 相关文章推荐
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
JavaScript中的作用域链和闭包
2012/06/30 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Python requests模块session代码实例
2020/04/14 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
小学生自我评价范例
2013/09/24 职场文书
八一演出活动方案
2014/02/03 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
申论倡议书范文
2014/05/13 职场文书
2019销售早会主持词
2019/06/27 职场文书