スポンサーリンク

[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

1.jQuery をダウンロード

jQuery のサイトの右のボタンをクリックし、[Download the compressed, production jQuery 3.2.1] をクリックし、ダウンロード。

 jQuery - ダウンロード

jQuery

 

Download jQuery

ファイル名は、[jquery-3.2.1.min.js] となる。

2.jQuery の2種類の形式

  • PRODUCTION
  • DEVELOPMENT

PRODUCTION (31KB,Minified and Gzipped)

jQuery のコードから余計なコメント、改行やスペースを取り除いたサイズが小さい形式。

ダウンロード時間が短く、本番環境での利用に適している。

DEVELOPMENT (229KB, Uncompressed Code)

コメント、改行やスペースを含んだ非圧縮版の形式。

その分、PRODUCTION よりも、ソースが読みやすくなっている。

PRODUCTION 版のサイズの約8倍のサイズとなっている。

 

jQuery を利用するには、まずは、PRODUCTION 版をインストールすればいい。

2.jQuery のパッケージ形式

ファイル名 概要
.js 非圧縮版 (development 版)
.min.js 圧縮版 (production 版)
.pack.js Packer と呼ばれる圧縮ツールを利用して圧縮されるパッケージ
-vsdoc.js 統合開発環境 Visual Studio で jQuery のコード補完機能を有効にするために、情報を含んだパッケージ。

3.ヘッド内に、記述。

<head>
・・・・
<script src=js/jquery.js"></script>
<script>
     コードを記述
</script>
</head>

jQuery の本体を読み込み、<script> 内に、コードを記述。

3.</body> の直前に、jQuery を記述

</head>
<body>




<script src="jquery.js"></script>
<script>
      コードを記述
</script>
</body>
</html>

jQuery のコードの前に、ページ全体を読み込ませるために、</body> タグの直前に、jQuery を記述する方法もある。

4.外部ファイルを利用し、jQuery を記述する方法

<head>


<script src="jquery.js"></script>
<script src="js/script.js"></script>
</head>
<body>

jQuery 本体を読み込ませ、外部ファイル script.js を読み込ませる。

ページ全体の表示速度を速めることができる。

5.CDN を利用する

CDN(コンテンツデリバリーネットワーク)を利用しても、jQuery を利用できる。

CDN を使えば、jQuery をダウンロードせずに、jQuery を利用できる。

下記のように、CDNのファイルを直接、読み込む。

スポンサーリンク

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

jQuery を配信している3つのCDN

Google Ajax API CDN

https://developers.google.com/speed/libraries/#jquery

Microsoft CDN

https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0

jquery – cdnjs.com

https://cdnjs.com/libraries/jquery/

jquery CDN by jsDelivr

https://www.jsdelivr.com/package/npm/jquery

jQuery のサイトのダウンロードページに、各CDNの最新版リンクが、まとめられている。

 jQuery のサイトのダ ウンロードページの各CDN

 

【参考書籍】

 

[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

スポンサーリンク

コメントを残す