加载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 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 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笔记之:AOP的应用
2013/04/24 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python实现排序算法解析
2018/09/08 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
python中下标和切片的使用方法解析
2019/08/27 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
统计每一学生的平均成绩
2014/06/06 面试题
三年级科学教学反思
2014/01/29 职场文书
工会主席事迹材料
2014/06/03 职场文书
亮剑观后感
2015/06/05 职场文书
学术研讨会主持词
2015/07/04 职场文书
生产设备维护保养制度
2015/08/06 职场文书
windows安装python超详细图文教程
2021/05/21 Python
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
如何基于python实现单目三维重建详解
2022/06/25 Python