项目中同一个页面引入不同的jQuery版本的不冲突问题
在写项目的过程中,如果需要使用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版本的不冲突问题的更多相关文章
- web项目中实现页面跳转的两种方式
		
<a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...
 - 怎么查看CI,codeigniter的版本信息?想看某个项目中使用的CI具体是哪个版本,怎么查看?
		
怎么查看CI的版本信息?想看某个项目中使用的CI具体是哪个版本,怎么查看?system\core\codeigniter.php中可以查看版本常量/** * CodeIgniter Version * ...
 - 记录---java中jsp页面引入jquery路径的问题
		
今天在jsp页面中引入jquery的时候因为路径不对总是报404,网上的方法找到几种试了试但是最后结果还是不生效,遂想起原先的项目中有引入外部jquery的例子,所以立马看了看,发现当时的项目中是用$ ...
 - vue-cli项目中,全局引入jquery
		
命令行执行 npm install --save jquery 找到webpack.base.conf.js文件,写入代码: const webpack = require('webpack') 在m ...
 - Vue编写的页面部署到springboot网站项目中出现页面加载不全问题
		
问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ...
 - creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色
		
在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...
 - 夺命雷公狗---node.js---19之项目的构建在node+express+mongo的博客项目4mongodb在项目中的基本引入
		
首先我们在命令行下先建立这个库: 然后我们在项目中引入mongodb的模块: var MongoClient = require('mongodb').MongoClient; var DB_STR ...
 - vue项目中设置全局引入scss,使每个组件都可以使用变量
		
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
 - Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
		
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
 
随机推荐
- [整理]qbxt集训10场考试 大 杂 烩 (前篇)
			
Contest 1 A 计算 \(n!\mod 2^{32}\) .发现数一大答案就为 \(0\) ,直接输出即可. B 一个 \(n\times m\) 的网格,网格中的数都在 \([1,nm]\) ...
 - Beta冲刺随笔——Day_Five
			
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 团队进行Beta冲刺 作业正文 正文 其他参考文献 无 今日事今日毕 林涛: ...
 - JavaScript原型链及其污染
			
JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...
 - Python中splitlines方法判断文本中一行结束除了回车换行符是否还有其他字符?
			
Python中splitlines([keepends])方法用于返回由原字符串中各行组成的列表,在行边界的位置拆分. 如果keepends=True,结果列表中包含行边界,否则不包含 行边界的字符. ...
 - PyQt(Python+Qt)学习随笔:使用QColorDialog.getColor交互设置部件的颜色
			
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 PyQt中的部件只要是QWidget的派生类都可以在Designer或 ...
 - PyQt学习随笔:Model/View架构中的Delegate(委托)
			
不同于MVC模式,Model/View设计并不包含用于处理与用户交互的完全独立的部件, 没有将用户交互部分完全分离.一般地,视图负责把模型数据显示给用户,以及处理用户的输入.但是,对于某些特殊要求(比 ...
 - PyQt学习随笔:重写组件的event方法捕获组件的事件
			
在PyQt的组件对象中,都有从QWidget中继承的方法event,而QWidget.event是对QObject类定义的虚拟方法event的实现. event方法的语法: bool event(QE ...
 - SpringCloud-服务间通信方式
			
接下来在整个微服务架构中,我们比较关心的就是服务间的服务改如何调用,有哪些调用方式? 总结:在springcloud中服务间调用方式主要是使用 http restful方式进行服务间调用 1. 基于R ...
 - 利用神经网络算法的C#手写数字识别(二)
			
利用神经网络算法的C#手写数字识别(二) 本篇主要内容: 让项目编译通过,并能打开图片进行识别. 1. 从上一篇<利用神经网络算法的C#手写数字识别>中的源码地址下载源码与资源, ...
 - 题解-[CEOI2017]Building Bridges
			
[CEOI2017]Building Bridges 有 \(n\) 个桥墩,高 \(h_i\) 重 \(w_i\).连接 \(i\) 和 \(j\) 消耗代价 \((h_i-h_j)^2\),用不到 ...