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 了,所以忘记它也不失为一个办法。

原文地址:https://www.cnblogs.com/foreverZ/p/5979854.html