jquery更新后怎样在一个站点中使用两个版本号的jQuery

公司眼下的项目中的右側导航菜单用到了bootstrap(v3.2.0)的affix.js(Affix插件)与scrospy.js(滚动监听)插件， 须要用到版本号>= 1.9.0的jquery,眼下最新的jquery版本号是2.1.1。公司之前用的jquery版本号是1.6.2的，怎样在同一个站点里应用不同版本号的jquery而不引起冲突呢？在网上查了资料找到可解决的方法。

<!-- 载入jQuery1.6.2版本号-->

<script type="text/javascript" language="javascript" src="jquery-1.6.2.min.js"></script>

<!-- 载入jQuery2.1.1版本号-->

<script type="text/javascript" language="javascript" src="jquery-2.1.1.min.js"></script>

<script type="text/javascript">var jQuery_211 = $.noConflict(true);</script>

// 分别改动affix.js和scrospy.js中的$或jQuery为jQuery_211

完整的源码

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"	xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<title>test</title>
<link type="text/css" rel="stylesheet" href="src2.css" />
<script type="text/javascript" language="javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">var jQuery_211 = $.noConflict(true);</script>
<script type="text/javascript" language="javascript" src="affix.js"></script>
<script type="text/javascript" language="javascript" src="scrollspy.js"></script>
</head>
<body>
<div class="sideToolbar" id="sideToolbar">
<ul class="nav">
<li><a href="#zixun">最新资讯</a></li>
<li><a href="#meiguo">留学美国</a></li>
<li><a href="#jiajiao">培训家教</a></li>
<li><a href="#xuexiao">洛杉矶学校</a></li>
</ul>
<a class="back-to-top" href="#pageCenter" title="返回顶部"></a>
<a class="dim-code" href="http://t.qq.com/chineseinla_com" title="微博: @chineseinla_com, 微信公众平台：chineseinla。" target="_blank"></a>
</div>
<div class="test" id="pageCenter">
<h1>内容</h1>
<div class="content1 color1" id="zixun"><h2 >最新资讯</h2></div>
<div class="content1 color2" id="meiguo"><h2>留学美国</h2></div>
<div class="content1 color3" id="jiajiao"><h2>培训家教</h2></div>
<div class="content1 color4" id="xuexiao"><h2>洛杉矶学校</h2></div>
</div>
<div class="test" id="footer">
</div>
</body>
<script type="text/javascript">
if (document.body.offsetWidth >= 1190) {
jQuery_211('#sideToolbar').show();
jQuery_211('#sideToolbar').affix({
offset: {
	top: 100,
	bottom: function () {return this.bottom=jQuery_211('#footer').outerHeight(true)}
    }
});
jQuery_211('body').scrollspy({ target: '#sideToolbar' });
window.onload = function(){
var div = document.getElementById('pageCenter');
var divx1 = div.offsetLeft + div.offsetWidth;
var divy1 = document.documentElement.clientHeight / 2 - 200;
var div2 = document.getElementById('sideToolbar');
//div2.style.top=divy1+'px';
div2.style.left=divx1+'px';
}
}
</script>
</html>

affix.js

/* ========================================================================
 * Bootstrap: affix.js v3.2.0
 * http://getbootstrap.com/javascript/#affix
 * ========================================================================
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

+function (jQuery_211) {
  'use strict';

  // AFFIX CLASS DEFINITION
  // ======================

  var Affix = function (element, options) {
    this.options = jQuery_211.extend({}, Affix.DEFAULTS, options)

    this.jQuery_211target = jQuery_211(this.options.target)
      .on('scroll.bs.affix.data-api', jQuery_211.proxy(this.checkPosition, this))
      .on('click.bs.affix.data-api',  jQuery_211.proxy(this.checkPositionWithEventLoop, this))

    this.jQuery_211element     = jQuery_211(element)
    this.affixed      =
    this.unpin        =
    this.pinnedOffset = null

    this.checkPosition()
  }

  Affix.VERSION  = '3.2.0'

  Affix.RESET    = 'affix affix-top affix-bottom'

  Affix.DEFAULTS = {
    offset: 0,
    target: window
  }

  Affix.prototype.getPinnedOffset = function () {
    if (this.pinnedOffset) return this.pinnedOffset
    this.jQuery_211element.removeClass(Affix.RESET).addClass('affix')
    var scrollTop = this.jQuery_211target.scrollTop()
    var position  = this.jQuery_211element.offset()
    return (this.pinnedOffset = position.top - scrollTop)
  }

  Affix.prototype.checkPositionWithEventLoop = function () {
    setTimeout(jQuery_211.proxy(this.checkPosition, this), 1)
  }

  Affix.prototype.checkPosition = function () {
    if (!this.jQuery_211element.is(':visible')) return

    var scrollHeight = jQuery_211(document).height()
    var scrollTop    = this.jQuery_211target.scrollTop()
    var position     = this.jQuery_211element.offset()
    var offset       = this.options.offset
    var offsetTop    = offset.top
    var offsetBottom = offset.bottom

    if (typeof offset != 'object')         offsetBottom = offsetTop = offset
    if (typeof offsetTop == 'function')    offsetTop    = offset.top(this.jQuery_211element)
    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.jQuery_211element)

    var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
                offsetBottom != null && (position.top + this.jQuery_211element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
                offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false

    if (this.affixed === affix) return
    if (this.unpin != null) this.jQuery_211element.css('top', '')

    var affixType = 'affix' + (affix ? '-' + affix : '')
    var e         = jQuery_211.Event(affixType + '.bs.affix')

    this.jQuery_211element.trigger(e)

    if (e.isDefaultPrevented()) return

    this.affixed = affix
    this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null

    this.jQuery_211element
      .removeClass(Affix.RESET)
      .addClass(affixType)
      .trigger(jQuery_211.Event(affixType.replace('affix', 'affixed')))

    if (affix == 'bottom') {
      this.jQuery_211element.offset({
        top: scrollHeight - this.jQuery_211element.height() - offsetBottom
      })
    }
  }

  // AFFIX PLUGIN DEFINITION
  // =======================

  function Plugin(option) {
    return this.each(function () {
      var jQuery_211this   = jQuery_211(this)
      var data    = jQuery_211this.data('bs.affix')
      var options = typeof option == 'object' && option

      if (!data) jQuery_211this.data('bs.affix', (data = new Affix(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  var old = jQuery_211.fn.affix

  jQuery_211.fn.affix             = Plugin
  jQuery_211.fn.affix.Constructor = Affix

  // AFFIX NO CONFLICT
  // =================

  jQuery_211.fn.affix.noConflict = function () {
    jQuery_211.fn.affix = old
    return this
  }

  // AFFIX DATA-API
  // ==============

  jQuery_211(window).on('load', function () {
    jQuery_211('[data-spy="affix"]').each(function () {
      var jQuery_211spy = jQuery_211(this)
      var data = jQuery_211spy.data()

      data.offset = data.offset || {}

      if (data.offsetBottom) data.offset.bottom = data.offsetBottom
      if (data.offsetTop)    data.offset.top    = data.offsetTop

      Plugin.call(jQuery_211spy, data)
    })
  })

}(jQuery_211);

scrollspy.js

/* ========================================================================
 * Bootstrap: scrollspy.js v3.2.0
 * http://getbootstrap.com/javascript/#scrollspy
 * ========================================================================
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

+function (jQuery_211) {
  'use strict';

  // SCROLLSPY CLASS DEFINITION
  // ==========================

  function ScrollSpy(element, options) {
    var process  = jQuery_211.proxy(this.process, this)

    this.jQuery_211body          = jQuery_211('body')
    this.jQuery_211scrollElement = jQuery_211(element).is('body') ? jQuery_211(window) : jQuery_211(element)
    this.options        = jQuery_211.extend({}, ScrollSpy.DEFAULTS, options)
    this.selector       = (this.options.target || '') + ' .nav li > a'
    this.offsets        = []
    this.targets        = []
    this.activeTarget   = null
    this.scrollHeight   = 0

    this.jQuery_211scrollElement.on('scroll.bs.scrollspy', process)
    this.refresh()
    this.process()
  }

  ScrollSpy.VERSION  = '3.2.0'

  ScrollSpy.DEFAULTS = {
    offset: 10
  }

  ScrollSpy.prototype.getScrollHeight = function () {
    return this.jQuery_211scrollElement[0].scrollHeight || Math.max(this.jQuery_211body[0].scrollHeight, document.documentElement.scrollHeight)
  }

  ScrollSpy.prototype.refresh = function () {
    var offsetMethod = 'offset'
    var offsetBase   = 0

    if (!jQuery_211.isWindow(this.jQuery_211scrollElement[0])) {
      offsetMethod = 'position'
      offsetBase   = this.jQuery_211scrollElement.scrollTop()
    }

    this.offsets = []
    this.targets = []
    this.scrollHeight = this.getScrollHeight()

    var self     = this

    this.jQuery_211body
      .find(this.selector)
      .map(function () {
        var jQuery_211el   = jQuery_211(this)
        var href  = jQuery_211el.data('target') || jQuery_211el.attr('href')
        var jQuery_211href = /^#./.test(href) && jQuery_211(href)

        return (jQuery_211href
          && jQuery_211href.length
          && jQuery_211href.is(':visible')
          && [[jQuery_211href[offsetMethod]().top + offsetBase, href]]) || null
      })
      .sort(function (a, b) { return a[0] - b[0] })
      .each(function () {
        self.offsets.push(this[0])
        self.targets.push(this[1])
      })
  }

  ScrollSpy.prototype.process = function () {
    var scrollTop    = this.jQuery_211scrollElement.scrollTop() + this.options.offset
    var scrollHeight = this.getScrollHeight()
    var maxScroll    = this.options.offset + scrollHeight - this.jQuery_211scrollElement.height()
    var offsets      = this.offsets
    var targets      = this.targets
    var activeTarget = this.activeTarget
    var i

    if (this.scrollHeight != scrollHeight) {
      this.refresh()
    }

    if (scrollTop >= maxScroll) {
      return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
    }

    if (activeTarget && scrollTop <= offsets[0]) {
      return activeTarget != (i = targets[0]) && this.activate(i)
    }

    for (i = offsets.length; i--;) {
      activeTarget != targets[i]
        && scrollTop >= offsets[i]
        && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
        && this.activate(targets[i])
    }
  }

  ScrollSpy.prototype.activate = function (target) {
    this.activeTarget = target

    jQuery_211(this.selector)
      .parentsUntil(this.options.target, '.active')
      .removeClass('active')

    var selector = this.selector +
        '[data-target="' + target + '"],' +
        this.selector + '[href="' + target + '"]'

    var active = jQuery_211(selector)
      .parents('li')
      .addClass('active')

    if (active.parent('.dropdown-menu').length) {
      active = active
        .closest('li.dropdown')
        .addClass('active')
    }

    active.trigger('activate.bs.scrollspy')
  }

  // SCROLLSPY PLUGIN DEFINITION
  // ===========================

  function Plugin(option) {
    return this.each(function () {
      var jQuery_211this   = jQuery_211(this)
      var data    = jQuery_211this.data('bs.scrollspy')
      var options = typeof option == 'object' && option

      if (!data) jQuery_211this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  var old = jQuery_211.fn.scrollspy

  jQuery_211.fn.scrollspy             = Plugin
  jQuery_211.fn.scrollspy.Constructor = ScrollSpy

  // SCROLLSPY NO CONFLICT
  // =====================

  jQuery_211.fn.scrollspy.noConflict = function () {
    jQuery_211.fn.scrollspy = old
    return this
  }

  // SCROLLSPY DATA-API
  // ==================

  jQuery_211(window).on('load.bs.scrollspy.data-api', function () {
    jQuery_211('[data-spy="scroll"]').each(function () {
      var jQuery_211spy = jQuery_211(this)
      Plugin.call(jQuery_211spy, jQuery_211spy.data())
    })
  })

}(jQuery_211);

src2.css

@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
}
body {
	text-align:center;
	position: relative;
}
a{text-decoration:none;}
a:link{color:#333;}
a:visited{color:#333;}
a:hover{color:#78b9e3;}
a:active{color:#333;}
.test {
	width: 1030px;
	height: 2048px;
	background: #ccc;
	position: relative;
	display: inline-block;
}
.content1 {
width:100%;
height:500px;
}
.color1 {
	background-color:red;
}
.color2 {
	background-color:blue;
}
.color3 {
	background-color:pink;
}
.color4 {
	background-color:green;
}
/* sideToolbar 右側导航菜单 yangyao 2014/10/27  */
.sideToolbar {
	width: 76px;
	font-size: 14px;
	text-align: center;
	display:none;
	position:fixed;
}
.sideToolbar .nav {
	margin:0;
	padding:0;
	list-style-type: none;
}
.sideToolbar .nav>li>a {
	width:100%;
	height: 100%;
	display: block;
	line-height: 40px;
	background:#ededed;
	overflow: hidden;
	border-top: 1px solid #ffffff;
}
.sideToolbar .nav>li>a:hover {
	font-weight: bold;
	color: #ffffff;
	background:#77B7E3;
}
.sideToolbar .nav>.active a {
	font-weight: bold;
	color: #ffffff;
	background:#77B7E3;
}
.sideToolbar .back-to-top {
	width:75px;
	height: 33px;
	background: url(./images/jiantou.jpg) repeat-x top;
	border-top: 1px solid #ffffff;
	display: block;
}
.sideToolbar .back-to-top:hover {
	background: url(./images/jiantou_over.jpg) repeat-x top;
}
.sideToolbar .dim-code {
	width:75px;
	height: 74px;
	background: url(./images/erweima.jpg) repeat-x top;
	border-top: 1px solid #ffffff;
	display: block;
}
.affix-top{position:fixed;top:30%;}
.affix{position:fixed;top:30%;}
.affix-bottom{position:absolute;}
/* end sideToolbar 右側导航菜单 */

图片

erweima.jpg

jiantou.jpg

jiantou_over.jpg

时间： 2024-10-13 02:18:26

jquery更新后怎样在一个站点中使用两个版本号的jQuery的相关文章

每日一题16：在一个数组中实现两个栈

在一个数组中实现两个栈,当数组未填满是任一个栈不能溢出.解法是将一个栈从头开始往后插入,而另一个从后往前插入,如果插入一个元素后,两个栈的top指针未相遇,则表示数组未满,栈没有溢出. #include "stdafx.h" #include <iostream> using namespace std; struct special_stack { int capcity; int ltop,rtop; int* vals; }; special_stack* creat

在一个数组中除两个数字只出现1次外，其它数字都出现了2次

前面总结了leecode上,改为成3出现,只有1个出现1次,的是通过记录每个位的个数来实现的如果count%3=1则为1,否则为0,实现起来充分利用了位运算. 编程之美上的,没有写过,今天写一下. http://blog.csdn.net/morewindows/article/details/8214003这个博客是MVP的博客,我自己也写一遍,其实核心就是 两个数的异或为1,只有1,0疑惑才为1,所以分离这两个数到不同的区间.对如何寻找1的位置做了优化(x&-x) #include<io

4-7 在一个数组中实现两个堆栈

本题要求在一个数组中实现两个堆栈. 函数接口定义: Stack CreateStack( int MaxSize ); bool Push( Stack S, ElementType X, int Tag ); ElementType Pop( Stack S, int Tag ); 其中Tag是堆栈编号,取1或2:MaxSize堆栈数组的规模:Stack结构定义如下: typedef int Position; struct SNode { ElementType *Data; Positio

6-7 在一个数组中实现两个堆栈

6-7 在一个数组中实现两个堆栈(20 分) 本题要求在一个数组中实现两个堆栈. 函数接口定义: Stack CreateStack( int MaxSize ); bool Push( Stack S, ElementType X, int Tag ); ElementType Pop( Stack S, int Tag ); 其中Tag是堆栈编号,取1或2:MaxSize堆栈数组的规模:Stack结构定义如下: typedef int Position; struct SNode { Ele

在一个数组中查找两个重复出现的数字

题目如下:现有一个数组长度为n+1,里面存放有1到n-2,顺序不定,其中有两个数字出现了两次,现在要找出那两个数字. 例子A={2, 3, 1, 4, 5, 2, 4}, 这个数组长度为7,存放了1到5,但2和4出现了两次,程序输出2和4 方法1 蛮力查找 主要思想:对于数组中的第i个数,查找i+1到末尾的所有整数,一个数如果出现了两次就可以在第一次后面找到第二次出现的数. 时间复杂度 O(n^2) #include<stdio.h> void find_duplicates(int* num

面试题：在一个数组中除两个数字只出现1次外，其它数字都出现了2次， 要求尽快找出这两个数字

由于有一个数字消失了,那必定有一个数只出现一次而且其它数字都出现了偶数次.用搜索来做就没必要了,利用异或运算的两个特性—— 1.自己与自己异或结果为0 2.异或满足交换律. 因此我们将这些数字全异或一遍,结果就一定是那个仅出现一个的那个数. 示例代码如下: int[] arra = {11,12,3,12,11,12,12 }; static void Main(string[] args) { int[] arra = {11,12,3,12,11,12,12 }; int lostNum =

6-7 在一个数组中实现两个堆栈 (20 分)

题目地址:https://pintia.cn/problem-sets/15/problems/730 Pop函数成功弹出后应该返回弹出的值,否则就是错的,应该是和PrintStack函数有关 Stack CreateStack(int Maxsize) { Stack S = (Stack)malloc(sizeof(struct SNode)); S->Data = (int *)malloc(sizeof(ElementType)* Maxsize); S->MaxSize = Maxs

jQuery：在一个回调中处理多个请求

我曾经为Mozilla Developer Network 开发一个新功能,它需要加载一个基本的脚本文件的同时加载一个JSON请求.因为我们使用的是jQuery,意味着要使用 jQuery.getScript和jQuery.getJSON.我知道这两者都是异步的并返回一个Deferred(jQuery中的Promise模式实现, 参见: deffered object)对象,因此我想知道能不能在一个回调里按顺序请求它们,就像多数的JavaScript加载器那样(如curljs ).我很幸运,使用

Vs2013中通过Nuget添加不同版本jQuery

vs2013中如果直接更新jQuery则是2X的版本,为了兼容IE浏览器的,一般都是希望使用jQuery1.x版本的jQuery,则可在调出Nuget的控制台,在控制台输入(此例子是下载jQuery 1.11.0): Install-Package jQuery -Version 1.11.0   Vs2013中通过Nuget添加不同版本jQuery,布布扣,bubuko.com