加载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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
js取整数、取余数的方法
May 11 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 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/03/28 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
React key值的作用和使用详解
2018/08/23 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
Python3 合并二叉树的实现
2019/09/30 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
秋季运动会表扬稿
2014/01/16 职场文书
文秘求职信范文
2014/04/10 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
pytorch fine-tune 预训练的模型操作
2021/06/03 Python