jQuery についてリファレンス例 1.0 jQuery_jquery の哲学-jsチュートリアル-php.cn

この記事は、jQuery Cookbook (O'Reilly 2009) 1.0 The jQuery Philosophy から翻訳されたものです

jQuery の哲学は「書くコードを減らし、より多くのことを行う」です。この哲学は 3 つの概念に分類できます。

CSS セレクターで要素を検索し、jQuery メソッドで操作します
一連の要素に対する複数の jQuery メソッドのチェーン
jQuery のカプセル化と暗黙的トラバーサル

jQuery コードを記述するには、これら 3 つの概念を完全に理解することが重要です。これら 3 つの概念を詳しく見てみましょう。

要素を検索して操作します

より正確には、DOM ツリー内の要素のバッチを見つけて、要素のセットを操作します。たとえば、次の例では、まず

要素をユーザーに対して非表示にし、次に非表示の

要素に新しいテキストを挿入し、その属性を変更して、最後に

要素を再表示します。対応する jQuery コードは次のとおりです:

<span class="dec"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span><span class="pln">
</span><span class="tag"><html></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
 </span><span class="tag"><script</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"text/JavaScript"</SPAN><SPAN class=pln>
  </SPAN><SPAN class=atn>src</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"</SPAN><SPAN class=tag>></script></span><span class="pln">
</span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
 </span><span class="tag"><div></span><span class="pln">old content</span><span class="tag"></div></span><span class="pln">
 </span><span class="tag"><script></span><span class="pln">
  </span><span class="com">//隐藏页面上所有的div元素</span><span class="pln">
  jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">();</span><span class="pln">
  </span><span class="com">//更新所有div元素内的文本</span><span class="pln">
  jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">text</span><span class="pun">(</span><span class="str">'new content'</span><span class="pun">);</span><span class="pln">
  </span><span class="com">//在所有的div元素上添加值为updatedContent的class属性</span><span class="pln">
  jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"updatedContent"</span><span class="pun">);</span><span class="pln">
  </span><span class="com">//显示页面上所有的div元素</span><span class="pln">
  jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">show</span><span class="pun">();</span><span class="pln">
 </span><span class="tag"></script></span><span class="pln">
</span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span>

ログイン後にコピー

これら 4 つの jQuery ステートメントを 1 つずつ見てみましょう:

ページ上のすべての div 要素を非表示にして、非表示にします
非表示の div 要素内の元のテキストを新しいテキスト ('新しいコンテンツ') に置き換えます
新しいクラス属性値 (updatedContent) を div 要素に追加します
ページ上の div 要素を再表示します

上記の例では、jQuery 関数を使用して HTML ページ内のすべての

要素を検索し、jQuery メソッド (hide()、text()、addClass()、show()) を使用してそれらの要素を操作します。

チェーンコール

jQuery メソッドを呼び出す場合、jQuery の設計に従って、これらのメソッドをチェーンで呼び出すことができます。たとえば、要素検索を 1 回だけ実行し、見つかった要素に対して一連の操作を実行します。前のコード例は、連鎖呼び出しを使用して JavaScript ステートメントとして書き直すことができます。

チェーン呼び出しを使用すると、次のコードを使用できます:

<span class="com">//隐藏页面上所有的div元素</span><span class="pln">
jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">();</span><span class="pln">
</span><span class="com">//更新所有div元素内的文本</span><span class="pln">
jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">text</span><span class="pun">(</span><span class="str">'new content'</span><span class="pun">);</span><span class="pln">
</span><span class="com">//在所有的div元素上添加值为updatedContent的class属性</span><span class="pln">
jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"updatedContent"</span><span class="pun">);</span><span class="pln">
</span><span class="com">//显示页面上所有的div元素</span><span class="pln">
jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">show</span><span class="pun">();</span>

ログイン後にコピー

は次のように書き換えられます:

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">().</span><span class="pln">text</span><span class="pun">(</span><span class="str">'new content'</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"updatedContent"</span><span class="pun">).</span><span class="pln">show</span><span class="pun">();</span>

ログイン後にコピー

コードのインデントを追加すると、次のようになります:

<span class="pln">jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">)</span><span class="pln">
 </span><span class="pun">.</span><span class="pln">hide</span><span class="pun">()</span><span class="pln">
 </span><span class="pun">.</span><span class="pln">text</span><span class="pun">(</span><span class="str">'new content'</span><span class="pun">)</span><span class="pln">
 </span><span class="pun">.</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"updatedContent"</span><span class="pun">)</span><span class="pln">
 </span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span>

ログイン後にコピー

簡単に言うと、連鎖呼び出しにより、現在選択されている要素セットで無制限の jQuery メソッドを一緒に使用できるようになります。基本的に、jQuery メソッドで処理された要素はメソッドの処理後に常に返されるため、呼び出しのチェーンは継続できます。 jQuery プラグインもこのように設計されている (カプセル化された要素セットを返す) ため、プラグインの使用はチェーン呼び出しに影響しません。

連鎖呼び出しのもう 1 つの利点は、DOM 要素を 1 回だけ選択することでオーバーヘッドを節約できることです。 DOM ツリーのトラバースを回避することは、Web ページのパフォーマンスを向上させるために非常に重要であるため、選択した DOM 要素のセットを可能な限り再利用またはキャッシュする必要があります。

jQuery ラッパー

ほとんどの場合、jQuery を使用する場合、必ず「jQuery カプセル化」と呼ばれるものに対処することになります。つまり、jQuery を使用して HTML ページから選択された要素は、jQuery が提供する機能のレイヤーでカプセル化されます。これは jQuery 関数をカプセル化する要素のセットであるため、私は個人的にこれを「カプセル化された要素セット」と呼びたいと思っています。このカプセル化された要素のセットには、1 つの DOM 要素が含まれる場合もあれば、複数の DOM 要素が含まれる場合もあれば、まったく含まれない場合もあります。カプセル化要素のセットが空の場合、それに対して呼び出される jQuery メソッド/プロパティはエラーをスローしません。これにより、不必要な if ステートメントが回避されます。

上記の HTML コードを例として使用すると、Web ページに複数の

要素がある場合はどうなりますか?以下の例では、HTML ページにさらに 3 つの

要素があります。

上記の例には、ループを表すプログラミングコードはありません。しかし、素晴らしいのは、jQuery がページ全体をスキャンし、すべての

要素をカプセル化された要素セットに入れてから、カプセル化されたセット内の各要素のコードによって定義された一連の jQuery メソッドを実行することです (暗黙的なトラバーサル)。。たとえば、カプセル化されたセット内のすべての要素は .hide() を呼び出します。実際、上記のコードで使用するすべてのメソッド (hide()、text()、addClass()、show()) は、人間が作成したループと同様に、ページ内のすべての div 要素に影響を与えます。 DOM 要素を反復処理します。上記のコードの実行結果は、ページ内のすべての

要素が非表示になり、含まれるテキストが変更され、class 属性が追加され、最終的に再表示されます。

<span class="dec"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span><span class="pln">
</span><span class="tag"><html></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
 </span><span class="tag"><script</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>type</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"text/JavaScript"</SPAN><SPAN class=pln> </SPAN><SPAN class=atn>src</SPAN><SPAN class=pun>=</SPAN><SPAN class=atv>"http://ajax.googleapis.com/ajax/libs/
  jquery/1.3.0/jquery.min.js"</SPAN><SPAN class=tag>></script></span><span class="pln"> </span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
 </span><span class="tag"><div></span><span class="pln">old content</span><span class="tag"></div></span><span class="pln">
 </span><span class="tag"><div></span><span class="pln">old content</span><span class="tag"></div></span><span class="pln">
 </span><span class="tag"><div></span><span class="pln">old content</span><span class="tag"></div></span><span class="pln">
 </span><span class="tag"><div></span><span class="pln">old content</span><span class="tag"></div></span><span class="pln">
 </span><span class="tag"><script></span><span class="pln">
  jQuery</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">).</span><span class="pln">hide</span><span class="pun">().</span><span class="pln">text</span><span class="pun">(</span><span class="str">'new content'</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">"updatedContent"</span><span class="pun">).</span><span class="pln">show</span><span class="pun">();</span><span class="pln">
 </span><span class="tag"></script></span><span class="pln">
</span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span>

ログイン後にコピー

カプセル化された要素セットと暗黙的トラバーサルに慣れることは、複雑なループロジックを作成する場合に非常に重要です。追加のループコードを作成する前に、単純なループ操作が既に存在することに注意することが重要です (例: jQuery(' div') .each(function(){}) つまり、jQuery メソッドの呼び出しは、カプセル化された要素セット内のすべての要素に影響します。

一部の jQuery メソッドには特別な動作があり、カプセル化された要素のセットの最初の要素にのみ影響することに注意してください (例: attr())。