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

チェーンコール

jQuery ラッパー

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery についてリファレンス例 1.0 jQuery_jquery の哲学

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:38 PM

この記事は、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())。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7444

CakePHP チュートリアル

1371

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

jQueryマトリックス効果 Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう！これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです！それがどのように機能するかプラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata（x、y、settings.greasize、settings.greasize）.data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

シンプルなjQueryスライダーを構築する方法 Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

JavaScriptによる構造マークアップの強化 Mar 10, 2025 am 12:18 AM

キーポイントJavaScriptを使用した構造的なタグ付けの強化は、ファイルサイズを削減しながら、Webページコンテンツのアクセシビリティと保守性を大幅に向上させることができます。 JavaScriptを効果的に使用して、Cite属性を使用して参照リンクを自動的にブロック参照に挿入するなど、HTML要素に機能を動的に追加できます。 JavaScriptを構造化されたタグと統合することで、ページの更新を必要としないタブパネルなどの動的なユーザーインターフェイスを作成できます。 JavaScriptの強化がWebページの基本的な機能を妨げないようにすることが重要です。高度なJavaScriptテクノロジーを使用できます（