加载jQuery后$冲突的解决办法
更新时间：2010年07月09日 19:50:00 作者：
因为jquery中也有$调用，如果原来已经定义了，难免会冲突。下面是一些解决思路。
网站开发中的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东西还真不少。
Use那个勾上上，可千万别选Regular expressions，因为在右边清楚的显示$表示End of Line。Look In那个当然选Current Project，当然右边的按钮按下后可以选多个目录来框定反问，这个倒是以前完全没用过的。Look at these file types可以选定特殊的一些文件类型来缩小范围。
复制代码 代码如下:
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东西还真不少。
Use那个勾上上，可千万别选Regular expressions，因为在右边清楚的显示$表示End of Line。Look In那个当然选Current Project，当然右边的按钮按下后可以选多个目录来框定反问，这个倒是以前完全没用过的。Look at these file types可以选定特殊的一些文件类型来缩小范围。
相关文章
从这一讲开始，我们将直正接触一个JQ类库，学习一下JQ的写法，JQ的一些常用的命令等等，今天主要讲的是JQ里的选择器，这也是JQ的一大特点，这从它的名称jQuery中可以看到，主要功力体现在查询上2013-01-01
这篇文章主要介绍了jquery加载图片时以淡入方式显示的方法,涉及hide与fadeIn等方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
解析jQuery的三种bind/One/Live事件绑定使用方法
本篇文章主要是对jQuery的三种bind/One/Live事件绑定使用方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
如果你还在犹豫是否要学习一个JavaScript框架，并困惑于选择哪一个框架，那么我推荐你选择jQuery。这并非说其它框架不好，只是jQuery可能是最稳妥和最具回报性的选择。2010-06-06
这篇文章主要介绍了jQuery简单自定义图片轮播插件及用法,结合实例形式分析了jQuery基于时间函数动态修改页面元素属性实现图片轮播功能的相关操作技巧,需要的朋友可以参考下2016-11-11
js获取方法要比jq的方法麻烦的多，主要是因为FF浏览器，因为FF浏览器也会把换行当作dom元素，下面跟着小编一起来学习js jquery获取当前元素的兄弟级 上一个 下一个元素的，需要的朋友一起来学习吧2015-09-09
jquery利用event.which方法获取键盘输入值的代码
jquery利用event.which方法获取键盘输入值的代码，需要的朋友可以参考下。2011-10-10
使用id，这个方法可以在生成html的时候动态设置tr的id，也是用得最多最简单的一种，其他方法祥看本文2014-06-06
下面小编就为大家带来一篇浅谈JQ中mouseover和mouseenter的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。2016-09-09
这篇文章主要介绍了jQuery时间日期三级联动的实现代码，代码简答易懂，非常实用，需要的朋友参考下吧2016-11-11
最新评论