jQuery 3.0 的新特性

　　jQuery 稱霸網際網路世界已有十個年頭了，它能一直堅守不是沒有理由的。經過很長一段時間，jQuery在上個月釋出了新版本：jQuery 3.0和jQuery Compat 3.0（相容版本）。該版本更輕量、更快速，考慮了向後相容。獲得最新訪問版請訪問：jQuery下載頁。你也可以看看升級文件和 原始碼。

　　本文重點講述jQuery 3.0中幾點最新的重要變化及如何使用它們。

　　1. jQuery 3.0 執行在嚴格模式下

　　當下幾乎支援jQuery 3.0的瀏覽器都支援嚴格模式，該版本正是基於此進行編譯釋出的。

　　你的程式碼已經執行在非嚴格模式？不用擔心，你無需重寫。jQuery 3雖為嚴格模式，但並不強制在嚴格模式下執行你的程式碼。嚴格模式和非嚴格模式會愉快的共存~

　　2. For...of 迴圈

　　jQuery 3.0 支援 'for...of' 表示式，一種新型的for迴圈。這個新的迭代是ECMAScript 6的一部分。它給出一種更直接的遍歷物件（如Arrays，Maps，和Sets）的方式。在jQuery 3.0中，for...of將替換$.each(...)。

var items = $('.random-class');  
// old jQuery way 
$.each(items,  function(index, value)  {  
    // do something  
});  
// ES6 way  
for(let item of items)  {  
    // do something  
};

　　說明：for...of僅用於支援ES6的瀏覽器，或者你使用了JS編譯器，比如Babel。

　　3. 動畫介面：requestAnimationFrame( )　

　　jQuery 3.0 使用requestAnimationFrame() 處理動畫。它使動畫執行起來更流暢、迅速，減少CPU密集型動畫。但僅用於支援 它的瀏覽器。對於老的瀏覽器（如IE9），它會使用之前的API。更多 RequestAnimationFrame的內容可以查詢這裡。

　　4. escapeSelector( ) 轉義包含特殊意義的字串

　　$.escapeSelector()這個新方法將轉義CSS選擇器中有特殊意義的字元或字串。它適用於CSS中含有表意特殊的字元的類名或ID，如'.'或者':'。這種情況不常發生，不過一旦遇上，就可以輕鬆解決掉了。

//consider this is your element  
<div id="abc.def"></div>  
//above element can't be selected like this because the selector is parsed as "an element with id 'abc' that also has a class 'def'. 
$('#abc.def')  
//with jQuery 3.0 it can be selected like this 
$(  '#'  + $.escapeSelector(  'abc.def'  )  )

　　5. 對XSS攻擊的附加防護

　　jQuery 3.0新增了額外安全層，用來防止 (XSS))攻擊。使用時需要在 $.ajax() 和 $.get()方法中指定dataType: 'script'。即，當請求跨域指令碼時，必須要宣告這一點。

Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it.

XSS攻擊是一類注入攻擊，其中惡意指令碼注入受信任站點。XSS攻擊發生在攻擊者使用web應用傳送一段惡意程式碼（一般使用瀏覽器端指令碼形式），給另一個不同的終端使用者。web應用一旦使用了沒有經過驗證或編碼的輸入就會有問題。

　　6. 刪除.ajax()中的特殊延遲方法

　　$.ajax()返回的jqXHR物件是一種 Deferred。先前，它有三種附加方法對應著引數物件success, error 和 complete。jQuery 3.0 刪除了這些方法。現在可以使用 Deferred的標準方法done, fail和 always，或者使用新的 then 和 catch方法。

　　7. .get() 和 .post()的新簽名

　　jQuery 3.0 為$.get() 和 $.post() 增添了新簽名settings。增加settings引數，從而與$.ajax()的介面風格一致。settings是一個物件，包含很多屬性，與提供給$.ajax()的引數格式一致。唯一不同是傳相同的settings給$.get()和$.post()，method屬性經常被忽略，而傳給$.ajax()不會。

//HTTP Get 
$.get([settings])  

//HTTP Post 
$.post([settings])

　　8. 支援SVG的類操作方法

　　從jQuery 3.0起， 開始完全支援SVG。jQuery操作CSS類名的方法，如.addClass() 和 .hasClass() 也可以用來支援SVG了。這意味著可以用jQuery在SVG裡查詢類，並且指定樣式。

　　9. 簡易的Show/Hide 邏輯

　　the .show(),.hide() and .toggle() methods will focus on inline styles rather than computed styles. The docs asserts that the most important result will be:

　　這是一項重要的變化，需要銘記於心。。從現在開始，這些方法.show(),.hide() 和 .toggle()將只為inline styles服務，不再為computed styles效力了。文件宣告最重要的結果將是：

As a result, disconnected elements are no longer considered hidden unless they have inline display: none;, and therefore .toggle() will no longer differentiate them from connected elements as of jQuery 3.0.

因此，未關聯元素不再被考慮hidden，除非它們有inline display: none; .toggle() 不再區分關聯和未關聯元素。。

　　如果想更好的理解新的show/hide，可參看jQuery團隊的這張 表，或閱讀這篇關於它的有趣的 Github discussion 。

　　10. .width ( ) 和 .height ( )支援小數

　　之前，jQuery對width(), height()及類似的方法提供的返回值是round型別（舍入取整），jQuery 3.0解決了這個bug，可以拿到更精確的結果，如float型別。這是非常好的進步，畢竟有時，使用者的確需要更精準的資料來處理佈局。

　　11. 廢棄.bind()和.delegate()方法

　　jQuery 1.7 引入.on()方法來處理事件捕獲。3.0中不建議使用.bind(), .unbind(), .delegate() 和 .undelegate()方法，並且這些方法在以後的版本中可能會被徹底刪除。你可以放心大膽地在你的專案裡使用on() 和 off()方法，不必擔心它之後被刪除~

　　總結

　　很多人認為jQuery已死，並且在以後的web世界裡不再有一席之地。但它還在繼續發展，擁護它的統計資料（幾百萬中佔有率高達 78.5%）也讓這些論調不攻自破。

　　本文帶領你瞭解了jQuery 3.0的大部分改動，也許你已經注意到，這個版本不太可能會破壞你現有的專案。繼續使用jQuery吧，“Write Less, Do More”。