jQuery 3

jQuery の使い方

• DOMを扱って　インタラクティブな機能をつくる
• Ajax リクエスト
• アニメーションをつくる

I 基本的な変更
jQuery　の新しい機能
for...of loop
jQuery コレクション　DOM　エレメントの扱いかた

for...of loop (ECMAScript 2015)(a.k.a ECMAScript 6)
Array, Map, Set

1.【　for(var .... of $.....s )　】
従来

var $input = $('input');

for (var i = 0; i < $inputs.length; i++) {
  $inputs[i].id = 'input-' + i;
}

jQuery 3 の書き方

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

---

2.【　$.GET() and $.POST()　】

$.get([settings])
$.post([settings])

$.ajax()は違う書き方をする
->
http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings

---

下のコードの場合　POSTリクエストは送られずGET リクエストが送られる
$.get({
url: 'https://www.audero.it',
method: 'POST' // this property is ignored
});

---

3.【IE 10 アニメーションフレームのサポート】

requestAnimationFrame　　API
http://caniuse.com/#feat=requestanimationframe

4.【unwrap() メソッド】

コード例

unwrap([selector])

親エレメントにマッチする　セレクタ文字列をパスすることができる

---

II ビヘイビア機能の変更

1.【:visible & :hidden】
zero 幅　and/or 高さ

index.html

<div></div>
<br />

main.js

console.log($('body :visible').length);

jQuery 1.x , 2.x => 0
jQuery 3 => 2

---

2.【DATA()】
data()メソッド　
Dataset API specification
https://www.w3.org/TR/html5/dom.html#dom-dataset

index.html

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

main.js

var $elem = $('#container'); 

$elem.data({
  'my-property': 'hello'
});

console.log($elem.data());

---

Deferred Object （jQuery 3の新しい機能）

Promise オブジェクト
=> Promise/A+ proposal
https://promisesaplus.com/

公式jQuery
https://api.jquery.com/category/deferred-object/

jQuery 1.x & 2.x では　"Deferred Object" にパスする　callback functionは　動かなかった

=> window.onerror がでる

jQuery 3 ではネイティブ Promise オブジェクトによって　使用できる

var deferred = $.Deferred();

deferred
    .then(function() {
        throw new Error('An error');
    })
    
    .then(
        function() {
          console.log('Success 1');
        },
        function() {
          console.log('Failure 1');
        }
    )
    .then(
        function(){
          console.log('Success 2');
        },
        function() {
          console.log('Failure 2');
        }
    ); 
deferred.resolve(); 

---

SVG DOCUMENTS

jQuery 3 では SVG ドキュメント　をサポート
しかし、
addClass() と hasClass() で動く

• on() メソッドを使う　　<=　bind(), delegate(), live()
• off() メソッド <= unbind()

bind() メソッド <= undelegated(), die() を使う

load(), unload(), error() メソッドを削除

---

III セレクタ

• width() と height()　の rounding
  jQuery 3 では width(), height() のバグを修正

<div class="container">
  <div>My name</div>
  <div>is</div>
  <div>Aurelio De Rosa</div>
</div>

main.js

$('.container div').width() // 33 の値が返る

---

WRAPALL()

---

What’s New in jQuery 3
http://developer.telerik.com/featured/whats-new-in-jquery-3/