5知らないかもしれない便利なjQuery APIメソッド

この記事では、自分にとって有用であることがわかった5つのjQueryメソッドについて説明します。



私は約2年間jQueryを扱ってきましたが、最近までこれらのメソッドを使用していませんでした。 しかし、それらの方がはるかに簡単です。

jQuery.grep（）

jQuery.grep(array, function(elementOfArray, indexInArray) [, invert])



-名前から推測できるように、メソッドは関数の結果に基づいて配列の要素をフィルター処理します（元の配列は変更されません）。 JQueryには同様の.filter()



メソッドがあり、見つかった要素のセットをフィルター処理します。

例

配列から3の倍数のみを選択する必要があります。

 var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; console.log($.grep(arr, function(el){ return el % 3 === 0 })); // [3, 6, 9, 12, 15]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.map（）

.map( callback(index, domElement) )



-このメソッドは、サイクルを記述せずに選択した要素または配列の変換を行うことができるため便利です（配列の場合はjQuery.map()



を使用する必要があります）。

関数がnullまたは未定義を返す場合、要素は無視されます。

例

ページ上のすべてのリンクのアドレスを表示します。

 var links = $('a').map(function(el){ return this.href; }).get().join("\n"); console.log(links);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jQuery.proxy（）

jQuery.proxy( function, context )



-コールバックを渡す必要があるが、そのコンテキスト（ this



変数の値）を設定する場合に役立ちます。

例

 var myObj = { message: 'hello', alertMessage: function(){ //  this    myObj, //    ,    alert(this.message); return false; } }; $('a').click($.proxy(myObj.alertMessage, myObj));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.prop（）

.prop( propertyName, value )



-このメソッドはバージョン1.6で登場し、ほぼ同じ頃から使用しています。 しかし、多くの人が誤って.attr()



メソッドを使用して要素のプロパティにアクセスし、その値を変更するため、ここで言及することにしました。

事実は、バージョン1.6 .attr()



が要素の属性を直接操作するため、場合によっては結果がまったく期待できないことです。

たとえば、チェックボックスの状態を確認する場合、 .attr()



はデフォルト値（HTMLページのソースコードで表示可能.attr()



を.attr()



ことができます。 この場合、 .prop()



メソッドを使用する必要があります。このメソッドは、要素プロパティの現在の値を返します。

例

ページ上のすべてのチェックボックスを反転します：

 $('input').prop('checked', function(el, oldVal){ return !oldVal; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

.serializeArray（）

.serializeArray()



は、フォームデータを配列または文字列としてシリアル化する非常に簡単な方法です（この場合、 .serialize()



使用します）。 メソッドは配列を返します。配列は、たとえば、ajaxを介してサーバーに送信できます。

例

 var arr = $('#myForm').serializeArray(); //  arr    {name: "field-name", value: "field-value"}