HTML で JQuery を追加する

1. JQueryCDN を使用して JQuery を HTML に含める
2. JQuery をダウンロードして HTML に含める

この記事では、HTML ページに jQuery コードを追加または記述する方法について説明します。

JQueryCDN を使用して JQuery を HTML に含める

JQeury は、最も人気のある JavaScript ライブラリの 1つです。

このライブラリは、DOM トラバーサルと操作、CSS 操作、イベント処理、アニメーション、AJAX 呼び出しなどの機能を使用して、Web サイトでの多くの作業を簡素化します。主な利点である jQuery を使用して、記述を減らし、より多くのことを実行できます。

通常の JavaScript ではなく jQuery を使用して、より少ないコードで操作を実行できます。次に、HTML ページで jQuery を使用する方法に取り組みます。

HTML ドキュメントに jQuery を含める最も一般的な方法は、コンテンツ配信ネットワーク（CDN）を使用することです。CDN は、ユーザーに近いネットワークの場所にコンテンツをキャッシュすることにより、要求されたコンテンツをエンドユーザーに提供するサーバーのネットワークです。

このようにして、ユーザーは要求されたデータを迅速かつ正確に提供されます。jQuery CDN は、Google CDNや Microsoft CDNなどのさまざまなソースから入手できます。

script タグに jQueryCDN URL を含め、HTML で jQuery を使用できます。jQuery を別の .js ファイルに書き込んで HTML ファイルに含めるか、script タグ内に jQuery を書き込むことができます。

まず、JQuery CDN Web サイトにアクセスして、jQuery の最新の安定バージョンを選択します。デモンストレーションには、非圧縮バージョンを使用しています。

その後、ウェブサイトは以下に示すタグを出力します。

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

次に、タグをコピーして HTML ファイルに配置します。次に、ID が text の p タグを作成し、タグの間に何も書き込まないでください。

p タグの下に、ID button のボタンを作成し、value 属性にここをクリックというテキストを入力します。HTML の部分は終わりました。次に、jQuery を記述します。

script タグ内に、ready()jQuery メソッドを記述します。button ID を選択し、メソッド内で click() メソッドを呼び出します。

ここでも、click() メソッド内で text id を選択し、html() メソッドを呼び出します。テキスト clicked を html() パラメータとして記述します。

このセクションでは、これらのさまざまな jQuery メソッドについて学習します。ready() メソッドには、他のすべてのメソッドが含まれています。

メソッド内の他のコンテンツは、DOM が完全に読み込まれたときに実行されます。同様に、click() メソッドは、選択した要素がクリックされたときに実行されます。html() メソッドは、コンテンツを選択した要素に設定します。

以下の例では、ボタンをクリックすると clicked というテキストが表示されます。このようにして、CDN を使用して HTML ドキュメントで jQuery を使用できます。

サンプルコード：

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>

JQuery をダウンロードして HTML に含める

HTML で jQuery を作成するもう 1つの方法は、jQuery ファイルをダウンロードして HTML ファイルに含めることです。

リンクこちらからファイルをダウンロードできます。ダウンロードした .js ファイルを script タグに含めた後、jQuery コードを HTML で記述します。

たとえば、上記のリンクから jQuery ファイルをダウンロードします。次に、HTML ファイルで、jQuery ファイルのファイルパスを script タグの src 属性に書き込みます。

これは、上記の方法の例から行う必要がある唯一の変更です。デモンストレーションには同じ HTML コードと jQuery コードを使用します。

ボタンをクリックすると、上記の例のように clicked というテキストが表示されます。このようにして、jQuery ファイルをダウンロードして HTML に含めることができます。

サンプルコード：

<script src="jquery-3.6.0.min.js"></script>
<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>