加载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实现的分页函数
Feb 07 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
PHP PDO操作总结
Nov 17 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
详解使用mpvue开发github小程序总结
Jul 25 Javascript
如何使用CocosCreator对象池
Apr 14 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注入点构造代码
2008/06/14 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
js操作select控件的几种方法
2010/06/02 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
vue实现购物车案例
2020/05/30 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
python和php哪个更适合写爬虫
2020/06/22 Python
用python制作个视频下载器
2021/02/01 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
2014年感恩节活动策划方案
2014/10/06 职场文书
夫妻吵架保证书
2015/05/08 职场文书
大国崛起日本观后感
2015/06/02 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS