jQuery 详解（含最新的3.x版本）

• jQuery 版本的异同点
• jQuery 有哪些功能模块
• jQuery 3x 有哪些新特性
  • • jQuery 3 运行在 Strict Mode 下
    • forof
    • get 和 post 函数的新签名
    • 采用 requestAnimationFrame 来实现动画
    • 对包含特殊含义的字符串提供转义的新方法
    • unwrap 方法
    • 类操作方法支持 SVG
    • 对于防止 XSS 攻击的额外保护
• jQuery 3 中有变更的特性
  • • visible 和 hidden
    • data 方法
    • Deferred 对象
    • SVG 文档
• jQuery 3 中废弃移除的方法和属性
  • • 废弃 bindunbinddelegate 和 undelegate 方法
    • 移除 loadunload 和 error 方法
    • 移除 contextsupport 和 selector 属性
• 修复的 Bug
  • • width 和 height 的返回值将不再取整
    • wrapAll 方法
• 结论
• 译注
• API

jQuery 版本的异同点

目前 jQuery 有三个大版本：
1.x ： 兼容 IE 6,7,8，使用广泛
2.x ： 不兼容 IE 6,7,8，内核发生了改变，性能上有所提升
3.x ： 不兼容 IE 6,7,8，迎合最新的 ECMAScript2015 ，修复了很多 bug，增加了一些新方法，对一些方法的行为做了优化和更改，提供最新的 API

说明：
1. jQuery 2.x 不是 1.x 的后续或者升级版本。（很多人会误认为 jQuery 2.x 是在 1.x 的版本上有大的升级改动）

jQuery 2.x 和 1.x 是保持同步版本迭代的，它们之间的区别主要就在于 对 IE 6,7,8 的支持

那么，你在选择版本的时候要考虑，你是否要兼容低版本 IE 浏览器。

jQuery 有哪些功能模块

• ajax: All AJAX functionality: $.ajax()，$.get()，$.post()，$.ajaxSetup()，.load()，transports，and ajax event shorthands such as .ajaxStart().

• ajax/xhr: The XMLHTTPRequest AJAX transport only.

• ajax/script: The <script> AJAX transport only; depends on the ajax/script transport.

• ajax/jsonp: The JSONP AJAX transport only; depends on the ajax/script transport.

• css: The .css() method. Also removes all modules depending on css (including effects, dimendions, and offset).

• css/showHide: Non-animated .show(), .hide() and .toggle(); can be excluded if you use classes or explicit .css() calls to set the display property. Also removes the effects module.

• deprecated: Methods documented as deprecated but not yet removed.

• dimendions: The .width() and .height() methods, including inner- and outer- variations.

• effects: The .animate() method and its shorthands such as .slideUp() or .hide("slow").

• event: The .on() and .off() methods and all event functionality. Also removes event/alias.

• event/alias: All event attaching/triggering shorthands like .click() or .mouseover().

• event/focusin: Cross-browser support for the focusin and focusout events.

• event/trigger: The .trigger() and .triggerHandler() methods. Used by alias and focusin modules.

• offset: The .offset(), .position(), .offsetParent(), .scrollLeft(), and .scrollTop() methods.

• wrap: The .wrap(), .wrapAll(), .wrapInner(), and .unwrap() methods.

• core/ready: Exclude the ready module if you place your scripts at the end of the body. Any ready callbacks bound with jQuery() will simply be called immediately. However, jQuery(document).ready() will not be a function and .on("ready", ...) or similar will not be triggered.

• deferred: Exclude jQuery. Deferred. This also removes jQuery. Callbacks. Note that modules that depend on jQuery. Deferred(AJAX, effects, core/ready) will not be removed and will still expect jQuery. Deferred to be there. Include your own jQuery. Deferred implementation or exclude those modules as well (grunt custom: -deferred, -ajax, -effects, -core/ready).

• exports/global: Exclude the attachment of global jQuery variables ($ and jQuery) to the window.

• exports/amd: Exclude the AMD definition.

jQuery 3.x 有哪些新特性

目前所能看到的最新版是 2017年3月21日 发布的 jQuery-3.2.1 .

jQuery 3 运行在 Strict Mode 下

大多数支持jQuery 3的浏览器都支持strict mode，而在本次更新中对此进行了规定。
虽然jQuery 3是写在strict mode中的，但是你需要了解的是你的代码并不需要运行在strict mode中，因此如果你想要把以前的代码迁移到jQuery 3，你不需要对已存在的jQuery代码进行重写。Strict和non-strict mode的JavaScript代码可以和谐共存。
这里有一些例外：某些版本的ASP.NET，因为strict mode的缘故，无法与jQuery 3兼容，如果你的代码涉及到了ASP.NET，你可以查看关于 strict mode的细节 。

for…of

在 jQuery 3.x 中，我们可以用 for...of 循环语句来迭代一个 jQuery 集合中的所有 DOM 元素。这种新的迭代方法是 ECMAScript 2015 规范中的一部分。这个方法可以对 “可迭代对象”（比如 Array、Map、Set 等）进行循环。

当使用这种新的迭代方法时，你在循环体内每次拿到的值并不是一个 jQuery 对象，而是一个 DOM 元素（这一点跟 .each() 方法类似）。当你在对一个 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++
}

jQuery 有一个 .each() 方法，也可以

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

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

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

$.get() 和 $.post() 的参数对象与传给 $.ajax() 的参数相比，唯一的区别就是前者的 method 属性总是会被忽略。原因其实也很简单，$.get() 和 $.post() 本身就已经预设了发起 Ajax 请求的 HTTP 方法了（显然 $.get() 就是 GET，而 $.post() 就是 POST）。

假设有以下一段代码：

$.get({ url: '/use/info', method: 'POST' // 这个属性将被忽略 })

不管我们把 method 属性写成什么，这个请求总是会以 GET 的方式发出去。

采用 requestAnimationFrame() 来实现动画

所有现代浏览器（包括 IE10 及以上）都是支持 requestAnimationFrame 的。jQuery 3 将会在内部采用这个 API 来实现动画，以便达到更流畅、更省资源的动画效果。
新的 API 只用于支持它的浏览器，对于那些更老的浏览器（如 IE9）jQuery 使用先前的 API 来作为显示动画的后备方案。

对包含特殊含义的字符串提供转义的新方法

新的 jQuery.escapeSelector() 提供了对在 CSS 中存在特殊含义的字符串或字符进行转义的方法，该方法可使这些字符串或字符能够继续用于 jQuery 选择器中，而无需对那些无法进行正确理解的 JavaScript 解释器进行转义。
这个 示例 可以让你更好的了解这个全新的方法：
举个例子，页面中某个 ID 为 “abc.def” 的元素由于选择器将其解析为 ID为“abc”且包含一个名为“def”的类的对象， 而无法被 $( "#abc.def" ) 选定。但是它可以由 $( "#" + $.escapeSelector( "abc.def" ) ) 来进行选定。
我无法确定发生中情况的频率，但是假如你碰到过这种类似的情况，这无疑给了你一个解决该问题的简单方法。

unwrap() 方法

jQuery 3 为 unwrap() 方法增加了一个可选的 selector 参数。这个方法的新签名是这样的：

unwrap([selector])

有了这个新特性，你就可以给这个方法传入一个字符串，其内容为选择符表达式，用它来对当前元素的父元素进行匹配。如果匹配，则父元素这一层将被剥除；如果不匹配，则不进行任何操作。

类操作方法支持 SVG

不幸的是，jQuery 3现在还无法完整的支持SVG，但是对于 操作CSS类名称 的jQuery方法，如 .addClass() 和 .hasClass() 现在可以将SVG文档作为目标。这意味着你可以修改（添加、删除、切换）或者查找SVG（可缩放矢量图形）下的jQuery类，然后使用CSS的类样式。（ 相关阅读：Styling Scalable Vector Graphic (SVG) with CSS ）

对于防止 XSS 攻击的额外保护

jQuery 3 增加一个额外的安全层用户用于防备跨站点脚本（XSS）攻击，它需要开发者指定 $.ajax() 和 $.get() 方法中的选项为 dataType: “script” 。
换言之，如果你想要执行跨站点的脚本请求，你必须在这些方法中做出这样的声明。
新的改变对于当“远程站点传递非脚本内容之后又提供有恶意脚本的服务内容”的情况是非常有效的。这个变化不会影响 $.getScript() 方法，因为它明确的设置了 dataType: “script” 选项。

jQuery 3 中有变更的特性

:visible 和 :hidden

jQuery 3 将会修改 :visible 和 :hidden 过滤器的含义。只要元素具有任何布局盒，哪怕宽高为零，也会被认为是 :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 id="container"></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 对象

jQuery 3 还改变了 Deferred 对象的行为。 Deferred 对象可以说是 Promise 对象的前身之一，它实现了对 Promise/A+ 协议 的兼容。这个对象以及它的历史都相当有意思。

在 jQuery 1.x 和 2.x 中，传给 Deferred 的回调函数内如果出现未捕获的异常，会立即中断程序的执行（即静默失败，其实 jQuery 绝大多数回调函数的行为都是这样的）。而原生的 Promise 对象并非如此，它会抛出异常，并不断向上冒泡，直至到达 window.onerror（通常冒泡的终点是这里）。如果你没有定义一个函数来处理这个错误事件的话（通常我们都不会这么做），那这个异常的信息将会被显示出来，此时程序的执行才会停止。

jQuery 3 将会遵循原生 Promise 对象的模式。因此，回调内产生的异常将会导致失败状态（rejection），并触发失败回调。一旦失败回调执行完毕，整个进程就将继续推进，后续的成功回调将被执行。

为了让你更好的理解这个差异，让我们来看一个小例子。比如我们有如下代码：

var deferred = $.Deferred();

deferred
  .then(function() {
    throw new Error('An error');
  })
  .then(
    function() {
      console.log('Success 1');
    },
    function() {
      console.log('Failure 1');
    }
  )
  .then(
    function() {
      console.log('Success 2');
    },
    function() {
      console.log('Failure 2');
    }
  );

deferred.resolve();

在 jQuery 1.x 和 2.x 中，只有第一个函数（也就是抛出错误的那个函数）会被执行到。此外，由于我们没有为 window.onerror 定义任何事件处理函数，控制台将会输出 “Uncaught Error: An error”，而且程序的执行将中止。

而在 jQuery 3 中，整个行为是完全不同的。你将在控制台中看到 “Failure 1” 和 “Success 2” 两条消息。那个异常将会被第一个失败回调处理，并且，一旦异常得到处理，那么后续的成功回调将被调用。

SVG 文档

没有哪一个 jQuery 版本（包括 jQuery 3）曾官方宣称支持 SVG 文档。不过事实上有很多方法是可以奏效的，此外还有一些方法在以前是不行的（比如操作类名的那些方法），但它们在 jQuery 3 中也得到了更新。因此，在 jQuery 3 中，你应该可以放心使用诸如 addClass() 和 hasClass() 这样的方法来操作 SVG 文档了。

jQuery 3 中废弃，移除的方法和属性

废弃 bind()、unbind()、delegate() 和 undelegate() 方法

jQuery 在很久以前就引入了 on() 方法，它提供了一个统一的接口，用以取代 bind()、delegate() 和 live() 等方法。与此同时，jQuery 还引入了 off() 这个方法来取代 unbind()、undelegated() 和 die() 等方法。从那时起，bind()、delegate()、unbind() 和 undelegate() 就已经不再推荐使用了，但它们还是一直存在着。

jQuery 3 终于开始将这些方法标记为 “废弃” 了，并计划在未来的某个版本（很可能是 jQuery 4）中将它们彻底移除。因此，请在你的项目中统一使用 on() 和 off() 方法，这样你就不用担心未来版本的变更了。

移除 load()、unload() 和 error() 方法

jQuery 3 彻底抛弃了 load()、unload() 和 error() 等已经标记为废弃的方法。这些方法在很早以前（从 jQuery 1.8 开始）就已经被标记为废弃了，但一直没有去掉。如果你正在使用的某款插件仍然依赖这些方法，那么升级到 jQuery 3 会把你的代码搞挂。因此，在升级过程中请务必留意。

移除 context、support 和 selector 属性

jQuery 3 彻底抛弃了 context、support 和 selector 等已经标记为废弃的属性。同上，在升级到 jQuery 3 时，请留意你正使用的插件。

修复的 Bug

jQuery 3 修复了以往版本中的一些非常重要的 bug。在本节中，我将着重介绍其中两处，因为这两者应该会对你写代码的习惯带来显著影响。

width() 和 height() 的返回值将不再取整

jQuery 3 修复了 width()、height() 和其它相关方法的一个 bug。这些方法的返回值将不再舍入取整，因为这种取整行为在某些情况下不便于对元素进行定位。

我们来详细看一看。假设你一个宽度为 100px 的容器元素，它包含了三个子元素，宽度均为三分之一（即 33.333333%）：

<div class="container">
   <div>My name</div>
   <div>is</div>
   <div>Aurelio De Rosa</div>
</div>

在 jQuery 3 以前的版本中，如果你尝试通过以下代码来获取子元素的宽度……

$('.container div').width()

……那么你得到结果将是 33。原因在于 jQuery 会把 33.33333 这个值取整。而在 jQuery 3 中，这个 bug 已经被修复了，因此你将会得到更加精确的结果（即一个浮点数）。

wrapAll() 方法

jQuery 3 还修复了 wrapAll() 方法中的一个 bug，这个 bug 出现在把一个函数作为参数传给它的情况下。在 jQuery 3 以前的版本中，当一个函数被传给 wrapAll() 方法时，它会把 jQuery 集合中的每个元素单独包裹起来。换句话说，这种行为和把一个函数传给 wrap() 时的行为是完全一样的。

在修复这个问题的同时，还引入了另外一个变更：由于在 jQuery 3 中，这个函数只会调用一次了，那就无法把 jQuery 集合中每个元素都传给它。因此，这个函数的执行上下文（this）将只能指向当前 jQuery 集合中的第一个元素。

结论

很多人一直在唱衰 jQuery，说它在现代网页开发中已经没有一席之地了。但不管怎样，jQuery 的开发仍在继续，客观的统计数据（在排名前一百万名的网站中占有率高达 78.5%）也让这些论调不攻自破。

在本文中，我已经带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经察觉到了，这个版本并不太可能搞挂你的既有项目，因为它引入的破坏性变更其实寥寥无几。不过，在升级到 jQuery 3 的过程中，你还是有必要牢记一些关键点，比如 Deferred 对象的改进等等。同样，在升级某个第三方库时，也有必要检查一下该项目的兼容性情况，以便尽早发现任何非预期行为，避免某些功能失效。

译注

除了本文所提及的变更之外，jQuery 3.0 最大的变化就是彻底放弃对 IE8 的支持。jQuery 团队做出这个决定的原因在于，微软已经在今年年初宣布停止对 IE 8～10 的支持。因此，jQuery 在 3.0 alpha 阶段所发布的 jQuery Compat 项目也就没有继续存在的必要了。

不过，由于 IE8 仍然是*最流行的浏览器之一，对国内的开发者来说，在短期（甚至中期）内还不得不停留在 jQuery 1.x 版本。

好吧，最后还是说个好消息吧。为帮助用户平滑升级，此次 jQuery 同样会为 3.0 版本提供迁移插件（jQuery Migrate plugin）。在把 jQuery 升级到 3.0 之后同时运行这个插件，即可确保基于 jQuery 1.x 或 2.x 的既有业务代码正常运行；同时，它还将在控制台向你报告既有代码与 jQuery 3 不兼容的地方。当你修复了这些不兼容问题之后，就可以安全地移除这个插件了。

API

jQuery 官方 API