jQuery をシンプルにマスターする: Core jQuery

jQuery の背後にある基本概念

jQuery API には概念的なバリエーションがいくつかありますが ($.ajax などの関数など)、jQuery の背後にある中心的な概念は「何かを見つけて何かをする」です。具体的には、HTML ドキュメントから DOM 要素を選択し、jQuery メソッドを使用してそれらに対して特定の操作を実行します。これが全体像の概念です。

この概念を深く理解するには、次のコードを検討してください。

リーリー

この HTML ドキュメントでは、jQuery を使用して DOM 要素を選択していることに注意してください (<a></a>)。何かを選択した後、jQuery メソッド text()、attr()、および appendTo() を呼び出して、選択内容に対していくつかのアクションを実行します。

text メソッドは、ラップされた <a></a> 要素で呼び出され、要素の表示テキストを「jQuery」に設定します。 attr href 属性を jQuery サイトに設定するために呼び出されます。

「何かを見つけて何かをする」という基本概念を理解することは、jQuery 開発者として進歩するために重要です。

---

コンセプト、コンセプトの背景、jQuery の背景

何かを選択し、何かを実行することが jQuery の背後にある中心的な概念ですが、私はこの概念を何かの作成を含むように拡張したいと考えました。したがって、jQuery の背後にある概念は、最初に何か新しいものを作成し、それを選択し、それからそれを使って何かを行うことを含むように拡張できます。これは jQuery の背後にある概念、概念の背後にある概念と呼ぶことができます。

私が指摘したいのは、DOM に既に存在するものを単に選択するだけではないということです。 grok に関するもう 1 つの重要な点は、jQuery を使用して新しい DOM 要素を作成し、それらの要素に対して特定の操作を実行できることです。

以下のコード例では、DOM にない新しい <a></a> 要素を作成します。作成されると、選択されて実行されます。

リーリー

ここで理解すべき重要な概念は、<a></a> 要素を動的に作成し、それがすでに DOM 内にあるかのように操作しているということです。

---

jQuery では、HTML を標準モードまたは標準モードに近いモードで実行する必要があります

ブラウザが HTML ページを奇妙なモードでレンダリングすると、jQuery メソッドが正しく動作しないという既知の問題があります。 jQuery を使用する場合、ブラウザーが有効なドキュメント タイプを使用して標準モードまたはほぼ標準モードで HTML を解釈することを確認してください。

正しい機能を保証するために、この本のコード例では HTML 5 ドキュメント タイプを使用しています。

リーリー

---

DOM の準備ができるまで待機中

DOM がロードされて操作できるようになると、jQuery は ready という名前のカスタム イベントをトリガーします。 DOM を操作するコードは、このイベントのハンドラーで実行できます。これは、jQuery の使用における一般的なパターンです。

次の例は、使用中のこのカスタム イベントの 3 つのコーディング例を示しています。

リーリー

ready() イベントは必要なだけドキュメントに添付できることに注意してください。 1 つだけに限定されるわけではありません。これらは追加された順に実行されます。

---

ブラウザウィンドウが完全に読み込まれたときにjQueryコードを実行します

通常、window.onload イベントを待ちたくありません。これは、ウィンドウが読み込まれる前、DOM を走査して操作する準備ができた後にコードを実行する ready() のようなカスタム イベントを使用することのポイントです。

しかし、時には待ちたいこともあります。カスタム ready() イベントは、DOM が利用可能になった後にコードを実行するのに最適ですが、jQuery を使用して、すべてのリソースを含む Web ページ全体が完全に読み込まれた後にコードを実行することもできます。

これは、load イベント ハンドラーを window オブジェクトにアタッチすることで実行できます。 jQuery は、ウィンドウが完全に読み込まれた後に関数を呼び出すために使用できる load() イベント メソッドを提供します。以下に、load() イベント メソッドの使用例を示します。

リーリー

---

jQuery を含める前にすべての CSS ファイルを含めます

jQuery 1.3 以降、ライブラリはカスタム ready() イベントが発生する前にすべての CSS ファイルが読み込まれることを保証しなくなりました。 jQuery 1.3 でのこの変更により、jQuery コードの前に常にすべての CSS ファイルを含める必要があります。これにより、HTML ドキュメントに後から含まれる JavaScript にリダイレクトする前に、ブラウザーが CSS を解析したことが保証されます。もちろん、CSS 経由で参照される画像は、ブラウザーが JavaScript を解析するときにダウンロードされる場合とダウンロードされない場合があります。

---

jQuery のホストされたバージョンを使用する

jQuery を Web ページに埋め込む場合、ほとんどの人はソース コードをダウンロードし、個人のドメイン/ホストからそれにリンクすることを選択します。ただし、他の人に jQuery コードをホストしてもらう必要があるオプションもあります。

Google は、誰でも使用できるように複数のバージョンの jQuery ソース コードをホストしています。これは実際には非常に便利です。以下のコード例では、<script></script> 要素を使用して、Google がホストする jQuery の縮小バージョンを含めます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Google 还托管了多个以前版本的 jQuery 源代码，并且对于每个版本，都提供了缩小版和非缩小版变体。我建议在开发过程中使用非缩小变体，因为在处理非缩小代码时调试错误总是更容易。

使用 Google 托管版本的 jQuery 的一个好处是它可靠、快速并且可以缓存。

---

不使用 Ready() 解析 DOM 时执行 jQuery 代码

并不完全需要自定义 ready() 事件。如果您的 JavaScript 代码不影响 DOM，您可以将其包含在 HTML 文档中的任何位置。这意味着如果您的 JavaScript 代码不依赖于完整的 DOM，您可以完全避免 ready() 事件。

现在大多数 JavaScript，尤其是 jQuery 代码，都会涉及到操作 DOM。这意味着 DOM 必须由浏览器完全解析才能进行操作。这就是为什么开发人员几年来一直陷在 window.onload 过山车上的原因。

为了避免对 DOM 操作的代码使用 ready() 事件，您只需将代码放在 HTML 文档中的

以上がjQuery をシンプルにマスターする: Core jQueryの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。