jquery-migrate.min.js兼容jQuery版本

2024-02-26 03:48

本文主要是介绍jquery-migrate.min.js兼容jQuery版本,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、情形描述

已知live() 方法在 jQuery 版本 1.7 中被废弃,在版本 1.9 中被移除。
特殊原因下,你需要在已引用jquery-2.1.1.js的页面中使用live() ,那么肯定是无效的

1、代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>jQuery兼容</title><script type="text/javascript" src="js/jquery-2.1.1.js"></script><a href="#" id="trigger">绑定事件</a><script type="text/javascript">$('#trigger').live('click mouseover',function(){alert("今天微笑了吗?");});</script></body>
</html>

2、效果

图中的要点已标记:在2.1.1版本中live方法是不存在的,所以引用时会出现异常,点击“绑定事件”时也无效
在这里插入图片描述

二、方案

为解决以上问题,我们有2种方案可供选择

1、改变原有的引入版本,配套使用版本为 1.7 及之前的jQuery 【常规方案不做详述,直接看结果】

没有出现异常,且事件绑定成功

 <!-- 官网jquery压缩版引用地址 -->
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>

在这里插入图片描述

2、在保持现有jQuery版本不变的情况下引用一个 jquery-migrate.min.js 来兼容版本

三、jQuery版本兼容

1、 jquery-migrate.min.js作用

jquery-migrate.min.js是一个过渡插件,让你在不修改原有代码的基础上升级或降级jQuery版本,使其自动匹配代码所需要的jquery版本

2、使用

(1)代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>jQuery兼容</title><script type="text/javascript" src="js/jquery-2.1.1.js"></script><script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script><a href="#" id="trigger">绑定事件</a><script type="text/javascript">$('#trigger').live('click',function(){alert("今天微笑了吗?");});</script></body>
</html>
(2)效果

在不改变原有jQuery版本的基础上进行版本兼容
在这里插入图片描述

jquery-migrate.min.js下载,有积分的可以捧个场,没有的可以私信我、留下邮箱,看到后邮箱发你(可能消息回复不那么及时,见谅)

这篇关于jquery-migrate.min.js兼容jQuery版本的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/747615

相关文章

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

IDEA如何切换数据库版本mysql5或mysql8

《IDEA如何切换数据库版本mysql5或mysql8》本文介绍了如何将IntelliJIDEA从MySQL5切换到MySQL8的详细步骤,包括下载MySQL8、安装、配置、停止旧服务、启动新服务以及... 目录问题描述解决方案第一步第二步第三步第四步第五步总结问题描述最近想开发一个新应用,想使用mysq

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.

Debian如何查看系统版本? 7种轻松查看Debian版本信息的实用方法

《Debian如何查看系统版本?7种轻松查看Debian版本信息的实用方法》Debian是一个广泛使用的Linux发行版,用户有时需要查看其版本信息以进行系统管理、故障排除或兼容性检查,在Debia... 作为最受欢迎的 linux 发行版之一,Debian 的版本信息在日常使用和系统维护中起着至关重要的作

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

你的华为手机升级了吗? 鸿蒙NEXT多连推5.0.123版本变化颇多

《你的华为手机升级了吗?鸿蒙NEXT多连推5.0.123版本变化颇多》现在的手机系统更新可不仅仅是修修补补那么简单了,华为手机的鸿蒙系统最近可是动作频频,给用户们带来了不少惊喜... 为了让用户的使用体验变得很好,华为手机不仅发布了一系列给力的新机,还在操作系统方面进行了疯狂的发力。尤其是近期,不仅鸿蒙O

什么是 Ubuntu LTS?Ubuntu LTS和普通版本区别对比

《什么是UbuntuLTS?UbuntuLTS和普通版本区别对比》UbuntuLTS是Ubuntu操作系统的一个特殊版本,旨在提供更长时间的支持和稳定性,与常规的Ubuntu版本相比,LTS版... 如果你正打算安装 Ubuntu 系统,可能会被「LTS 版本」和「普通版本」给搞得一头雾水吧?尤其是对于刚入