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

    1.food.csv ========================================================================================= ...

  2. oracle 流程控制句式

    --for loop declare val number(10):=0; begin for val in 0..10 loop dbms_output.put_line('val='||val); ...

  3. charles功能(五)屏蔽web网页的抓包信息(proxy)

    应用场景:屏蔽web网页的抓包信息 proxy-->windows proxy(前面没有对勾,就不会抓到 PC浏览器的包) proxy-->macOS proxy(mac电脑) 最终效果

  4. day4(cookie与session的原理及区别)

    1.COOKIE使用和优缺点 1.1 cookie原理:用户名+密码 cookie是保存在用户浏览器端,用户名和密码等明文信息 1.2session使用原理 session是存储在服务器端的一段字符串 ...

  5. 图形验证码---pillow

    图片验证码逻辑 客户端发起GET连接请求,并随机生成UUID,绑定图片 UUID:通用唯一识别码(Universally Unique Identifier),目的,是让分布式系统中的所有元素,都能有 ...

  6. 第3.2节 Python列表简介

    鉴于Python中列表(list)的强大功能,本节及后面至少有一节都是介绍列表相关的知识,本节先介绍基本的列表知识. 一. 列表的定义 列表是一种可以修改的序列,它有点类似于c语言中的数组,在Pyth ...

  7. 关于Redis分布式锁这一篇应该是讲的最好的了,先收藏起来再看!

    前言 在Java并发编程中,我们通常使用到synchronized .Lock这两个线程锁,Java中的锁,只能保证对同一个JVM中的线程有效.而在分布式集群环境,这个时候我们就需要使用到分布式锁. ...

  8. 转:什么是Shingling算法

    shingling算法用于计算两个文档的相似度,例如,用于网页去重.维基百科对w-shingling的定义如下: In natural language processing a w-shinglin ...

  9. elasticsearch的基本了解

     以下内容参考官方文档https://www.elastic.co/guide/en/elasticsearch/reference/7.2/elasticsearch-intro.html 使用的学 ...

  10. C# 高性能对象映射

    1.之前在使用AutoMapper 框架感觉用着比较不够灵活,而且主要通过表达式树Api 实现对象映射 ,写着比较讨厌,当出现复杂类型和嵌套类型时性能直线下降,甚至不如序列化快. 2.针对AutoMa ...