技术头条(投递你的文章)     搜索本站     邮件订阅     微信号:IT技术博客大学习
您现在的位置首页 --> JavaScript --> jQuery 3.0 升级指南

jQuery 3.0 升级指南

浏览:204次  出处信息

概述

在3.0主版本中,jQuery Core团队对API进行更改及清理,并修复某些代码更改引起的bug。这包括删除以前弃用的公开API,更改或删除未记录的API,并更改现有API的记录或未记录的行为用于特定输入。

浏览器支持

jQuery 3.0 支持以下浏览器:

  • Internet Explorer: 9+

  • Chrome, Edge, Firefox, Safari: 当前版本 和 当前版本 - 1

  • Opera: 当前版本

  • Safari Mobile iOS: 7+

  • Android 4.0+

jQuery团队策略是主版本更新只针对这些浏览器,所以这个浏览器列表至少支持到jQuery 4。

jQuery Migrate 插件

与jQuery 1.9 / 2.0中的主要更改一样,我们已经创建了一个新版本的jQuery Migrate插件,以简化旧代码迁移到3.0版本。我们强烈建议您使用这个插件作为升级工具,它将给出 可能影响您的代码的关于大多数主要更改的具体建议。

jQuery Migrate插件 3.0 版本,不会警告或恢复以前主版本更改(如jQuery 1.9 / 2.0)中删除的行为。使用以下步骤从 1.11.0 或 2.1.0 之前的jQuery版本升级到3.0新版本:

  1. 将页面上的jQuery版本升级到最新的1.x或2.x版本(目前为1.12.3或2.2.3)(愚人码头注:3.0之前的最新版本)。

  2. 将未压缩的jQuery Migrate 1.x插件添加到页面。

  3. 可选但是建议,更新正在使用的任何插件,因为最新版本通常是与最新版本的jQuery是兼容的。

  4. 测试页面并解决出现在控制台上的任何警告,使用JQMIGRATE 1.x警告文档作为指南。

  5. 删除jQuery Migrate 1.x插件,并确保该页面在只使用最新的jQuery 1.x / 2.x的情况下,更新的jQuery代码能继续正常工作。

  6. 将页面上的jQuery版本升级到最新的3.0版本(目前为3.0.0 )(愚人码头注:目前最新版本为3.1.1),并将未压缩的jQuery Migrate 3.x插件添加到页面。

  7. 测试页面并解决控制台上显示的任何警告,使用JQMIGRATE 3.x警告文档作为指南。如果插件报错,向第三方插件作者报告插件中的错误。

  8. 删除jQuery Migrate 3.x插件,并确保该页面在只使用最新的jQuery 3.x的情况下,能继续正常工作。

不支持在同一页面上同时运行Migrate 1.x和Migrate 3.x。

当使用特定的过时和/或移除的特征时,Migrate插件的未压缩开发版本会在控制台日志中输出以警告。在查找和修复现有jQuery代码和插件中的问题的时候,它很有用,可以作为迁移调试工具。

Migrate插件的压缩版本不会生成任何警告,然而它发出一个单独的控制台消息,告诉我们它已经被安装引用,以简化调试。jQuery 3.0或更高版本的生产站点上可以根据自己的需要使用Migrate插件,但对于旧的不兼容的jQuery代码或插件也必须使用。理想情况下,这只是作为一个短期解决方案,因为恢复旧的行为可能会导致与预期新行为的新jQuery代码的冲突。

重要变更摘要

jQuery作为一个广泛使用的类库,团队通常很难知道在发布之前哪些更改可能会影响到开发人员。尽管这份名单很长,我们认为大多数是边缘案例。许多jQuery项目应该能够运行3.0版本,如果有问题的话,一般只要做轻微的更改。

通过其组件类别列出更改,并以前缀描述,以帮助您了解其影响:

  • 更改:此更改可能会影响现有代码,因为它以某种方式改变了API。大多数时候,影响仅针对特定边缘情况。

  • 功能:此更改是添加API,并且在大多数情况下不应影响现有代码。但是,新功能可能与现有代码相互影响。

  • 已弃用:此功能或API仍然存在于jQuery 3.0中,但不建议使用。它可能会在未来的主版本更新中删除。

请记住,上述的jQuery Migrate插件可以检测和警告这些更改,以便它们可以在现有的代码中修复。

有关所有代码更改的完整详细列表,请参阅 jQuery Core问题跟踪器 中的3.0规划 或版本差异

Ajax

更改:特殊情况的Deferred方法从jQuery.ajax中删除

jQuery.ajax()返回的jqXHR对象是一个jQuery Deferred,并且历史上有三个名称与参数对象的success, error, 和 complete 相匹配的额外的方法。这经常让人困惑,返回的对象应该像Deferred一样处理。从jQuery 3.0开始,这些方法已被删除。作为替代,使用Deferred标准的donefailalways方法,或者使用新的符合Promises/A+规范的thencatch 方法 。

注意,这对通过options对象传递的同名的ajax回调根本没有任何影响,它们继续存在并且不会被弃用。这只影响jqXHR方法。

https://github.com/jquery/jquery/issues/2084

更改:跨域脚本请求必须声明

通过jQuery.ajax()jQuery.get()请求跨域脚本的时候,您现在必须在选项中显式指定dataType: "script"。这是为了防止远程站点提供非脚本内容攻击的可能性,但稍后决定提供具有恶意意图的脚本。由于jQuery.getScript()显式设置dataType: "script",所以它不受此更改的影响。

更改:URL中的 hash 保存在jQuery.ajax()调用中

jQuery.ajax()方法不再自动删除URL中提供的 hash 值,并将完整的URL发送传输(xhr,script,jsonp或自定义传输)。如果服务器端无法处理URL上的hash,请在发送请求之前删除它。

https://github.com/jquery/jquery/issues/1732

功能:jQuery.get()和jQuery.post()增加新的签名

jQuery 3 通过添加settings参数,为jQuery.get()jQuery.post()函数添加了一个新的签名。 它是一个对象,可以拥有许多属性,它和你提供给jQuery.ajax( [settings ] )settings 对象基本相同(愚人码头注: type选项将自动设置为GET;另:实际上这个签名的添加版本为1.12/2.2)。

https://github.com/jquery/jquery/issues/1986

属性(Attribute)

更改:.removeAttr()不再设置 property(特性值) 为 false

在jQuery 3.0之前,在布尔属性(例如checked, selected, 或者 readonly)上使用.removeAttr()方法,将会设置其名称相应的 property(特性)为false。此行为在Internet Explorer的旧版本上是必需的,但对于现代浏览器是不正确
因为属性(attribute)表示初始值,并且 property(特性)表示当前(动态)值。

在DOM元素上使用.removeAttr( "checked" )几乎总是错误。唯一可能有用的情况是,DOM以后要被序列化回HTML字符串。在所有其他情况下,使用.prop( "checked", false )代替。

https://github.com/jquery/jquery/issues/1759

https://github.com/jquery/jquery/issues/2913

更改:多选下拉框(select-multiple)不选择选项将返回空数组

在jQuery 3.0之前,在未选择任何选项的 <select multiple> 元素上调用.val()返回null。这是不方便的,因为如果选择至少一个选项,返回值将是一个数组。此外,如果所有选项都被禁用,jQuery返回值将是一个空数组。为了提高一致性,无选项选择的情况下现在返回一个空数组。

https://github.com/jquery/jquery/issues/2562

功能:SVG文档支持类名(class)操作

SVG从来没有被jQuery完全支持,并且这点在jQuery 3中没有改变。尽管如此,许多jQuery方法也可以在SVG文档上使用。从jQuery 3开始,操作类名的方法,例如 .addClass().hasClass(),支持SVG。

https://github.com/jquery/jquery/issues/2199

弃用:不带参数的 .toggleClass().toggleClass( Boolean )

虽然文档记录了这两种情况的签名,其实际行为从未完全定义。这个不明确的行为现在已被废弃,因此不会被记录。您可能会发现您不小心使用了该功能,因为.toggleClass( undefined )的行为和没有参数的调用是相同的,即使它是无效的输入。

回调( Callback )

功能:SVG文档支持类名(class)操作

如果一个回调对象有一个处理函数在.fire()之后调用.lock()方法,它只阻止未来执行回调列表并且不立即中止当前列表的执行。要停止当前执行,请使用stopOnFalse选项。

https://github.com/jquery/jquery/issues/1990

Core

更改: 在严格模式下运行jQuery 3.0

现在大多数浏览器都支持通过jQuery 3.0使用”use strict”,jQuery 就是用这个指令构建的。您的代码不需要在严格模式下运行,所以大多数现有代码不需要做任何修改。我们三年前遇到的一个案件是ASP.NET 4.0使用arguments.caller.callee在其__doPostBack()方法中尝试跟踪调用堆栈。如果你仍然使用仍然这样做的ASP.NET版本,推荐继续使用jQuery 2.x或更早版本。现代浏览器通过error.stack支持堆栈跟踪,所以它不应该有必要检查arguments.caller.callee

https://github.com/jquery/jquery/pull/3061

https://bugs.jquery.com/ticket/13335

更改:文档就绪(document-ready)处理程序现在是异步的

在jQuery中,自jQuery 1.6以来,document-ready 处理由jQuery.Deferred实现提供支持。作为符合 Promises/A+ 规范的jQuery 3.0 队列的一部分,document-ready 处理程序被异步调用,即使是文档当前已经准备就绪,再添加处理程序。这样提供了代码执行顺序的一致性,与文档是否准备就绪无关。例如,考虑这个代码:

JavaScript代码:
  1. $(function(){

  2.   console.log("ready");

  3. });

  4. console.log("outside ready");

在jQuery 3.0中,将总是log “outside ready”,紧接着是”ready”,不管文档在执行时候是否准备就绪。早期版本可以按任一顺序log消息。

由于处理程序是彼此独立地执行,所以在一个document-ready处理程序中的异常或失败不会阻止其他document-ready处理程序运行。

如果是自定义构建的jQuery,排除了deferred模块,有一种可供选择的document-ready替代品。这个实现支持jQuery.ready promise,但不是一个jQuery.Deferred对象,所以它应该只能通过jQuery.when()使用。

https://github.com/jquery/jquery/issues/1823

https://github.com/jquery/jquery/pull/2891

更改: jQuery.isNumeric() 和自定义的.toString()

jQuery.isNumeric()方法旨在与原始数字,以及可以强制转换为有限数字的字符串一起使用。尤其是,它不再尝试从对象的.toString()方法上获取数字。需要对其他数字进行专门检查的用户可以创建自己的验证函数。

https://github.com/jquery/jquery/issues/2662

更改:弃用.context 并且移除.selector属性

这些属性在jQuery 1.9中已弃用,因为它们只用于过时的.live()方法,并且从未准确地表示当前集合的上下文或选择器。

https://github.com/jquery/jquery/issues/1908

更改:文档中从未记录的内部方法不再暴露

3.0版本从视图中删除了几个方法,意图是私有方法,并且文档中从未记录过:

  • jQuery.swap

  • jQuery.buildFragment

  • jQuery.domManip

https://github.com/jquery/jquery/issues/2224

https://github.com/jquery/jquery/issues/2225

更改:空集合上返回 undefined

除了少数例外,任何有返回值的jQuery方法在空的jQuery集合上应该返回undefined,以符合我们的API指南。以下API已更改,以符合此规则:

  • 尺寸方法: .width(), .height(), .innerWidth(), .innerHeight(), .outerWidth(), 和 .outerHeight()

  • 位置方法: .offsetTop().offsetLeft()

以前,这些方法对于空集合返回null而不是undefined

https://github.com/jquery/jquery/issues/2319

功能:for...of循环可以用于jQuery集合

jQuery 3.0支持ES2015中引入的for...of循环。它允许循环迭代对象,包括Array, Map, 和 Set。当使用这个循环时,获得的值是jQuery集合的DOM元素,一次一个。请注意,使用for...of循环请注意支持的环境,支持ES2015或如Babel转换器。这里是一个例子:

JavaScript代码:
  1. var elems = $(".someclass");

  2. // 经典的 jQuery 方式

  3. $.each(function(i, elem){

  4. // 通过 elem (或 "this" 对象)工作

  5. });

  6. // 较漂亮的 ES2015 方式

  7. for( let elem of elems ){

  8. // 通过 elem工作

  9. }

https://github.com/jquery/jquery/issues/1693

功能:jQuery.ready promise 正式被支持

从jQuery版本1.8开始,jQuery.ready已经作为一个类似 promise 的对象被使用(”thenable”在Promise中的术语)。从jQuery 3.0开始,这个对象通过jQuery.when或原生的Promise.resolve()被支持。不要假设这个对象是一个jQuery Deferred或一些其他类型的promise对象,例如原生的Promise。典型用法如下所示:

JavaScript代码:
  1. $.when( $.ready, $.getScript("optional.js")).then(function(){

  2. // 当 document 准备就绪,并且 optional.js 已经加载或运行

  3. }).catch(function(){

  4. // 一个错误发送时触发

  5. });

https://github.com/jquery/api.jquery.com/pull/530

弃用:jQuery.unique(), 重命名为 jQuery.uniqueSort()

jQuery.unique()方法已重命名为jQuery.uniqueSort(),以使其行为更容易理解。这里没有改变其功能,只有重命名。

弃用:jQuery.parseJSON()

由于jQuery 3.0支持的所有浏览器都支持原生的JSON.parse()方法,因此我们不推荐使用jQuery.parseJSON()

https://github.com/jquery/jquery/issues/2800

弃用:除了 jQuery(function) 以外的 document-ready 处理器

由于历史兼容性问题,有多种方式设置 document-ready 处理程序。以下所有方式都是等效的,并在 document-ready 时调用函数fn

JavaScript代码:
  1. $(fn);

  2. $().ready(fn);

  3. $(document).ready(fn);

  4. $("selector").ready(fn);

从jQuery 3.0开始,添加 document-ready 处理程序的推荐方式是第一个方法,$(fn)。如事件部分所述,$(document).on("ready", fn)事件形式具有略微不同的语义并在jQuery 3.0中被删除。

Data

更改:.data()名称包含中划线

从jQuery 3.0开始,所有 data 名称都以驼峰拼写方式(例如,clickCount)存储在jQuery内部的数据对象中,而不是中划线形式(例如,click-count)。将中划线名称转换为驼峰拼写法的方式,这与标准DOM在CSS和 data 属性中的JavaScript名称是一致的。

一般来说,当设置或获取指定数据项时,例如 .data("right-aligned"),中划线形式在jQuery 3.0中仍然能够工作,但是如果取回data对象,它将具有驼峰拼写法的形式的 data 项(rightAligned)。3.0中的主要区别是 当你在data对象上使用中划线形式的名称时,不要使用.data()API 来获取或设置他们。

例如:

JavaScript代码:
  1. var $div = $("<div />");

  2. $div.data("clickCount",2);

  3. $div.data("clickCount");// 2

  4. $div.data("click-count",3);

  5. $div.data("clickCount");// 3

  6. $div.data("click-count");// 3

  7. var allData = $div.data();

  8. allData.clickCount;// 3

  9. allData["click-count"];// undefined

  10. allData["click-count"]=14;

  11. $div.data("click-count");// 3, 不是 14 ,但是在jQuery 2.x中,返回14

  12. allData.clickCount;// 3

  13. allData["click-count"];// 14

https://github.com/jquery/jquery/issues/2070

https://github.com/jquery/jquery/issues/2257

https://github.com/jquery/jquery/issues/1751

Deferred

更改和功能:jQuery.Deferred 现在兼容 Promises/A+

Deferred已更新,兼容了 Promises/A+ 和 ES2015(也称为 ES6)Promise ,这个变化带来重大影响。

https://github.com/jquery/jquery/issues/1722

https://github.com/jquery/jquery/issues/2102

Resolution

.resolve.reject.notify现在设置undefined的上下文,而不是使用与它们相关联的Deferred对象的promise。要设置显式上下文,使用.resolveWith.rejectWith.notifyWith

https://github.com/jquery/jquery/issues/3060

Callback exit

.then()方法进行了重大更改。尤其是,在.then()回调中抛出的任何异常现在都被捕获并转换为 rejection(拒绝) 值,并且从rejection(拒绝)处理程序返回的任何 non-thenable 值都会变为 fulfillment 值。我们强烈建议您在 promise 链的末尾添加一个.catch()方法(3.0中新增),以避免出现难以调试的问题。您可能会遇到这种新行为,最可能的地方是使用由jQuery.ajax()生成的 Deferred,因为返回的jQXHR对象是jQuery.Deferred的超集。

在jQuery 1.x和2.x中,回调函数中的未捕获异常会停止代码执行。抛出的异常会冒泡直到它在try/catch中被捕获,或冒泡到window并通过 window.onerror触发。

例如,考虑下面这个代码使用 Promises/A+ 新标准的行为:

JavaScript代码:
  1. $.ajax("/status")

  2. .then(function(data){

  3.      whoops();

  4. // 控制台显示:"jQuery.Deferred exception: whoops is not a function"

  5. // 在这个函数中没有代码会继续执行

  6. })

  7. .catch(function(arg){

  8. // 此代码在上面的错误之后执行

  9. // arg 是一个 Error 对象, "whoops is not a function"

  10. });

将其与旧版本的Deferred方法进行比较:

JavaScript代码:
  1. $.ajax("/status")

  2. .done(function(data){

  3.      whoops();

  4. // 控制台显示: "whoops is not a function"

  5. // 在这个函数中没有代码会继续执行

  6. })

  7. .fail(function(arg){

  8. // 此代码不执行,因为异常未捕获

  9. });

注意,当在一个Deferred和JavaScript异常发生时,jQuery会向控制台记录一条消息。这些消息采用jQuery.Deferred exception: (error message)形式。如果你不希望控制台输出任何这样的异常,请将jQuery.Deferred.exceptionHook设置为undefined。如果您需要通过这种方式进一步找到或者报告错误的帮助,请在开发期间使用jquery-deferred-reporter插件来获取堆栈跟踪。

https://github.com/jquery/jquery/issues/2736

Callback invocation

Promises / A +规范说, promises 总是使用单个值来解析,并且处理程序不在this上下文中调用,而jQuery Deferreds有时会将 上下文 和/或多个值传递给它们的处理程序。但在大多数情况下,第一个参数是这些值中最重要的。如果你将其他Promises/A+实现与jQuery混合使用,那么您只能在处理程序中接收到单个参数。为了保持现有代码的完全兼容性,建议只使用jQuery Deferred 并切换到较旧的.done().fail()方法,因为他们保留所有向后兼容的行为:

JavaScript代码:
  1. // 典型的 .then() 旧用法,不兼容Promises/A+

  2. $.ajax("url").then(

  3. // success

  4. function( data, textStatus, jqXHR ){/* code */},

  5. // error

  6. function( jqXHR, textStatus, errorThrown ){/* code */}

  7. );

  8. // 这样重写,以便保持先前的行为

  9. $.ajax("url")

  10. // success

  11. .done(function( data, textStatus, jqXHR ){/* code */})

  12. // error

  13. .fail(function( jqXHR, textStatus, errorThrown ){/* code */});

另一种符合Promises/A+规范的行为变更是,Deferred .then()回调总是异步调用。以前,如果将 .then()回调添加到已经 resolved 或 rejected 的 Deferred 上,该回调将立即并同步运行。

向下兼容性

Deferred 的方法(如.done(), .fail(), 和 .pipe() )保留了以前的行为,因此不兼容 Promises/A+ 。如果需要同步 resolution,不希望将异常转换为 rejection 值,或者 rejection 回调返回转换为fulfillment值,或者想要抛出的错误冒泡到触发函数的外部,您可以使用这些方法,而不是.then().catch()

更改和功能:jQuery.when()的参数

jQuery.when现在能给解析then方法输入的任何参数,作为Promise兼容的“thenable”。这允许更大范围的输入,包括原生的ES6 Promises和Bluebird promises。

此外,现在可以更清楚的识别,多参数调用jQuery.when和单参数或无参数调用之间的区别。多参数调用的行为类似于Promise.all,将 fulfillment 值聚合到 fulfillment 数组中(具有jQuery特有的增强功能,也集合 fulfillment 上下文和支持多值的fulfillments),或者拒收第一个rejection值。单参数和无参数调用的行为类似于Promise.resolve,返回一个Deferred,相同地解析为 thenable 或 类似 Promise-like 输入,或满足其 non-Promise 输入(如适用)。从jQuery 3.0开始,这两个都返回一个新的Deferred(以前版本在使用单个Deferred输入调用时,不会创建新的Deferred)。

https://github.com/jquery/jquery/issues/2018

https://github.com/jquery/jquery/issues/2546

https://github.com/jquery/jquery/issues/3029

更改:jQuery.when() 的进度通知

从jQuery 3.0开始,jQuery.when() 方法不再传递进度通知从输入Deferred到输出Deferred。进度消息不是 Promises/A+ 规范的一部分,并且jQuery.when()中进度通知的行为之前就没有出现在jQuery API文档中。

https://github.com/jquery/jquery/issues/2710

尺寸大小

更改: .width(), .height(), .css(“width”), 和 .css(“height”)能够返回非整数值

在3.0版之前,jQuery使用DOM的offsetWidthoffsetHeight属性来确定元素的尺寸大小(宽高),并且这些属性总是返回整数。使用jQuery 3.0,我们通过DOM getBoundingClientRect API来获得更精确的值,并且这些值可以不是整数。如果你的代码总是期望尺寸大小(宽高)为整数,它可能需要调整处理返回值的精度。

https://github.com/jquery/jquery/issues/1724

更改: window上的.outerWidth() 或 .outerHeight() 包含滚动条的宽/高

调用$(window).width()返回“内容宽度”不包括任何滚动条(因为内容超过元素的高度而造成浏览器自动添加的滚动条)。这个不同于用于CSS媒体查询的宽度,其包括滚动条的宽度。为了提供等同于CSS媒体查询概念的宽度,$(window).outerWidth()方法现在返回的宽度值包括滚动条宽度。这相当于DOM属性window.innerWidth.outerHeight()同样适用。

https://github.com/jquery/jquery/issues/1729

Effects(效果)

更改:.show(), .hide(), and .toggle() 方法不考虑更多的样式表更改

jQuery用来显示和隐藏元素的代码已被更新,更新后的代码只专注于内联样式,而不是计算样式,对于样式表的display值,应该尽可能增加以兼容响应式设计技巧(其中活动的样式表规则可以在设备改变方向(愚人码头注:横屏,竖屏)/窗口调整大小等时动态地改变)。因此,未关联元素不再被视为 hidden (隐藏),除非它们有内联样式display: none,同样的 ,从jQuery 3.0开始,.toggle()将不再区分关联和未关联元素。

此外,虽然.show()和类似的调用将继续强制迫使 被样式表规则隐藏的元素 可见,支持此功能会减慢所有显示/隐藏操作,并且不建议使用它。在这种情况下,确定设置哪个display(显示)值也已经被简化,当body级别规则按类型隐藏元素时,默认为“block”。

任何代码,希望隐藏的元素通过他们之前的 计算 display(显示)样式来重新显示,或未关联的元素处理为隐藏,应予以审查。团队创建了一个 与显示状态和显示/隐藏操作 所有可能相关的表格,以便简化非空内联样式的设置。

功能:动画现在使用requestAnimationFrame

在支持requestAnimationFrame API的平台上,jQuery现在执行动画时使用这个API,对于老的浏览器(如IE9),它会使用之前的API。这将使得动画更流畅,更少的CPU处理时间 - 并在移动设备上更加省电。

jQuery几年前尝试使用了requestAnimationFrame,但与现在的代码存在严重的兼容性问题,所以我们不得不重新实现它。我们认为,我们已经在浏览器标签页在视图中不可见的时候,通过暂停动画解决了大部分的问题。仍然,任何依赖于动画的代码总是实时运行
是一个不切实际的假设。

弃用: jQuery.fx.interval

现在requestAnimationFrame正在应用于动画,所以jQuery.fx.interval属性在大多数浏览器上被忽略。但是它仍然存在于jQuery 3.0中,并在一些浏览器(如IE9)中仍然需要使用,但将在未来的主要版本中会被删除。

弃用:附加 easing(缓动)函数参数

通过.animate()调用的 easing(缓动)函数传递单个参数,完成的百分比。一些较旧的代码假设它传递派生自百分比的额外参数。这些额外参数可能不会出现在未来的主版本更新中。

一个老的 easing(缓动)方法的例子:

JavaScript代码:
  1. $.easing.easeInOutSine =function(x, t, b, c, d){

  2. return-c/2*(Math.cos(Math.PI*t/d)-1)+ b;

  3. };

同样的 easing(缓动)方法重写:

JavaScript代码:
  1. $.easing.easeInOutSine =function(x){

  2. return-0.5*(Math.cos(Math.PI*x)-1);

  3. };

https://github.com/jquery/api.jquery.com/issues/912

Event (事件)

更改:.load(), .unload(), 和 .error() 被移除

这些方法是事件操作的快捷方式,但有几个API限制。事件.load()方法与ajax .load()方法冲突。.error()方法不能与window.onerror一起使用,因为这种方式的DOM方法已经被定义。如果您需要通过这些名称绑定事件,请使用.on()方法,例如 将$("img").load(fn)更改为$(img).on("load", fn)

https://github.com/jquery/jquery/issues/2286

更改: .on(“ready”, fn) 被移除

jQuery不再支持名为"ready"的合成事件(可以与事件函数一起使用)。此事件容易出错,并在jQuery 1.8中弃用,因为它只会调用在文档准备好(document ready)之前附加的回调函数。用$(fn)替换任何用法,它可以可靠地工作。

https://github.com/jquery/jquery/issues/2264

更改: event.pageX和event.pageY 标准化删除

jQuery 3.0官方支持的所有浏览器在其事件中都提供了pageX和pageY属性,所以jQuery代码从其他事件属性计算出来的这些值已被删除。此更改不不会影响主流浏览器,但也有这些属性不存在的可能性。如果碰到这种情况,请告诉我们,提交一个bug。

https://github.com/jquery/jquery/issues/3092

更改:jQuery.event.propsjQuery.event.fixHooks 被移除

jQuery的事件处理性能提高,主要感谢事件属性管理的整改。主要的改进是,jQuery现在只计算或复制第一次访问的属性,而不是计算和复制它们。强制布局的属性有可能是一个真正的大赢家,事件处理程序甚至可能不需要。我们知道的最常见的用法是为鼠标事件添加属性,这不再是必要的,因为在jQuery 3.0中这些事件已经被支持。如果你仍然需要他们,jQuery Migrate插件提供了对这些属性的支持。相关但未出现在文档中mouseHookskeyHooks列表也被删除。在定义新的API之前,团队有兴趣了解其他用例,如果你有使用常见,会有告诉我们。

https://github.com/jquery/jquery/issues/3103

https://github.com/jquery/jquery/issues/1746

https://learn.jquery.com/events/event-extensions/

更改:带有错误选择器的委托事件会立即抛出错误

在jQuery 3.0之前,选择器在委托事件中直到第一次在元素上触发事件时才会被使用。这有时会导致难以调试的情况,错误脱离发生错误的时间和代码。现在,当事件被附加时,会检查选择器,并且如果它是无效的,则抛出错误。这被认为是一个突破性的变化,当附加事件从未触发时,唯一可能的原因是代码使用无效的选择器,并且这种情况下,以前从未抛出过错误。

https://github.com/jquery/jquery/issues/3071

弃用:.bind()和.delegate()方法

五年前在jQuery 1.7中,我们介绍了用.on() 方法附加事件处理程序。从3.0开始,旧的.bind(), .unbind(), .delegate().undelegate() 方法已被标记为弃用,但仍然存在。API文档说明了如何使用.on().off()方法重写调用。

Manipulation(DOM操作)

更改:.wrapAll(function) 只调用一次 function

在以前的版本中,当传递一个函数作为参数时,.wrapAll() 方法和 .wrap() 方法行为是完全一样的。这已经被更正;现在.wrapAll(function)只调用一次 function参数,使用函数调用得到的字符串结果包装整个集合。

https://github.com/jquery/jquery/issues/1843

Offset(偏移)

更改:.offset()方法的无效输入

当使用.offset()方法时,jQuery集合中的第一个项必须是带有 getBoundingClientRect()方法的DOM元素。(jQuery 3.0支持的所有浏览器都有这个API。)任何其他输入可能会导致jQuery抛出一个错误。还要注意,元素必须是可见的,并且在当前文档中(即,不脱离文档)。

https://github.com/jquery/jquery/issues/2115

https://github.com/jquery/jquery/issues/2114

Selector (选择器)

更改::hidden:visible 的行为

如果一个元素,它有一个从DOM getClientRects()方法返回的布局盒模型,那么这个元素被认为是可见的,即使该元素的高度和/或宽度为0。这意味着诸如<br />或空的<span>之类没有高度的元素被认为是可见的。

https://github.com/jquery/jquery/issues/2227

https://github.com/jquery/jquery/issues/2604

更改:jQuery("#") and .find("#") 是无效无法

如果一个选择器字符串只包含一个井号标记(hash-mark),jQuery 3.0将会抛出语法错误。在以前的版本中,$("#")返回一个空集合,.find(“#”)会抛出一个错误。

https://github.com/jquery/jquery/pull/1682

功能:新增jQuery.escapeSelector()方法

新增的jQuery.escapeSelector( selector )方法接受选择器字符串并转义任何在CSS选择器中有特殊的含义字符。它本质上是CSS工作组的CSS.escape()方法的shim(垫片),它能在所有jQuery支持的浏览器上运行。此方法对于一个CSS类名或一个ID包含的字符在CSS中具有特殊含义的情况下非常有用,如点或分号。。

例如,如果页面上有一个id为”abc.def”的 元素,它不能用$( "#abc.def" )选择,因为选择器被解析为“一个 id 为’abc’的元素,具有’def’样式类名“。但是,它可以用$( "#" + $.escapeSelector( "abc.def" ) )来选择。

https://github.com/jquery/jquery/issues/1761

弃用:jQuery.expr[":"]jQuery.expr.filters

These two names for defining custom selectors through jQuery’s Sizzle selection engine are the same as jQuery.expr.pseudos, so we are deprecating the redundant names.

这两个名称 通过jQuery Sizzle选择器引擎 用于定义自定义选择器,与jQuery.expr.pseudos相同,因此我们不赞成使用冗余名称。

Serialize

更改:jQuery.param()不再将%20转换为加号

在通过jQuery.ajax() POST形式提交表单的时候,application/x-www-form-urlencoded编码规范规定出现的任何空格都应该转换为+字符。以前,jQuery通过在jQuery.param()中进行转换来实现这一点。现在,这个转换已移至jQuery.ajax() 。通过jQuery.param()编码的数据将空格转换为%20,这样直接它可以与原生的 JavaScript encodeURIComponent()decodeURIComponent()方法兼容。

https://github.com/jquery/jquery/issues/2658

Traversing

更改:.andSelf() 被移除, 请使用 .addBack()

.andSelf()方法在jQuery 1.8中已被标记为弃用,现在在3.0中被删除,赞成使用.addBack()方法,以为.addBack()方法更好地解释它的作用,并且还接受可选的选择器参数以过滤添加回来的内容。

翻译自:https://jquery.com/upgrade-guide/3.0/

觉得文章有用?立即: 和朋友一起 共学习 共进步!

建议继续学习:

  1. JQuery实现Excel表格呈现    (阅读:45711)
  2. 分享一个JQUERY颜色选择插件    (阅读:9629)
  3. jQuery插件---轻量级的弹出窗口wBox.    (阅读:9100)
  4. 10个强大的Ajax jQuery文件上传程序    (阅读:7081)
  5. jQuery的data()方法    (阅读:6569)
  6. jQuery性能优化指南    (阅读:6318)
  7. jQuery Color Animations颜色动画插件    (阅读:6009)
  8. 精于图片处理的10款jQuery插件    (阅读:5234)
  9. jQuery中getJSON跨域原理详解    (阅读:4936)
  10. 配合jquery实现异步加载页面元素    (阅读:4721)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2017 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号