jQuery3的新特性

標籤：var   containe   ...   str   訊息   失敗   何事   字元   輸出   

前言：自從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()

jQuery3的新特性