文档章节

jQuery多个版本共存之间的冲突

南山有台
 南山有台
发布于 2016/09/22 08:45
字数 1526
阅读 88
收藏 2

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>_ ```

© 著作权归作者所有

南山有台

南山有台

粉丝 9
博文 80
码字总数 30810
作品 0
海淀
前端工程师
私信 提问
jQuery.noConflict() 函数详解

jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权。 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQuery("p")和$("p")是等价的。由于...

鱼煎
2015/07/20
230
0
谈谈 jQuery 中的防冲突(noConflict)机制

许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个。在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保...

i33
2013/03/13
69
0
50个必备的实用jQuery代码段(1)

本文会给你们展示50个jquery代码片段,这些代码能够给 你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你 又...

postdep
2014/02/19
64
0
50个必备的实用jQuery代码段.

如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}}); 2. 解决jQuery, prototype共存......

被风遗忘
2012/04/28
5.3K
14
50个必备的实用jQuery代码段

本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快...

光石头
2011/10/21
225
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周五乱弹 ——不知道假装开心,装的像么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :天黑了 你很忧愁, 你说世界上, 找不到四块五的妞, 行走在凌晨两点的马路上, 你疲倦地拿着半盒黄鹤楼。#今日歌曲推荐# 《四块...

小小编辑
今天
2.2K
16
64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
69
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
32
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
119
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部