加载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 相关文章推荐
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
js实现上传图片及时预览
May 07 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
vue开发中遇到的问题总结
Apr 07 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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python获取文件扩展名的方法
2015/07/06 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
对python中dict和json的区别详解
2018/12/18 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
新学期家长寄语
2014/01/19 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
2014年秘书工作总结
2014/11/25 职场文书
文明班级申报材料
2014/12/24 职场文书
房产电话营销开场白
2015/05/29 职场文书
新闻稿格式范文
2015/07/18 职场文书
学校教代会开幕词
2016/03/04 职场文书
python数字图像处理:图像简单滤波
2022/06/28 Python