jQueryをjsファイルに導入する方法

Web 開発では、jQuery は非常に人気のある JavaScript ライブラリであり、互換性の問題をあまり考慮する必要がなく、JavaScript コードの作成と DOM の操作が大幅に簡素化されます。プロジェクトの開発を完了する際には、開発効率を高め、プロジェクトの保守性と安定性を向上させるために、通常は jQuery を使用します。では、JS ファイルに jQuery を導入するにはどうすればよいでしょうか?この記事では、2 つの一般的な方法について詳しく説明します。

方法 1: CDN 経由で導入する

CDN (Content Delivery Network) は、Web サイトのコンテンツをキャッシュして送信を高速化し、Web サイトの読み込みを高速化できる、さまざまな場所に分散されたサーバーのグループです。 jQuery にはいくつかの CDN サービス プロバイダー (Google、Microsoft、Baidu など) があり、それらが提供するリンクを通じて jQuery を紹介できます。

Google CDN を例として、次のコードをコピーして HTML ファイルに貼り付けることができます。

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

このコードでは、「src」属性は jQuery コードをロードする場所を指定します。ページが読み込まれると、ブラウザーはサーバーから jQuery をダウンロードするのではなく、Google サーバーから自動的に jQuery をダウンロードしてキャッシュします。これにより、ページの読み込み速度が大幅に向上します。

JS コードを記述するときは、対応する JS ファイルで次のように「$」記号を使用するだけです。

$(document).ready(function() {
    // ...
});

現時点では、jQuery の導入に成功しました。 $ シンボルは、jQuery で提供されるさまざまな関数を指します。

方法 2: ファイルを通じてインポートする

CDN から jQuery をインポートすることに加えて、jQuery をローカルにダウンロードし、ファイルを通じてインポートすることもできます。具体的な方法は以下の通りです。

1. jQuery公式サイト(https://jquery.com/)にアクセスし、最新のjQuery圧縮ファイルをダウンロードします。
2. ダウンロードしたファイルをローカルで解凍します。たとえば、jquery.min.js を「js」フォルダーにコピーします。
3. 次のコードを HTML ファイルに追加します:

<script src="js/jquery.min.js"></script>
<script src="js/myscript.js"></script>

コードの 1 行目は jQuery スクリプトのロードを指定し、コードの 2 行目は自分で作成した JS スクリプトを指定します。例: 「myscript.js」。

4. myscript.js ファイルで、$ 記号を使用して jQuery を導入します。例:

$(document).ready(function() {
    // ...
});

ファイルを使用して jQuery を導入する場合は、次の点に注意してください。 、jQuery ファイルが正しく参照されていることを確認する必要があり、コードの順序も重要です。独自の JS ファイルを jQuery の前に置くと、コードはエラーを報告します。

上記は、jQuery を導入する 2 つの一般的な方法です。 jQuery を使用する必要がある場合、自分に合った方法を選択するだけで、保守可能で安定した Web アプリケーションを楽しく作成できます。

以上がjQueryをjsファイルに導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。