jQuery版本 jquery版本冲突

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，道理同window.$=_temp$（返还命名空间）只是命名不同而已。

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

头部加上以下代码
var _temp$ = window.$,_tempjQuery = window.jQuery;/将jQuery1.7.2的$和jQuery放到临时的变量空间上
   window.$ = $j4;//这句和下面的那句都是为了给中间的代码能够正确使用jQuery和$用的。后面的$j4是赋予他们正确的引用。
   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

首先，在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>