jQuery【 ダウンロード 】jQuery を使用するための準備

colmun_main9353

jQuery は、JavaScript を短いコードで記述することができる便利なツールですが、使用するにあたって、ライブラリを用意しておく必要があります。
今回は、jQuery の使用に必要なライブラリの取得、設置方法を具体的に紹介したいと思います。

目次

 1.ライブラリを用意する2つの方法
 2.jQuery をダウンロード
 3.ダウンロードしたファイルを読み込む
 4.CDN を使用して読み込む
 5.動作確認

1.ライブラリを用意する2つの方法

 
jQuery を使用する際には jQuery 本体( ライブラリ )を用意する必要がありますが、それには 次の2通りの方法があります。

●ライブラリをダウンロードして HTMLファイル内で読み込む

●CDN を使用して HTMLファイル内でライブラリを直接読み込む

今回は、ライブラリをダウンロードして HTMLファイル内で読み込む方法から順に紹介します。
 
ライブラリをダウンロードして使用する方法は、オフラインでも jQuery を使用できるというメリットがあります。

これに対して、CDN を使用してライブラリを読み込む方法は、処理速度が速いというメリットがあります。

▲目次へ戻る

 

2.jQuery をダウンロード

 
jQuery のライブラリをダウンロードします。

jQuery の サイトから、最新版のライブラリをダウンロードして下さい。
( 以下、ファイルのバージョン等は掲載当時のものですのでご注意下さい。 )

colmun_image9353_01

今回は、1番上の「 Download the compressed, production jQuery 3.3.1 」をクリックして進めます。

因みに、2番目の「 Download the uncompressed, development jQuery 3.3.1 」をクリックしてダウンロードすると、ライブラリの中身( 実際に実行される JavaScriptのコード )を見ることができます。

▲目次へ戻る

 

3.ダウンロードしたファイルを読み込む

 
先ほどの「 Download the compressed, production jQuery 3.3.1 」をクリックして jQuery ライブラリのダウンロードが終了すると、「 jquery-3.3.1.min.js 」というファイルが作成されます。

このファイルを任意の場所に置いて、HTMLファイル内で次のように読み込みます。

<script type="text/javascript" src="/path/jquery-3.3.1.min.js"></script>

「 path 」部分に、ダウンロードした jsファイルのパスを記述します。

ダウンロードした jsファイルを HTMLファイルと同じフォルダ内に設置する場合は、「 path 」部分が不要となり、「 src=”jquery-3.3.1.min.js” 」でOKです。

▲目次へ戻る

 

4.CDN を使用して読み込む

 
CDN( Contents Delivery Network, CDN )とは、Webコンテンツを インターネット経由で配信するためのネットワークを意味します。

そして、CDN を使用してjQuery のライブラリを用意する方法は、ライブラリを ダウンロードすることなく CDN から直接読み込む方法です。

jQuery ライブラリの読み込みに使用できる CDN は、主に次の通りです。

jQuery サイトの CDN

Google の CDN

Microsoft の CDN

 

jQuery サイトの CDN

jQuery の CDNを使用すると、HTMLファイル内で次のように読み込みます。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

 

Google の CDN

Google の CDNを使用すると、HTMLファイル内で次のように読み込みます。

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

 

Microsoft の CDN

Microsoft の CDNを使用すると、HTMLファイル内で次のように読み込みます。

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

▲目次へ戻る

 

5.動作確認

 
実際に jQuery を使用してアラートを表示します。
下の確認ボタンをクリックしてみて下さい。


 
このサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn01").click(function(){
    alert("jQuery の準備OK!");
  });
});
//-->
</script>
<input type="button" id="btn01" value="確認">

上記は jQuery サイトの CDN を使用して ライブラリを直接読み込んでいますが、ライブラリをダウンロードして読み込む場合は ライブラリファイルまでのパスの記述にご注意下さい。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です