jQueryオブジェクトのチェーン操作用法分析

2495 ワード

この例では、jQueryオブジェクトのチェーン操作の使い方について説明します.皆さんの参考にしてください.具体的には以下の通りです.
jQueryオブジェクトのチェーン操作
まず例を見てみましょう

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

jQueryオブジェクトに対してcss()関数を呼び出してスタイルを変更し、attr()関数を使用してプロパティを変更します.この呼び出しはチェーンのようなものなので、「チェーンアクション」と呼ばれます.
チェーン操作は、従来の複数の文でしか達成できなかったタスクを1つの文で実現できるため、コードを簡潔にすることができます.たとえば、チェーン操作を使用しない場合は、上記のタスクを完了するには2つの文が必要です.

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


コード量を増やしたほか,セレクタを2回呼び出し,速度を低減した.
短いチェーン操作では、文がはっきりしていることが多く、jQueryオブジェクトに対して様々な操作を段階的に実現することができます.しかし、チェーン操作はあまり長くないはずです.そうしないと、jQueryオブジェクトの現在の状態を表示するのは容易ではありません.特に、jQueryオブジェクトの要素の削除操作に関連する場合、判断がさらに困難になります.
すべてのjQuery関数がチェーン操作を使用できるわけではありません.これは,チェーン動作の原理に関係しており,チェーン動作を実現できるのは,各関数がjQueryオブジェクト自体を返すためである.jQueryクラスライブラリの内部実装では、多くの関数がjQueryオブジェクト自体を返すが、attr()関数設定属性石のような内部の限られたいくつかの関数を呼び出すことによって実装され、実際には最後に「jQuery.each(object,callback,args)」メソッドが呼び出される.なお、このメソッドはjQueryオブジェクトメソッドではなく、jQueryオブジェクトメソッドにもeach()関数があり、「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オブジェクトです.
次の原則を使用して、1つの関数が返されるときにjQueryオブジェクトであるかどうか、すなわちチェーン操作に使用できるかどうかを判断することができます.
属性値「attr(name)」を取得するなど、特定のデータを取得する関数に加えて、コレクションサイズ「size()」を取得する関数は明らかにデータを返します.これらの関数以外のjQuery関数は、属性「attr(name.value)」の設定など、チェーン操作に使用できます.
"$"変数の使用
「$」変数は「jQuery」変数の参照です.「jQuery」変数はグローバル変数であり、jQueryオブジェクトは「jQQuery.fn」を指し、混同しないでください.「jQuery」変数は静的クラスに似ており、上記のメソッドは静的メソッドであり、いつでも呼び出すことができます.例えば「jQuery.each」.「jQuery.fn」はインスタンスメソッドであり、jQueryオブジェクトでのみ呼び出されます.たとえば、「jQuery.fn.each()」メソッドは、「$('#id').each」という形式でのみ呼び出されます.
前述したように、jQueryの内部には次のような実装があるため、「jQuery」の代わりに「$」を使用することができる.

jQuery=window.jQuery=window.$


したがって、$変数とjQuery変数は、実際にはWindowオブジェクトのプロパティ、つまりグローバル変数です.ページ上の任意の場所で呼び出すことができます.
jqueryの関連内容についてもっと興味のある読者は、「jquery常用操作技巧要約」、「jQueryよくある事件用法と技巧総括」、「jQuery操作jsonデータ技巧要約」、「jQuery操作xml技巧総括」および「jQuery拡張技巧総括」のテーマを参照してください.
本稿では、jqueryプログラムの設計に役立つことを願っています.