jQuery 3 中的新增功能汇总介绍

从jQuery 震撼整个 Web ,至今已有十年了,我们有很好的理由一直坚持使用维护它。jQuery为用户提供了 DOM 进行操作,执行 Ajax 请求,创建动画等等,极为友好的接口。此外,与 DOM API 不同的是,jQuery 采用了 复合模式(composite pattern)。 正因为如此,你可以在一个jQuery集合上调用jQuery方法,而不用担心集合包含的元素数量(零,一个或多个)。

在未来的几周内,随着 jQuery 3 的发布,jQuery 会到达一个重要的里程碑。jQuery 3 修复了很多 bug,增加了新的方法,弃用并移除了一些功能,并改变了一些功能的行为。在这篇文章中,我重点讲解jQuery 3所带来的一些最大的变化。

新特性(New Features)

在下面的章节中,我将讨论jQuery 3中新增的重要特性。

for…of 循环

jQuery 3 将提供for...of循环语句,可以用来遍历一个jQuery集合所有的 DOM 元素。这种新的迭代器ECMAScript 2015(又名的ECMAScript6)规范的一部分。它能实现对可遍历对象(包括 Array、Map、Set 等)的循环。

当使用这个新的迭代方法时,您每次接收的值不是一个jQuery集合,而是一个DOM元素。当你对一个jQuery集合执行操作时,这个新的迭代方法可以少许改善你的代码。

为了理解这个迭代方法是如何工作的,假设你想给页面中每个input元素分配一个 ID。在 jQuery 3 之前,你可以这样写:

var $inputs = $('input'); for(var i = 0; i < $inputs.length; i++) { $inputs[i].id = 'input-' + i; }

而在 jQuery 3 中,你可以这样写:

var $inputs = $('input'); var i = 0; for(var input of $inputs) { input.id = 'input-' + i++; }

$.get() 和 $.post()的新签名

jQuery 3 为 $.get() 和 $.post() 工具函数增加了新签名,为的是使得它们和 $.ajax() 的接口风格保持一致。新签名是这样的:

$.get([settings])
 
$.post([settings])

settings 是一个可以具有许多属性的对象。这是对象和 提供给$.ajax() 的对象 是相同的。更多详细的介绍,详细介绍,请参考 $.ajax()页面。
传递给$.get() 和 $.post() 的对象,跟传递给 $.ajax() 的对象相比,唯一的区别是前者 method 属性总是会被忽略。其原因是,$.get() 和 $.post() 都有一个预设的HTTP方法来执行Ajax请求( $.get() 用 GET,而 $.post() 用 POST)。一般说来,你不要用 $.get()尝试发送 POST 请求。

考虑下面这段代码:

$.get({ url: 'https://www.audero.it', method: 'POST' // This property is ignored });

尽管设置了method属性,该语句还是不能发送 POST 请求,而只能发送 GET 请求。

采用 requestAnimationFrame() 来实现动画

所有现代浏览器,包括Internet Explorer10及以上版本,都支持 requestAnimationFrame。jQuery 3 将会在内部采用这个 API 来实现动画,以便达到更流畅、更省CPU资源的动画效果。

unwrap()

jQuery 3 为 unwrap() 方法增加了一个可选的选择器参数。这个方法的新签名为:

unwrap([selector])

有了这一变化,你就可以传入包含一个选择器表达式的字符串,在父元素内进行匹配。如果存在匹配,匹配的子元素将被解包;否则,不进行任何操作。

被变更的特性

jQuery 3 还修改了一些特性的行为。

:visible 和 :hidden

jQuery 3修改了 :visible 与 :hidden 过滤器的含义。只要元素具有任何布局盒,包括那些宽度和/或高度为0的情况,则元素被认为是:visible。比如说,br 元素和没有内容的内联元素进可以通过 :visible 过滤器进行选择。

所以,假如页面有如下标记:

<div></div> <br />

然后执行下面的语句:

console.log($('body :visible').length);

在 jQuery 1.x 和 2.x 中,你得到的结果会是 0;但在 jQuery 3 中,你会得到 2。

data()

另一个重要变化是跟 data() 方法的行为有关。调整主要是为了让该方法符合 Dataset API 规范。jQuery 3 将所有属性的键都改为驼峰式大小写形式。要理解这个变化,先看下面这个例子。

<div></div>

如果你使用 jQuery 3 之前的版本,你可以写如下代码:

var $elem = $('#container'); $elem.data({ 'my-property': 'hello' }); console.log($elem.data());

您将在控制台上获得如下结果:

{my-property: "hello"}

而在jQuery 3 中,你会获得如下结果:

{myProperty: "hello"}

请注意,在 jQuery 3 中,属性名已经变成了驼峰形式,没有横杠(连字符);而在以前的版本中,属性名会保持全小写,并原样保留横杠(连字符)。

Deferred 对象

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzssgd.html