jQuery多个版本共存之间的冲突-优快云博客

本文介绍了解决同一页面中多个不同版本的jQuery共存引发的冲突问题的方法，包括如何通过noConflict方法释放$符号的控制权，并提供了一种在不修改原有插件代码的情况下实现版本共存的技术方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、jQuery多个版本共存之间的冲突： 由于导航浮动使用了jquery-1.7.2.min.js，而弹出浮动窗口使用了jquery.min.js（jquery.floatDiv.js插件使用），例用如下方法解决—— 第一步：在 jquery.min.js 的源代码的最后加上一句_var $j4 = jQuery.noConflict(true);_//之所以在源码这里加，而不是像大多数文章提的在要用到的时候加，这是因为很多基于 jquery.min.js 的插件都要加，在这里加可以避免过多插件加这句代码导致重复。这一句是将 jquery.min.js 的jQuery和$的引用权限全部放弃。也就是基于 jquery.min.js 的插件不能再用jQuery和$了。同时给予$j4的新的命名空间，注意它是window的属性。看1.4.2的源代码会发现它其实也就执行了这两句：``` window.$=_$;window.jQuery=_jQuery



**第二步：在基于 jquery.min.js（我的是在jquery.floatDiv.js里加上） 的框架的所有插件的**


头部加上以下代码

_var _temp$ = window.$,tempjQuery = window.jQuery;/将jQuery1.7.2的$和jQuery放到临时的变量空间上 window.$ = $j4;//这句和下面的那句都是为了给中间的代码能够正确使用jQuery和$用的。

   window.jQuery = $j4;
之所以要先放临时变量存储，有三点必须这样做的**理由**：

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

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

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

【中间的原始代码不动】

尾部加以下代码

_window.$ = temp$;//将$的引用权限返还给jQuery1.7. _window.jQuery = tempjQuery;//将jQuery的引用权限返还给jQuery1.7.


 

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


总结：到目前为止可行方案： jquery.min.js 完全放弃$和jQuery的控制权限。1.7.2放弃$的控制权限但不放弃j
Query的权限，其实jQuery也可放弃，只不过要给个别名$j3。

调用floatdiv插件的代码例子：
/```
/ JavaScript Document
document.write('<script type="text/javascript" src="/images/js/jquery.floatDiv.js"></script>'); 

$j4(function(){
     
    // $("#swt_box1").floatdiv('middle');
    // $("#swt_box2").floatdiv("rightmiddle");
    //  $("#swtbox").floatdiv('middlebottom');
   //  $("#swt_close1").click(function(){$("#swt_box1").hide();});
   //   $("#swt_close2").click(function(){$("#swt_box2").hide();});
   //  $("#swt_zx1").click(function(){$("#swt_box1").hide();});
     
    // setInterval(function(){$("#swt_box1").show();},30000);
  $j4("#swt_close").click(function(){ $j4 ("#swt_box").hide();});
  $j4("#swt_close1").click(function(){ $j4 ("#swt_box1").hide();});
  setInterval(function(){$j4("#swt_box").show();},30000);
  setInterval(function(){$j4("#swt_box1").show();},30000);
     });

var txt="";

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
//alert(txt);
return true;
}

function message()
{
adddlert("Welcome guest!");
}
$j4(function(){
     
   //  $("#swtbox").floatdiv('middlebottom');
   //  setTimeout(function(){$("#swtbox").show();},1000);
      //setTimeout(function(){$("#swt_box1").show();},5000);
   $j4("#swt_box").floatdiv('rightbottom');
   $j4("#swt_box1").floatdiv('middle');
   setTimeout(function(){$j4("#swt_box").show();},3000);
   setTimeout(function(){$j4("#swt_box1").show();},1000);
   
     });

另外，我所用的是PHPCMS2008，发觉加载 jquery.min.js并且修改了后会导致后台页面显示不全，故将修改后的jquery.min.js命名为jquery01.min.js，调用成功。

2、jquery与其它JS冲突的解决方法：在另一个网站，我的浮动 jquery.floatDiv.js 也与浮动导航JS产生了冲突（浮动导航的JS未用jquery插件，主要是关于$符号的争夺，这儿方法仍是jquery放弃对$的控制权）首先，在jquery.min.js最后加上一句：jQuery.noConflict(); 该方法的作用就是让Jquery放弃对$的所有权。 然先，所有jquery.min.js与$相关被替换成JQuey； 例如： jquery.floatDiv.js

jQuery.fn.floatdiv=function(location){
  //判断浏览器版本
 var isIE6=false;
 var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;
 if(Sys.ie && Sys.ie=="6.0"){
  isIE6=true;
 }
 var windowWidth,windowHeight;//窗口的高和宽
 //取得窗口的高和宽
 if (self.innerHeight) {
  windowWidth=self.innerWidth;
  windowHeight=self.innerHeight;
 }else if (document.documentElement&&document.documentElement.clientHeight) {
  windowWidth=document.documentElement.clientWidth;
  windowHeight=document.documentElement.clientHeight;
 } else if (document.body) {
  windowWidth=document.body.clientWidth;
  windowHeight=document.body.clientHeight;
 }
 return this.each(function(){
  var loc;//层的绝对定位位置
  var wrap=jQuery("<div></div>");
  var top=-1;
  if(location==undefined || location.constructor == String){
   switch(location){
    case("rightbottom")://右下角
     loc={right:"0px",bottom:"0px"};
     break;
    case("leftbottom")://左下角
     loc={left:"0px",bottom:"0px"};
     break; 
    case("lefttop")://左上角
     loc={left:"0px",top:"0px"};
     top=0;
     break;
    case("righttop")://右上角
     loc={right:"0px",top:"0px"};
     top=0;
     break;
    case("middletop")://居中置顶
     loc={left:windowWidth/2-jQuery(this).width()/2+"px",top:"0px"};
     top=0;
     break;
    case("middlebottom")://居中置低
     loc={left:windowWidth/2-jQuery(this).width()/2+"px",bottom:"0px"};
     break;
    case("leftmiddle")://左边居中
     loc={left:"0px",top:windowHeight/2-jQuery(this).height()/2+"px"};
     top=windowHeight/2-jQuery(this).height()/2;
     break;
    case("rightmiddle")://右边居中
     loc={right:"0px",top:windowHeight/2-jQuery(this).height()/2+"px"};
     top=windowHeight/2-jQuery(this).height()/2;
     break;
     
    case("middle")://居中
     var l=0;//居左
     var t=0;//居上
     l=windowWidth/2-jQuery(this).width()/2;
     t=windowHeight/2-jQuery(this).height()/2;
     top=t;
     loc={left:l+"px",top:t+"px"};
     break;
    default://默认为右下角
     location="rightbottom";
     loc={right:"0px",bottom:"0px"};
     break;
   }
  }else{
   loc=location;
   alert(loc.bottom);
   var str=loc.top;
   //09-11-5修改：加上top为空值时的判断
   if (typeof(str)!= 'undefined'){
    str=str.replace("px","");
    top=str;
   }
  }
  /*fied ie6 css hack*/
  if(isIE6){
   if (top>=0)
   {
    wrap=jQuery("<div style=\"top:expression(documentElement.scrollTop+"+top+");\"></div>");
   }else{
    wrap=jQuery("<div style=\"top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");
   }
  }
  jQuery("body").append(wrap);
  
  wrap.css(loc).css({position:"fixed",
   z_index:"9999"});
  if (isIE6)
  {
   
   wrap.css("position","absolute");
   //没有加这个的话，ie6使用表达式时就会发现跳动现象
   //至于为什么要加这个，还有为什么要加nothing.txt这个，偶也不知道，希望知道的同学可以告诉我
   //jQuery("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");
   jQuery("body").css("background-attachment","fixed").css("","url(n1othing.txt)");
  }
  //将要固定的层添加到固定层里
  jQuery(this).appendTo(wrap);
 });
};

还有刚才的调用插件代码也改成： // JavaScript Document

document.write('<script type="text/javascript" src="/images/js/jquery.floatDiv.js"></script>'); 

jQuery(function(){
   
    // $("#swt_box1").floatdiv('middle');
    // $("#swt_box2").floatdiv("rightmiddle");
    //  $("#swtbox").floatdiv('middlebottom');
   //  $("#swt_close1").click(function(){$("#swt_box1").hide();});
   //   $("#swt_close2").click(function(){$("#swt_box2").hide();});
   //  $("#swt_zx1").click(function(){$("#swt_box1").hide();});
     
    // setInterval(function(){$("#swt_box1").show();},30000);
  
  //setInterval(function(){$j4("#fd_box").show();},30000);
  
     });

var txt="";

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
//alert(txt);
return true;
}

function message()
{
adddlert("Welcome guest!");
}
jQuery(function(){
     
   //  $("#swtbox").floatdiv('middlebottom');
   //  setTimeout(function(){$("#swtbox").show();},1000);
      //setTimeout(function(){$("#swt_box1").show();},5000);
   jQuery("#fd_box").floatdiv('middlebottom');
   
   setTimeout(function(){jQuery("#fd_box").show();},1000);
   
   
     });

_如果使用以上方法都不成功，那么还有个终极解决笨方法，用iframe内联框架，相当于另引进一个文档，这样就不引起冲突了，如：```

<div id="homeVisual"><center><iframe src="/yz/index.html" width="970" height="470" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe></center></div>_ ```

转载于:https://my.oschina.net/lpcysz/blog/749959