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

Posted lcchuguo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

技术分享

























以上是关于jquery更新后怎样在一个站点中使用两个版本号的jQuery的主要内容，如果未能解决你的问题，请参考以下文章

phpcms怎样更改默认的站点

jQuery scrollTop 直到滚动后才更新

在页面上包含两个版本的 jQuery 而不会影响旧插件

如何使用Shell判断版本号的大小

怎样才能高效地使用JQuery

在不更改版本号的情况下更新 android 应用