SAMPLE IMAGE この画像は差し替えてご利用ください

jQuery を使うための準備

jQuery を使用するための特別なアプリケーションや開発環境は必要ありません。jQuery は JavaScript ライブラリなので、当ライブラリを使うための準備が必要になります。

 

jQuery ライブラリを使う準備には二つの方法がある:

1.jQuery をダウンロードして使用する方法

2.jQuery をダウンロードせずに使用する方法(CDN)

方法1:ライブラリーをダウンロードして使う 

➊ jQuery サイトにアクセスする

jQuery のライブラリー本体(JavaScriptファイル)は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。ダウンロードは、特別な理由が無い限り、最新版ライブラリの Minified (圧縮版)を使います。

公式サイト:

http://jquery.com/  →  Download jQuery

jdgJQ0_04:jQuery 公式サイトで「Download jQuery」
jdgJQ0_04:jQuery 公式サイトで「Download jQuery」

➋ [Download jQuery] ボタンをクリックする

➌ [Download the compressed …] でダウンロードする

Dowloading jQuery のページが開くので、jQuery のセクションで、 Download the compressed, production jQuery 3.4.1 のリンクを右クリックし、[名前を付けてリンク先を保存](Google Chrome の場合)で、jquery-3.4.1.min.js をPCにダウンロードする。 (2019年9月時点の最新バージョンは 3.4.1)

jdgJQ0_05:Downloading jQuery
jdgJQ0_05:Downloading jQuery

❹ jQuery 本体を読み込む記述を head 要素内に!

ダウンロードした jQuery ライブラリを読み込むためには、head 要素内の title タグの次に以下の <script> タグを追加します。

Jimdo で作成したサイトの場合は、「管理メニュー」>「基本設定」>「ヘッダー編集」>「ホームページ全体」タブを開いて追加します。

ここで入力された記述は head 要素に記述されることになる。

head要素

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

方法2:ライブラリーをダウンロードしないで使う(CDN を使う)

CDNとは

「CDN」は Content Delivery Network の略で、インターネット経由でファイルを配信する仕組みのことです。jQuery などで利用する場合は、ソースファイルをネット経由で使えるためファイルをダウンロードする必要がありません。

もちろん、自分のサーバーへ  jQuery のファイルをアップロードしなくても良いわけです。手軽に使える便利なしくみです。

ヘッダー部分に以下を追加し、jQuery 本体を読み込む

  1. 「管理メニュー」>「基本設定」>「ヘッダー編集」>「ホームページ全体」を表示する。ここは<head>~</head>間にスタイル記述を追加するために使用する。
  2. <head> ~ </head> 間に以下を追加する(コピーして貼り付ける)

head要素

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

 

Jimdo では「http」は読み込みエラーとなるので、「https」を使う。

 

  1. 更に、以下も同じ場所(<head>内)に貼り付ける。

head要素

<meta name="viewport" content="width=device-width, initial-scale=1.0">

jQuery プラグインコードを記述する場所

jQuery プラグインコードは、head 要素内に jQuery 本体を読み込むコードの後ろに記述します。

 

Jimdo で作成したサイトの場合は、「管理メニュー」>「基本設定」>「ヘッダー編集」で「ホームページ全体」タブを開いて記述します。

 

head要素

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="flyimages.jquery.js"></script>

一行目は jQuery 本体の読み込み、二行目はデバイスの画面幅に合わせた表示のために必要なものらしいです、三行目は jQuery プラグイン読み込みの記述です。

jQuery ライブラリが正しく読み込まれているかを確認する

以下の script コードを head 要素内、jQuery 記述に追加記入して実行する。

 

内容は、HTML(document)ページの読み込みが完了(ready)したら、アラートを表示するという jQuery です。

 

head要素

<script type="text/javascript">

$(document).ready(function(){

// 処理開始

alert("test1");

alert("test2");

alert("test3");

// 処理終了

});

</script>

① 上記 script コードをコピーして、「管理メニュー」>「基本設定」>「ヘッダー編集」>「ホームページ全体」に貼り付ける。

 

②「保存」をクリックする。

jdgJQ0_06
jdgJQ0_06

③「保存」ボタンが「保存完了」に変わる。script コードには6行目と14行目が自動的に追加される。

 

④ jQuery の Alert「test1」が表示される。

 

⑤ 順次「OK」をクリックすると、次の Alert が表示される。

 

jdgJQ0_07
jdgJQ0_07

アラートが表示されれば準備完了です。