jQueryオブジェクトの連鎖操作の利用状況分析

この記事の例では、jQuery オブジェクトに対するチェーン操作の使用について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

jQuery オブジェクトの連鎖操作

まず例を見てみましょう。

コードは次のとおりです。

$("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good")

最初に css() 関数を呼び出して jQuery オブジェクトのスタイルを変更し、次に attr() 関数を使用して変更します。この呼び出しメソッドはチェーンのようなものであるため、「チェーン操作」と呼ばれます。

チェーン操作により、コードをより簡潔にすることができます。これは、以前は複数のステートメントでしか完了できなかったタスクを 1 つのステートメントで実行できることが多いためです。たとえば、チェーン操作を使用しない場合、上記のタスクを完了するには 2 つのステートメントが必要です:

$("#myphoto").css("border","solid 2px#FF0000");
$("#myphoto").arrt("alt","good");

コードの量が増えることに加えて、セレクターも 2 回呼び出されるため、速度が低下します。

チェーン操作が短い場合、多くの場合ステートメントがより明確になり、jQuery オブジェクトに対するさまざまな操作を段階的に実装できます。ただし、チェーン操作が長すぎないように注意してください。長くしないと、ステートメントが理解しにくくなります。jQuery オブジェクトの現在のステータスを確認するのは簡単ではありません。特に、jQuery オブジェクト内の要素の追加と削除が含まれる場合は、判断するのはさらに困難です。

すべての jQuery 関数が連鎖操作を使用できるわけではありません。これは、連鎖操作の原理に関係しています。連鎖操作が実現できる理由は、各関数が jQuery オブジェクト自体を返すためです。 jQuery クラス ライブラリの内部実装では、多くの関数が jQuery オブジェクト自体を返しますが、それらはすべて限られた数の内部関数を呼び出すことによって実装されます。たとえば、attr() 関数は実際には属性 stone. . each(object,callback,args)」メソッド。このメソッドは jQuery オブジェクトのメソッドではないことに注意してください。jQuery オブジェクトのメソッドには、「jQuery.fn.each(callback,args)」という関数も含まれています。この関数も最後に jQuery.each 関数を呼び出します。 :

Each:function(callback,args){
  ReturnjQuery.each(this,callback,args);
}

jQuery.each 関数の戻り結果を見てみましょう:

Each.function(object,callback,args){
  Retumobject;
}

Object は jQuery.fn オブジェクト、つまり jQuery オブジェクトです。最終的に返されるオブジェクトは依然として jQuery オブジェクトです。

次の原則を使用して、関数が jQuery オブジェクトを返すかどうか、つまりチェーン操作に使用できるかどうかを判断できます。

属性値「attr(name)」の取得やコレクションサイズ「size()」の取得など、特定のデータを取得する関数に加えて、これらの関数は当然データを返します。これらの関数に加えて、属性「attr(name.value)」の設定などの連鎖操作に jQuery 関数を使用できます。

「$」変数の使用法

「$」変数は、「jQuery」変数への参照です。 「jQuery」変数はグローバル変数であり、jQuery オブジェクトは「jQUery.fn」を参照します。混同しないでください。 「jQuery」変数は静的クラスに似ており、上記のメソッドは静的メソッドであり、いつでも呼び出すことができます。たとえば、「jQuery.each」などです。 「jQuery.fn」はインスタンス メソッドであり、jQuery オブジェクトに対してのみ呼び出すことができます。たとえば、「jQuery.fn.each()」メソッドは、「$('#id').each」という形式でのみ呼び出すことができます。

前述したように、jQuery 内には次の実装があるため、「jQuery」の代わりに「$」を使用できます。

jQuery=window.jQuery=window.$

つまり、「$」変数と「jQuery」 " 変数は実際には Window オブジェクトのプロパティであり、グローバル変数です。ページ上のどこからでも呼び出すことができます。

この記事が jquery プログラミングのすべての人に役立つことを願っています。