jQuery3的新特性

Posted 2020-08-22 H-art

前言：自从react,vue等方便的新框架出现后，好多大公司已经摒弃了jquery，但是大部分的公司还在使用，并且jquery的版本还在一直更新中。jquery2.x版本将不再支持IE6/7/8浏览器。现在更新到的最新版本3.x增加了一些新特性，也摒弃了一些特性。接下来就总结一下：

一，增加的一些特性

1，for...of循环

可以用来遍历一个jquery集合所有的DOM元素。

假设你想给页面中每个input元素分配一个ID,在jQuery3之前，你可以这样写：

1 var inputs = $(‘input‘);
2 for(var i=0;i<inputs.length;i++){
3     inputs[i].id = ‘input-‘+i;
4 }

jQuery3:

1 var inputs = $(‘input‘);
2 var i=0;
3 for(var input of inputs){
4    input.id = ‘input-‘+i++;
5 }

2,采用requestAnimationFrame()来实现动画
IE10以上的版本都支持这个函数

3，unwrap()

该方法增加了一个可选的选择器参数

1 unwrap([selector])

有了这一变化，你就可以传入包含一个选择器表达式的字符串，在父元素进行匹配，如果存在匹配，匹配的子元素被解包，不进行任何操作。
二，被修改的一些特性

1，：visible和：hidden

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

<div></div>
<br />
console.log($(‘body:visible‘).length);

jquery 1.x  2.x中输出的结果是0, jquery 3中结果是2。
2，data()

该调整主要是为了让该方法符合DatasetAPI规范，jquery3 强所有属性的键都该驼峰式大小写形式

<div id="container"></div>

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

在控制台上获得以下结果：{my-property:"hello"}
在jquery3 {myProperty:"hello"}

3,Deferred对象

jquery 1.x  2.x 中 ，传入deferred中的回调函数中如果出现未捕获异常，会导致程序停止执行。而原生的Promise对象并非如此，它会抛出异常，并不断向上冒泡，直至到达window.onerror。

jquery3遵循原生的Promise对象的模式，因此，抛出的异常将被视为一个失败状态（rejection）从而执行失败回调，完成之后，整个进程 将继续进行，后续的成功回调将被执行。

 1 var deferred = $.Deferred();
 2 deferrea.then(function(){
 3    throw new error(‘an error‘);
 4 }).then(
 5     function(){
 6       console.log(‘success 1‘);    
 7     },function(){
 8     console.log(‘failure 1‘);
 9 }).then{
10  function(){
11       console.log(‘success 2‘);    
12     },function(){
13     console.log(‘failure 2‘);
14 }
15 );
16 deferred.resolve();

在jquery 1.x   2.x中，只有第一个函数会被执行到，由于没有window.onerror定义任何事件处理函数，所以控制台会输出“Uncaught Error:an error”,而且进程的执行将终止
而jquery3中，行为完全不同，在控制台中会看到failure1 和success2两条消息。异常会被第一个失败回调处理，一旦被处理，则继续执行下面的成功函数。

三，已废弃，移除的方法和属性

1,废弃了bind(),unbind(),delegate()，undelegate()

用on()方法提供了统一的访问接口，取代了bind(),delegate(),live()

off()取代了unbind(),undelegate(),die()

2,移除了load(),unload(),error()

3,移除context,support,selector这些属性

4，bugs修复： width()和height()的返回值不再四舍五入

5，wrapAll()