揭晓 jQuery 3：17 个强大的新功能以及如何利用它们
自从 jQuery 开始震撼网络以来已经有 10 多年的历史了，并且它之所以能一直存在是有充分理由的。早在 2015 年 7 月，jQuery 就宣布了 3.0 版本的第一个 alpha——时隔很长一段时间的一次重大更新。 他们为此已经努力了近两年。新版本承诺更精简、更快的 jQuery，并考虑到向后兼容性。
当前版本3.1.1 修复了许多错误，添加了新方法，删除了一些函数并更改了一些函数的行为。 让我们来看看他们添加了哪些新功能以及如何使用它们。
17。隐藏和显示方法
为了增加与响应式设计的兼容性，jQuery 3 已增强以隐藏许多元素。对54个样本进行的测试表明，新版本比之前的版本快了2%。
除此之外，.hide()、.show() 和 .toggle() 方法将专注于内联样式而不是计算样式。这样，他们将尽可能更好地尊重样式表的显示值，这意味着 CSS 规则可以根据窗口大小或设备重新定向等事件动态更改。
<前>07阅读：28 种令人惊叹的 CSS3 效果，为您的网站带来现代外观
16。 WrapAll() 和 Unwrap() 函数
在 jQuery 2 中，传递函数时 .wrapAll() 方法的行为与 .wrap() 类似。现在已经改变了 - .wrapAll(function) 调用其函数一次，使用函数调用的字符串结果来包装整个集合。
<前>16在 jQuery 3 中，unwarp() 方法有一个可选的选择器参数。该方法的新签名是：
<前>24它允许您传递包含选择器表达式的字符串以在父元素中进行匹配。如果存在匹配，则匹配的子元素将被解包，否则不会。
15。考虑滚动条宽度/高度
在 jQuery 2 中，调用 $(window).width() 返回“内容宽度”，如果内容超出元素的尺寸，则不包括浏览器添加的任何滚动条。为了提供与 CSS 媒体查询等效的度量，$(window).outerWidth() 和 $(window).outerHeight() 现在返回宽度和高度，包括滚动条的宽度和高度。这相当于 DOM 属性 window.innerWidth。
14。 data() 的行为
在 jQuery 3 中，data() 方法的行为已略有更改，以使该方法符合数据集 API 规范。现在它会将所有属性的键转换为驼峰式大小写。
<前>38如果您使用的是旧版本，您将在控制台上得到以下结果：
<前>46在 jQuery 3 中，您将得到：
<前>54正如您所看到的，属性名称采用驼峰式大小写形式，没有破折号，而在旧版本中，它仍然是小写并保留破折号。
13。类操作支持 SVG
jQuery 仍然不完全支持 SVG，但操作 CSS 类名的方法（如 .hasClass() 或 .addClass()）可用于定位 SVG 文档。您可以在 SVG 中使用 jQuery 更改（添加、切换、删除）或查找类，然后使用 CSS 设置类的样式。
12。可见和隐藏过滤器
jQuery 3 修改了 :visible 和 :hidden 过滤器的含义。如果元素有任何布局框（包括零宽度和高度的布局框），它就会认为元素是可见的。例如，br元素和没有内容的内联元素将被:visible过滤器选中。
如果您有以下 HTML 页面：
<前>67然后运行语句：
<前>79在 jQuery 1 和 2 中，您将得到 0 结果，但在此版本中，结果将为 3。
11。宽度和高度不再舍入
只要浏览器支持，jQuery 现在就会以浮点数而不是整数返回 .width() 和 .height() 的值。对于寻求亚像素精度来设计网页的用户来说，这可能是个好消息。
例如，如果宽度为 100px 的容器元素内有 3 个宽度为三分之一 (33.3333333%) 的元素：
<前>86如果尝试获取子元素的宽度：
<前>96您将得到值 33.3333333，更准确的结果。
10。额外的安全层
已集成额外的安全层来防御跨站点脚本 (XSS) 攻击。它要求开发人员在 $.ajax() 和 $.get() 方法的选项中指定 dataType:”script”。这可以防止远程站点提供非脚本内容但进一步决定提供恶意脚本的攻击可能性。由于 jQuery.getScript() 显式设置了 dataType:”script”，因此不受此更改的影响。
<前>1039。无效的哈希标记
如果选择器字符串只包含哈希标记，例如 jQuery(“#”) 和 .find(“#”)，则 jQuery 3 会引发语法错误。在旧版本中，$(“#”) 返回一个空集合，而 .find(“#”) 抛出错误。
8。转义字符串的新方法
新的 jQuery.escapeSelector() 方法允许您转义 CSS 选择器中具有特殊含义的任何字符串或字符。当 ID 或类名字符在 CSS 中具有特殊含义（例如分号或点）时，它非常有用。
例如，如果页面上的某个元素的 id 为“abc.xyz”，则无法使用 $(“abc.xyz”) 选择它，因为选择器被解析为 id 为“abc”的元素，该元素也具有类“xyz”。但是，可以使用新方法 $(“#” + $.escapeSelector(“abc.xyz”)) 来选择它。
7。 jQuery.when() 参数
在 jQuery 3 中，如果您将带有 then() 方法的输入参数添加到 $.when() 中，它将被解释为与 Promise 兼容的“thenable”。这允许更广泛的输入，包括 Bluebird Promise 和 ES6 Promise，从而可以编写更复杂的异步回调。
<前>111多参数 jQuery.when 调用的行为类似于 Promise.all，将实现值聚合到实现数组中，或者使用第一个拒绝值进行拒绝。单参数和零参数调用的行为类似于 Promise.resolve，返回一个与 thenable 相同解析的 Deferred，或者使用其非 Promise 输入来实现。
此外，jQuery.when() 方法不再将进度通知从输入 Deferred 传递到输出 Deferred。
6。 URL 中的哈希值被保留
jQuery.ajax() 方法现在将完整的 URL 发送到传输（脚本、xhr、jsonp 或自定义传输）。它不再删除 URL 中的哈希（如果存在）。但是，如果连接另一端的服务器无法处理 URL 上的哈希值，则需要在发送请求之前手动将其剥离。
5。延迟对象与 JS Promise 兼容
Deferreds 是可链接的对象，可以创建回调队列。 jQuery 3 使延迟对象与新的 Promises/A+ 标准兼容。 .then() 方法有一个关键的变化。现在，.then() 回调中引发的任何异常都会被捕获并转换为拒绝值。从拒绝处理程序返回的不可使用的值将转换为实现值。
旧式Deferred方法：
<前>126新标准Promises/A+行为
<前>1304。新的动画 API
jQuery 3 使用 requestAnimationFrame() API 来执行动画。这个新的 API 可以更流畅、更快地运行动画，消耗更少的 CPU 时间。它仅在支持它的浏览器中使用。对于 Internet Explorer 9 等较旧的浏览器，jQuery 使用其较旧的 API 作为后备方法。
阅读：面向设计师的 24 个 CSS3 和 HTML5 动画工具
3。 jQuery 3 在严格模式下运行
大多数支持 jQuery 3 的浏览器都使用严格模式，新版本是在构建时考虑到该指令的。虽然 jQuery 3 是在严格模式下编写的，但您的代码不需要在严格模式下运行，因此如果您要迁移到当前版本，则无需重写现有代码。但是，有一个例外 - 由于严格模式，某些版本的 ASP.net 不兼容。
如果您运行的是 ASP.net 4.0，它使用 Arguments.caller.callee 来尝试通过 doPostBack() 方法中的调用堆栈进行跟踪，那么您最好继续使用 jQuery 2.x 或更早版本。现在的浏览器通过error.stack支持堆栈跟踪，因此没有必要检查arguments.caller.callee。
2。 Get 和 Post 方法的新签名
jQuery 为 $.get() 和 $.post() 实用函数提供了新的签名，以将它们与 $.ajax() 对齐。新的签名是设置参数。
<前>143对象设置可以有许多属性。它与您可以提供给 $.ajax() 的对象相同。将对象传递给 $.get() 和 $.post() 与 $.ajax() 的唯一区别是 method 属性始终被忽略，因为 $.get() 和 $.post() 有一个预设的 HTTP 方法来执行 Ajax 请求（GET 和 POST）。
考虑一个代码：
<前>155尽管有 method 属性，该语句不会发送 POST 请求，而是发送 GET 请求。
1。 For...of 循环
jQuery 3 支持 ECMAScript 6 规范中引入的 for...of 循环。它允许您循环遍历可迭代对象，例如 Map、Set、Array 等。使用此循环时，获取的值是 jQuery 集合的 DOM 元素，一次一个。
阅读：26 个现代 jQuery 插件，让您的网站变得更好
for…of 循环可用于替换以前的 $.each( ) 语法，并使循环遍历 jQuery 集合的元素变得更加容易。假设您要为页面的每个输入元素分配一个名称。
jQuery 2 代码看起来像......
<前>162jQuery 3 代码将类似于...
<前>175工业技术