深度解析 jQuery 3：17 大新特性与最佳实践指南

jQuery 问世逾十载，长盛不衰。2015 年 7 月发布 3.0 首个 Alpha，历时近两年打磨。当前版本 3.1.1 修复大量 Bug、新增方法、移除废弃函数、调整部分行为。本文逐一拆解 17 项新特性与用法。

17. .hide()/.show()/.toggle() 优化

为兼容响应式设计，隐藏元素性能提升 2%（54 样本测试）。三方法改关注 内联样式 而非计算样式，更尊重样式表 display 值，CSS 规则可随窗口缩放/设备旋转动态生效。

$("#showr").click(function() {
  $("div").first().show("fast", function showNext() {
    $(this).next("div").show("fast", showNext);
  });
});
$("#hidr").click(function() {
  $("div").hide(1000);
});

16. .wrapAll() 与 .unwrap() 增强

.wrapAll(function) 现仅调用一次函数，用返回字符串包裹整个集合（jQuery 2 表现同 .wrap()）。.unwrap() 新增可选选择器参数：unwrap([selector])，匹配父元素内的子元素选择性解包。

jQuery("div").wrapAll(function() {
  return "
";
});

15. 尺寸计算纳入滚动条宽高

jQuery 2 中 $(window).width() 返回内容宽（不含滚动条）。为与 CSS 媒体查询一致，$(window).outerWidth() 与 outerHeight() 现包含滚动条尺寸，等同 window.innerWidth。

14. .data() 键名驼峰化

对齐 Dataset API 规范：.data() 现将所有键名转为驼峰命名。'custom-property' 存入后读出为 customProperty（旧版保留连字符小写）。

13. 类操作支持 SVG

jQuery 仍不完全支持 SVG，但操作 CSS 类名的方法（.hasClass()、.addClass() 等）现可作用于 SVG 文档。可增删切换/查找 SVG 类再用 CSS 样式化。

12. :visible/:hidden 选择器语义调整

现在认为拥有任意布局盒（含零宽高）的元素为 :visible。<br>、无内容内联元素均会被选中。示例：<section></section> <div></div> <br/> 在 jQuery 1/2 中 console.log($('body :visible').length) 返回 0，jQuery 3 返回 3。

11. .width()/.height() 返回浮点数

浏览器支持时返回浮点值而非整数，利于亚像素精度布局。示例：容器 100px 内三等分子元素，旧版返回 33，新版返回 33.3333333。

10. 新增 XSS 防护层

$.ajax() 与 $.get() 需显式指定 dataType:"script"，防止远程站点先返回非脚本内容再注入恶意脚本。$.getScript() 已显式设置不受影响。

9. 单一 # 选择器抛出语法错误

jQuery("#") 与 .find("#") 现直接抛错（旧版前者返回空集合，后者报错）。

8. $.escapeSelector() 转义选择器特殊字符

转义 ID/类名中的特殊字符（如分号、点）。$("#" + $.escapeSelector("abc.xyz")) 可选中 id 为 "abc.xyz" 的元素。

7. $.when() 支持 Thenable

传入带 then() 的参数视为 Promise 兼容 thenable，兼容 Bluebird/ES6 Promise，便于编写复杂异步回调。多参数调用行为类同 Promise.all，单/零参数类同 Promise.resolve。不再传递输入 Deferred 的进度通知。

6. AJAX URL 保留哈希片段

$.ajax() 现将完整 URL（含 #hash）传给传输层。若服务端不支持哈希，需手动移除后再发送。

5. Deferred 对象兼容 Promises/A+ 规范

关键变更：.then() 内抛出的异常会被捕获转为拒绝值；拒绝处理器返回非 thenable 值转为履行值。示例对比旧式 .done()/.fail() 与新式 .then()/.catch() 行为差异。

4. 动画采用 requestAnimationFrame API

动画更流畅、CPU 占用更低。仅在支持浏览器启用，IE9 等旧浏览器回退旧 API。

3. 严格模式构建

jQuery 3 代码基于严格模式编写，但不强制用户代码严格模式，迁移无需重写。例外：ASP.NET 4.0 使用 arguments.caller.callee 追踪调用栈，不兼容严格模式，建议继续用 jQuery 2.x。现代浏览器已支持 error.stack。

2. $.get()/$.post() 新签名对齐 $.ajax()

新签名为 $.get([settings]) / $.post([settings])，settings 对象属性同 $.ajax()，唯 method 属性被忽略（GET/POST 预设）。示例：传 method:'POST' 仍发 GET 请求。

1. 支持 ES6 for...of 循环

可遍历 Map、Set、Array 等可迭代对象，循环变量直接为 jQuery 集合中的 DOM 元素。可替代 $.each() 简化遍历。示例：为所有 <input> 赋 id。

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

// jQuery 3
var $inputs = $('input');
var j = 0;
for(var input of $inputs) { input.id = 'input-' + j++; }