项目中同一个页面引入不同的jQuery版本的不冲突问题

时间:2022-09-28 01:10:10

  在写项目的过程中,如果需要使用jQuery时,时长会遇到需要引入不同版本的jQuery,可能上一个负责该项目的人用到的是老版本的jQuery,而你去添加功能时用的是新版本的,这个问题很难避免掉,如果去改代码,可能会浪费很长的时间,下面说一下我的解决方法。

1、在html页面,引入两个不同版本的 jQuery(低版本在前,高版本在后)

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

2、输出jQuery 版本号

<script type="text/javascript">
$(function(){
var version = $.fn.jquery ;
console.info(version);
document.write("jQuery版本是: " + version);
});
</script>

此时的版本号是2.0.0;

3、对调jQuery版本引入顺序 (高版本在前,低版本在后)

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>

使用 2中方法,再次输出jQuery版本号: jQuery版本是: 1.10.0;

4、结论: 通过调整 jQuery的引入顺序,无法解决不同版本jQuery共存的问题。 最终获得的jQuery对象是最后加载的那一个。

5、解决问题

使用 noConflict() 方法实现jq版本共存;

$(function(){
var $2 = $.noConflict(); // 第二个加载的jQuery对象变成了 $2
var version = $.fn.jquery ;
var version2 = $2.fn.jquery ;
console.info(version , version2);
document.write("jQuery版本是: " + version + "jQuery2版本是: " + version2);
});

这时,两个版本就可以共存了;

项目中同一个页面引入不同的jQuery版本的不冲突问题的更多相关文章

  1. web项目中实现页面跳转的两种方式

    <a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a&gt ...

  2. 怎么查看CI,codeigniter的版本信息?想看某个项目中使用的CI具体是哪个版本,怎么查看?

    怎么查看CI的版本信息?想看某个项目中使用的CI具体是哪个版本,怎么查看?system\core\codeigniter.php中可以查看版本常量/** * CodeIgniter Version * ...

  3. 记录---java中jsp页面引入jquery路径的问题

    今天在jsp页面中引入jquery的时候因为路径不对总是报404,网上的方法找到几种试了试但是最后结果还是不生效,遂想起原先的项目中有引入外部jquery的例子,所以立马看了看,发现当时的项目中是用$ ...

  4. vue-cli项目中,全局引入jquery

    命令行执行 npm install --save jquery 找到webpack.base.conf.js文件,写入代码: const webpack = require('webpack') 在m ...

  5. Vue编写的页面部署到springboot网站项目中出现页面加载不全问题

    问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ...

  6. creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色

    在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...

  7. 夺命雷公狗---node&period;js---19之项目的构建在node&plus;express&plus;mongo的博客项目4mongodb在项目中的基本引入

    首先我们在命令行下先建立这个库: 然后我们在项目中引入mongodb的模块: var MongoClient = require('mongodb').MongoClient; var DB_STR ...

  8. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  9. Vue-Cli 3&period;x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

    问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...

随机推荐

  1. Web安全相关(二):跨站请求伪造(CSRF&sol;XSRF)

    简介 CSRF(Cross-site request forgery跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF,是一种对 ...

  2. 算法----Magic Index

    给定一个数组 A,如果 某个下标 i, 满足 A[i] = i, 则 i 称为 Magic Index. 现在假设 A 中的元素是递增有序的.且不重复,找出 Magic Index. 更进一步,当数组 ...

  3. Linux的别名使用

    直接定义别名 编辑当前用户下的.bashrc 文件: vim  ~/.bashrc 添加别名为 lmysql 的命令语句 : alias lmysql='mysql -uroot -p -Dtest ...

  4. WebBrowser控件跨域访问页面内容

    原文出处 :http://blog.csdn.net/nocky/article/details/6056802 源码出处:http://www.codecentrix.com/blog/wnd2do ...

  5. Oracle中使用Entity Framework 6&period;x Code-First

    Oracle中使用Entity Framework 6.x Code-First方式开发 去年写过一篇EF的简单学习笔记,当时EF还不支持Oracle的Code-First开发模式,今天无意又看了下O ...

  6. 操作系统内核Hack:&lpar;一&rpar;实验环境搭建

    操作系统内核Hack:(一)实验环境搭建 三四年前,心血来潮,入手<Orange's:一个操作系统的实现>学习操作系统内核,还配套买了王爽的<汇编语言(第二版)>和<80 ...

  7. JS高级

    一.函数高级 1.函数回调 函数回调的本质:在一个函数中,满足特定条件下,调用另一个函数 // 回调的函数 function callback(data) {} // 逻辑函数 function fu ...

  8. bzoj1997 &lbrack;HNOI2010&rsqb;平面图判定Plana

    bzoj1997 [HNOI2010]平面图判定Planar 链接 bzoj luogu 思路 好像有很多种方法过去.我只说2-sat 环上的边,要不在里面,要不在外边. 有的边是不能同时在里面的,可 ...

  9. C语言实现split以某个字符分割一个字符串

    方式一: 使用strtok # include <string.h> # include <stdio.h> void split(char *src,const char * ...

  10. PyQt4简单的窗口程序

    下面的程序显示了一个简单的小窗口. #!/usr/bin/python # -*- coding:utf-8 -*- import sys from PyQt4 import QtGui app = ...