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

 

jQuery を利用する2つの方法

  • jQuery をダウンロードして使用する方法
  • jQuery をダウンロードせず、CDNを利用する方法

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-2.0.3.min.js"></script>
<script>
     コードを記述
</script>
</head>

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

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

</head>
<body>




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

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

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

<head>


<script src="jquery-2.0.3.min.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 を配信している4つの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

 

【参考書籍】

やさしくはじめるWebデザイナーのためのjQueryの学校




10日でおぼえるjQuery入門教室 第2版

 

(Visited 1,206 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください