整理jquery冲突的解决办法，以ecmall系统解决为例

今天调试项目的一个diy的问题时，发现diy的编辑框不出现了。这个diy是ecmall系统的。不出现后，个人觉得很奇怪，就开始分析查找原因。查找思路。

1.看看diy的模板是否有问题，精排查，代码没有动，应该没有问题。

2.对比下之前的备份代码。【我有个习惯，每开发一个功能就会备份一遍代码】，经对比没有变化。

3.问题就集中在了我新加入的jquery轮播的插件上了。diy用的也是jquery编写。为了测试，我把刚刚写的jquery插件删除，然后登陆后台进行模板编辑。此时就好了，所以我断定是jquery的老毛病，冲突了。

于是，搜集整理了一些解决jquery的冲突的办法。力求最全。

首先：jquery与其他js冲突的问题，如jquery与prototype。

问题描述：当我们引入多个js库后，在另外一个js库中也定义了$符号的话，那么我们在使用$符号时就发生了冲突。

第一种情况：jquery.js在prototype.js之后进行引入,如：

 < script src = " prototype.js " type = " text/javascript " /> 
 < script src = " jquery.js " type = " text/javascript " /> 　　

第二种情况：jquery.js在prototype.js之前进行引入,如：

< script src = " jquery.js " type = " text/javascript " /> 
 < script src = " prototype.js " type = " text/javascript " /> 

下面先介绍在第一种引入js库文件顺序的情况下，如何正确的使用不同的js库中定义的$符号。

     一.使用JQuery.noConflict()     该方法的作用就是让JQuery放弃对$的所有权，将$的控制权交还给prototype.js,因为jquery.js是后引入的，所以最后拥有$控制权的是JQuery。它的返回值是JQuery。当在代码中调用了该方法以后，我们就不可以使用$来调用JQuery的方法了，此时$就代表在prototype.js库中定义的$了。如下：

JQuery.noConflict();
JQuery('#msg').hide(); //此处不可以再写成$('#msg').hide(),此时的$代表prototype.js中定义的$符号。 

   如果觉得第一种方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全称比较麻烦的话，我们还可以为JQuery重定义别名。如下： 

var $j = JQuery.noConflict(); 
$j(‘#msg‘).hide(); // 此处$j就代表JQuery 

三.使用语句块，在语句块中仍然使用jquery.js中定义的$，如下：

JQuery.noConflict(); 
JQuery(document).ready(function($){ 
  $(‘#msg‘).hide();//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. 
});

 或者使用如下语句块： (function($){ $(‘#msg‘).hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery)

    如果在第二种引入js库文件顺序的情况下,如何使用jquery.js中的$,我们还是可以使用上面介绍的语句块的方法，如：

<script src = "jquery.js" type = "text/javascript" /> 
<script src = "prototype.js" type = "text/javascript" />
<script type="text/javascript">(function($){ 
  $(‘#msg‘).hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
  })(JQuery)
</script>

 这种使用语句块的方法非常有用，在我们自己写jquery插件时,应该都使用这种写法，因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

其次：jquery版本之间冲突问题的解决方案

案例：解决jQuery1.3.2和1.4.2的冲突。（本例已测试通过！）

第一步：在1.4.2的源代码的最后加上一句 ：

之所以在源码这里加，而不是像大多数文章提的在要用到的时候加，这是因为很多基于1.4.2的插件都要加，在这里加可以避免过多插件加这句代码导致重复。这一句是将1.4.2的jQuery和$的引用权限全部放弃。也就是基于1.4.2的插件不能再用jQuery和$了。同时给予$j4的新的命名空间，注意它是window的属性。看1.4.2的源代码会发现它其实也就执行了这两句：

道理同window.$=_temp$（返还命名空间）只是命名不同而已。

第二步：在基于1.4.2的框架的所有插件的头部加上以下代码：

将jQuery1.3.2的$和jQuery放到临时的变量空间上：

这句和下面的那句都是为了给中间的代码能够正确使用jQuery和$用的。后面的$j4是赋予他们正确的引用。

之所以要先放临时变量存储，有三点必须这样做的理由：

①.我们不希望改动大量的jQuery插件源代码，最好是不动，即使改的话，尽量改的少。而在头部尾部加改动代码，中间的原始代码不动也是不错的一种方式。

②.因为1.4.2的已经放弃了jQuery和$的控制权，但是已有的插件代码又用了他们来做引用，因为插件不可能预知冲突，即使有冲突他人开发的插件也一定要用$或者jQuery引用，除非它不是jQuery下的插件。

③.为了防止插件里面直接用window.$和window.jQuery进行引用从而导致引用到1.3.2的jQuery和$，虽然这种情况比较少，但是以防万一。

中间的原始代码不动，尾部加以下代码：

第三步：以后要用基于jQuery1.4.2的选取函数就只能用$j4(element)了。

总结：到目前为止可行方案：jQuery1.4.2完全放弃$和jQuery的控制权限。1.3.2放弃$的控制权限但不放弃jQuery的权限，其实jQuery也可放弃，只不过要给个别名$j3。prototype最好放在jQuery1.3.2后面，它获得$的控制权限。只是以后要用jQuery1.4.2就必须用$j4来引用了。但这样即使有再多的jQuery框架版本冲突问题，也全部解决掉了。假如来了个1.2的jQuery怎么办，参照（2）的执行步骤，只不过第一步改为：

第三步用$j2(element)罢了。道理都是相同的。