如何在一个页面上让多个jQuery

如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11。

你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗?

答案是,不行。因为现实生活是非常残酷的。举个栗子:

现有网站已经引用了jQuery 1.5以及相关插件。如果直接将jQuery升级到最新版,这些插件就不工作了,除非你能把这些插件全部升级,或者等各个插件的作者发布支持最新版jQuery的版本。

现在,如果我们要基于jQuery开发新的插件或者写JavaScript代码,用新版本会比较省时省力。

但旧版本又绝对不能扔掉,怎么办?

方法是通过jQuery的noConflict()来让多版本共存。

当我们导入jQuery时,jQuery仅向window这个全局空间注入两个变量:

window.$ = window.jQuery = { jQuery object };

同时,jQuery内部保留旧的window.$和window.jQuery对象的引用。当我们调用:

var $jq = $.noConflict();

window.$被恢复,但window.jQuery仍是jQuery。

当我们调用:

var $jq = $.noConflict(true);

window.$和window.jQuery都被恢复了,一切看起来就像jQuery从未被导入过一样,只不过可以通过变量$jq来使用jQuery。

所以,让新旧版本共存的jQuery可以这样实现:

<script src="jquery-1.5.js"></script>
<script src="jquery-1.11.js"></script>
<script>
    // 现在window.$和window.jQuery是1.11版本:
    console.log($().jquery); // => ‘1.11.0‘
    var $jq = jQuery.noConflict(true);
    // 现在window.$和window.jQuery被恢复成1.5版本:
    console.log($().jquery); // => ‘1.5.0‘
    // 可以通过$jq访问1.11版本的jQuery了
</script>
<script src="myscript.js"></script>

在myscript.js中,用$jq就可以访问1.11版本的jQuery了。

至此,问题解决。

但是,引入两个版本的jQuery后,页面被搞得乱七八糟。如果有人看不懂代码,把var $jq = jQuery.noConflict(true);删掉了怎么办?或者,把导入jQuery的两行互换了位置,最后就得不到正确的jQuery版本。

最好的办法是不改动页面,直接引用我们编写的新的js文件:

<script src="jquery-1.5.js"></script>
<script src="myscript.js"></script>

这样一来,我们就在myscript.js内部引用最新版jQuery,而页面无论有没有jQuery,有哪个版本的jQuery,我们都不关心。

开始编写新的更好的解决方案。首先,把myscript.js的主体确定下来:

// myscript.js
(function () {
    // BEGIN
    // TODO: javascript code here...
    // END
})();

用匿名函数是个好习惯,不污染全局变量,同时杜绝外部代码访问。

下一步是直接把jQuery 1.11的代码嵌进去:

// myscript.js
(function () {
    // BEGIN
    /*! jQuery v1.11.1 */
    !function(a,b){"object"==typeof module&&"object"==typeof module.exports?...
    if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...
    },cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...

    var $ = jQuery.noConflict(true);

    // TODO: javascript code here...
    // END
})();

嵌入的当然是压缩后的代码,一共3行,然后加一句:

var $ = jQuery.noConflict(true);

注意到$是一个局部变量,在后面的代码中,可以随时引用这个$,跟页面上其他版本的jQuery全局变量$不是一个对象。

最后一步工作就是检查jQuery的协议是否允许我们把jQuery源码直接嵌入我们自己的JavaScript代码。

[转载,作者不明]

时间: 2024-10-06 16:15:10

如何在一个页面上让多个jQuery的相关文章

基于bshare分享平台,在一个页面上实现多个不同内容的web分享

<!--引入bshare SDK--><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#uuid=&style=-1"></script><script type="text/javascript" charset="utf-8&quo

页面上画按钮的四种方法

在一个页面上画一个按钮,有四种办法: <input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生. <input type="submit" /> 这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它. <button> 这个按钮放在 form 中也会点击自动提交,比前两个的优点是按钮的内容不光可以有文字,还可以有图片等多媒体内容.(当然

jquery,从后台查数据,给页面上添加树形。

前台jquery+ajax请求往页面上添加树形的js代码 1 //传入当前点击节点的id,在后台代码查询出parentid=当前节点id的记录数,从而实现点击当前节点,往后台发送ajax请求,查询出子节点的集合,往父节点下拼接页面 2 function treeNode(pid){ 3 4 //如果<li id="pid">标签下的<ul>的长度为1,则说明需要发送ajax请求,往其中添加子节点.如果长度大于1说明添加过了,不用再次发送ajax请求.直接进els

[修练营 jQuery]使用contactable达到在页面上寄送feedback mail给管理者

前言 我们常常有个需求,是类似提供客服信箱的功能,让使用者可以很方便的将宝贵的意见feedback给站方管理者. 最常看到的就是,在menu或是页面的footer上,加上一个客服信箱的连结, 或是自己写一个表单,可以帮忙寄送相关资讯给站方. 没错,现在jQuery也有类似这样的plug-in,而且真的相当漂亮,还搭配动画让页面表现的更生动. 这边我要介绍的plug-in叫做"contactable",目的就是在页面上安插一个表单,类似用书签夹着的效果, 点一下就会像把书签抽出来的效果,

紧接上篇,jQuery调用jsonp,并且在页面上展示

在上篇中提到了spring4.1+支持jsonp的调用,做了个例子,用来在页面上展示jsonp: (js写的丑了点,本人后端出生,前端大侠们轻拍~) 1 var Menu = function () { 2 3 return { 4 getMenuData: function (json) { 5 console.log(json); 6 var data = json.data; 7 var html = ""; 8 for (var i = 0 ; i < data.leng

Javascript/jQuery根据页面上表格创建新汇总表格

任务背景及需求 按页面上的现成表格,用js生成新的统计表格如下: 实现思路 1,把表格数据抽取出来生成json数组 2,计算表格总数并创建空表格 3,历遍json数组把数据动态插入所有的表格,设值/append Row 4,最后配置好所有表格的属性如thead,rowspan等 详细代码 /** * @create: nelson * @initBPDTable 初始化表格内容 * @调用方式 $("#main_content").initBPDTable(list); */ $.fn

JQuery模拟点击页面上的所有a标签,触发onclick事件

注意: 这种方法需要给所有的a标签加上id属性 <script> $(function () { // 模拟点击页面上的所有a标签,触发onclick事件 $("a").each(function () { document.getElementById(this.id).click(); }) }) </script> 原文地址:https://www.cnblogs.com/daleyzou/p/9500782.html

HTML5文件上传组件美化jQuery插件

简要教程 jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件.它能够完成单文件和多文件的上传,支持文件的拖拽,支持不同的文件格式校验,支持缩略图和图标等,是一款非常实用的文件上传插件.它的特点还有: 对文件上传File Input组件进行美化 支持多文件上传 支持校验文件:大小,扩展名等 支持创建文件的缩略图 每种类型的文件可以自定义图标 可以为缩略图,图标和input自定义模板和主题 可以移出已选择的文件 可以从剪切板粘贴图片 所有的图标在一个字体文件中 支持文件拖

js在web页面上绘制圆形

在web页面上,想要画出一个圆形,方法有很多,SVG.canvas都可以绘图.但是本文不采用这两种方式,而是使用一个div.div一般是一个矩形,但是如果设置一个圆角样式border-radius就可以将div变成圆形. 圆的位置需要在画布中绝对定位(position: absolute),也就是通过设置X.Y坐标在定位,对应的css样式是left.top.想要圆的绝对定位起效,画布就要设置position:relative. <!DOCTYPE html> <html> <