JQuery3 的新变化

1. for-of 循环

for-in 循环不被推荐遍历数组，forEach 循环不能中断，for-of 循环（ES6）则弥补了前两者的不足，又添加了更多拓展（比如能遍历字符串，DOM 元素等）

因此 jquery3 也加入了 for-of 循环的支持，即：

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

注意：可见上例 for-of 中的 input 是DOM 元素而不是 jquery 元素

 

2. $.get 和 $.post 支持对象传参

// 以前我们通常这样写：
$.post('test.php', { name: 'David Guetta', age: 49 }, function (data) {
　　console.log(data);
});

// jQuery3 中可以这样写：
$.post({
　　url: 'test.php',
　　data: { name: 'David Guetta', age: 49 },
　　success: function (data) {
　　　　console.log(data);
　　}
});

这个变化其实我并未看懂为什么，只是比 $.ajax 少个 method:'POST' 吗

 

3. 动画改用 requestAnimationFrame 方法渲染

以往 jquery 使用的是 setInterval 每 16.7ms 更改元素属性值来进行动画渲染的，很容易动画卡顿和丢帧，

而 requestAnimationFrame 的优点已人人皆知，因此 jquery3 对动画进行了优化，使动画更流畅，和减少了 CPU 消耗。

 

4. unwrap() 添加可选参数 selector

<div class="wrap"><p></p></div>
<div><p></p></div>
// 移除 p 元素的 class="wrap" 的父元素
// 上面 html 中 只有第一个 div 会被移除
$('p').unwrap('.wrap');

 

5. :visible 和 :hidden

空标签和高度为零的元素也被认为是 :visible 了

<div></div>
<br>
<span></span>
// 在 jQuery1.x 中控制台输出 1
// 在 jQuery3 中控制台输出 3
console.log($('body :visible').length)

 

6. data() 的键格式改为了驼峰格式

严格遵守 Dataset API 规范，以后我们就该写 data-myProperty 而不是 data-my-property 了，否则用 jquery3 获取时就搞得很麻烦了。

 

7. 正式支持 SVG documents

获取 svg 元素，使用 addClass() 等方法都是可以的哟。

 

8. 废弃了 bind()、unbind()、delegate() 和 undelegate()

废弃是还存在于源码中但待到时机成熟就移除，所以事件绑定和解绑我们还是用 on() 和 off() 吧。

 

9. 移除了 load()、unload() 和 error() 方法

早在 1.8 时就被废弃了，因为实在被误解得太厉害，又实在不方便操作，我倒是举手欢迎移除的，但一直却没能找到可以替代该功能的方法。

 

10. 移除 context、support 和 selector 属性

去掉了 context 属性但还是可以选用 context() 方法呀。

selector 属性很鸡肋呀，我需要知道 body>div.xxx>p span 这条字符串干什么呢。

至于 $.support，官方说移除了， 但好像并没有呀，应该是我理解错了把。

 

11. width() 等保留为浮点数而非整数

以前获取到的 width() / height() 等都是整数，有时会造成一丢丢误差（比如 33.3333% 那样的），所以现在它将返回浮点数。

 

12. Deferred 对象

这个我完全没用过，而且也开始接触 Promise 了，所以忘记它也不失为一个办法。