jQuery 1.6の革新

より最近（5月3日）、jQuery 1.6がリリースされました。このjsライブラリの新機能を見てみましょう。



楽しいのは、新しいリリースにjQueryの以前のバージョンと互換性のない重要な変更があることです。 その結果、新しいバージョンに切り替える場合、既存のコードを表示および変更する必要が生じる可能性が非常に高くなります。

重大な変更

古いバージョンのコードをダウンさせる可能性のある変更を以下に説明します。

データ属性のデータにアクセスする

現在、これらの属性の値へのアクセスは、 W3C HTML5仕様仕様に対応しています 。 キーはキャメルケース形式で送信する必要があります。

<div id="div1" data-test-value="123"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQuery 1.5については、次のように書きました。

 var tv = $('#div1').data('test-value'); // => 123 //   var d = $('#div1').data(); // => { "test-value": 123 } tv = d['test-value']; // => 123
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQuery 1.6の場合 、次のように記述する必要があります 。

 var tv = $('#div1').data('testValue'); // => 123 //   var d = $('#div1').data(); // => { "testValue": 123 } tv = d.testValue; // => 123
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.prop（）、. removeProp（）および.attr（）

また、要素のプロパティが属性から分離されました。 属性にアクセスするには、.attr（）メソッドが残り、動的に変更できる（属性値が同時に変更されない）要素プロパティにアクセスするには、.prop（）を使用して行う必要があります 。 最も単純な例は、 <input type="checkbox" />



の動作です.attr('checked')



では、 .attr('checked')



呼び出しはフラグの設定に応じてtrue / falseを返し、バージョン1.6 .attr('checked')



は文字列値を返します、属性に書き込まれます。属性が存在しundefined



場合はundefined



で、フラグの状態は.prop('checked')



介して取得する必要があります。

ここで例を試すことができます：1.5 jsfiddle.net/dV27a/1、1.6 jsfiddle.net/9zEC9/1

.removeProp（）は、次のように慎重に使用する必要があります。 一部のブラウザで不具合が発生しています。

2番目の例では、Google Chromeでグリッチを観察できますが、これはブラウザー自体のグリッチです-jQueryなしで再現します。 グリッチは次のとおりです： <input type="checkbox" />



要素がそのjs-objectモデルを介してcheckedプロパティに設定されている場合、フラグは最初に変更されますが、このプロパティをdelete cb.checked



すると、プロパティを変更しても結果は変わりませんフラグ状態の変更。

上記に関連して、ブール属性（checked、selectedなど）にいくつかの変更があり、現在.attr('checked', true/false)



が指定された属性を追加または削除します（そして、この関数が正確に機能することを覚えていますオブジェクトのプロパティではなく、属性を使用して）。

重要ではない変更

拡張性.attr（）および.val（）

新しいバージョンでは、 jQuery.attrHooks



オブジェクトを介して.val()



関数とjQuery.attrHooks



オブジェクトを介してjQuery.attrHooks



.attr()



関数の操作に影響を与える機能がjQuery.valHooks



。 例：

 jQuery.attrHooks.selected = { set: function( elem, value ) { if ( value === false ) { jQuery.removeAttr(elem, “selected”); return value; } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQuery.map（オブジェクト）

jQuery.map（）関数は、配列だけでなく、オブジェクトを最初の引数として受け取ることができますが、どのような場合でも値の配列を返します。

 $.map({ f: 1, s: 2 }, function(v, k) { return ++v; }); // => [ 2, 3 ]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS依存の変更

開発者は、 .animate()



行われるように、値に応じて.css()



関数で要素のcssプロパティを変更する機能を「+ = "および"-= "命令を使用して.animate()



。

 $("#item").css("left", "+=10px");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

遅延オブジェクト

1.5で追加された遅延オブジェクトも改善されました（まだそれらを知らない人のために、 jQuery遅延オブジェクト（詳細な説明）を読むことをお勧めします）

deferred.always（）

何らかの結果に対して何らかのハンドラーを呼び出すには、前にdeferred.then(handler, handler)



を記述する必要がありましたが、 deferred.always(handler)



記述できるようになりました

deferred.pipe（）

これは新しいメソッドであり、いくつかの問題を一度に解決します。まず、ハンドラーによってパラメーターに渡される値のフィルターを作成できます。次に、遅延タスクのチェーンを構築できます（たとえば、非同期要求-このトピックは前の記事のコメントで取り上げました）そして今、開発者はこの問題の解決策を提供しています。

フィルターの例（deferred.rejectの場合-同様）、2番目のハンドラーでは、最初の唯一のパラメーターが最初のハンドラーが返す値を取得します。

 var defer = $.Deferred(), filtered = defer.pipe(function( value ) { return value * 2; }); defer.resolve( 5 ); filtered.done(function( value ) { alert( "Value is ( 2*5 = ) 10: " + value ); // value = 10 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実行： jsfiddle.net/txzPj



非同期リクエストのチェーンの例として、2番目のハンドラーは、2番目の遅延オブジェクトが完了するパラメーターを渡します。

 var request = $.ajax( '/echo/json/', { dataType: "json", type: 'post', data: { json: '{ "test": 8 }' }, delay: 3 } ), chained = request.pipe(function( data ) { console.log(data); alert('first response'); return $.ajax( '/echo/json/', { type: 'post', data: { delay: 3, json: '' + data.test } } ); }); chained.done(function( data ) { console.log(data); alert('second response'); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実行： jsfiddle.net/5gfS8

アニメーション

アニメーションプロセス自体の改善に加えて、バージョン1.6では、アニメーションに関連付けられた遅延オブジェクトを使用できます。 いいえ、.animate（）メソッド（およびその略語.fadeOut（）、slideUp（）など）はdeferredを返しませんでしたが、代わりに$ .when（）関数のパラメーターとしてjqueryオブジェクトを使用できるようになりました。アニメーションで選択された要素がある場合、結果の遅延オブジェクトは、アニメーション全体の完了後に完了します。

 $(".elements").fadeOut(); $.when($(".elements")).done(function(elements) { //    ".elements"   });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQuery.holdReady（）

このメソッドを使用すると、準備完了イベントハンドラーの実行を一時停止できます;これは主にプラグイン開発者によって使用されます（少なくとも、jQuery作成者が計画しているように）。

 jQuery.holdReady( true ); //    //  - ,    //      ,      jQuery.holdReady( false );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

セレクター "：focus"

これで、ドキュメント内でフォーカスが設定されている要素を見つけるのが非常に簡単になりました。

DOMトラバーサル関数の追加機能

新しいバージョンでは、jqueryオブジェクトを.find()



.closest()



、および.is()



関数に渡す機能が追加されました。最後に...

---

この記事のテキストは、 blog.jquery.com / 2011/05/03 / jquery-16-releasedの無料のリテールです （テキストではありませんが、翻訳ではありません）。