在写项目的过程中,如果需要使用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> ...

  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.js---19之项目的构建在node+express+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.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer

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

随机推荐

  1. PyQt(Python+Qt)学习随笔:QListView的resizeMode属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListView的resizeMode属性用于控制调整视图大小时是否再次排列视图中的数据项,其类型 ...

  2. 第15.19节 PyQt(Python+Qt)入门学习:自定义信号与槽连接

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 本文利用中介绍了PyQt中的信号和槽机制,除了使用PyQt组件的已有信号外,PyQt和Qt ...

  3. python接口自动化测试框架(post提交添加变量)

    1.python接口测试框架包含哪几部分 数据源-> GET/POST 发送请求->接收返回结果->断言测试结果->生成测试报告(html报告)->网页报告 2.pyth ...

  4. 上传到github

    我是为了自己下次不用再找github上传的地方了,索性就复制了一篇 转载于 https://blog.csdn.net/m0_37725003/article/details/80904824 首先你 ...

  5. 如何设置10px

    chrome浏览器小于12px字体默认显示12px? font-size:10px: -webkit-transform:scal(0.83):

  6. (8)ASP.NET Core3.1 Ocelot Consul服务注册与发现

    1.服务注册与发现(Service Discovery) ●服务注册:我们通过在每个服务实例写入注册代码,实例在启动的时候会先去注册中心(例如Consul.ZooKeeper.etcd.Eureka) ...

  7. 手把手教你写DI_3_小白徒手支持 `Singleton` 和 `Scoped` 生命周期

    手把手教你写DI_3_小白徒手支持 Singleton 和 Scoped 生命周期 在上一节:手把手教你写DI_2_小白徒手撸构造函数注入 浑身绷带的小白同学:我们继续开展我们的工作,大家都知道 Si ...

  8. golang omitempty 总结

    golang omitempty 总结 在使用Golang的时候,不免会使用Json和结构体的相互转换,这时候常用的就是 json.Marshal和json.Unmarshal两个函数. 这时候在定义 ...

  9. WPF中Logical Tree和Visual Tree的区别

    The Logical TreeThe logical tree describes the relations between elements of the user interface. The ...

  10. memcached session会话共享

    1 安装依赖包yum install libevent livevent-devel nc -y 2 yum 安装memcachedyum install -y memcached 3 启动memec ...