超攻撃的ゴレイロ “じゅんぼ~” No.16

フットサルチーム『Passion』のゴレイロのメモ帳

『jQuery』のダウンロード及び使用方法について (2013.02.28)

jQuery

 

jQueryのダウンロード>

 

jQueryをダウンロードするために「jQuery」のサイトへ行く。

http://jquery.com/

f:id:junkichi16:20130228155851j:plain

サイトへ行ったら画面右上の【Download jQuery vX.X.X】をクリックします。

※vX.X.Xはバージョンで、この時点ではv1.9.1。

f:id:junkichi16:20130228160826j:plain

Download the compressed, production jQuery X.X.Xをクリックすると、

プログラムが苦手な私のような方が見ると頭が痛くなりそうな画面が出てきます。

f:id:junkichi16:20130228161522j:plain

改行コードやインデントを除去してあるので、こんな感じなのです。

しかしながら、ファイルサイズを小さくしたものなので、実行速度が速いそうです。

 

Download the uncompressed, development jQuery X.X.Xをクリックすると、

改行コードやインデントがそのままなので、分からずとも読みやすい

プログラムが書かれた画面が出てきます。

f:id:junkichi16:20130228163150j:plain

こちらはファイルサイズが大きいため実行速度が遅くなるそうです。

ただ、jQueryの中身を読み解きたい方はこちらが良いかもしれませんね。

 

はてさて、これらの画面を開いたまでは良いけれど、

ダウンロードといっても何か始まるわけではありません。

では、この先どうすれば良いのでしょう?

答えは、各ページ内で右クリックして保存すればOKです!

jquery-X.X.X.min.jsのminは「minified」の略で「圧縮版」を意味しています。

 

jQueryを使用する場合には、圧縮版である jquery-X.X.X.min.js を使用します。

 

これでダウンロードは終了です。

が、わざわざダウンロードしなくてもCDN(Contents Delivery Network)を

使用するという楽な方法もあるようです。

Google Ajax API CDN(ver.1.9.1)

 ⇒ https://developers.google.com/speed/libraries/devguide?hl=ja#jquery

・Microsoft Ajax CDN(ver.1.4.2)

 ⇒ http://msdn.microsoft.com/ja-jp/asp.net/ff699517.aspx#02

jQuery CDN(ver.1.9.1)

 ⇒ http://code.jquery.com/

(※2013月2月28日)

 

jQueryの使用方法>

 

jQuery…つまり、jquery-X.X.X.min.js をどうやって使うかですが、

HTMLの<head>~</head>内で使用します。

というか記述します。

----------------------------------------------------------------------------------------------------------

<head>

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

</head>

----------------------------------------------------------------------------------------------------------

※この際、jquery-X.X.X.min.js が収納されているフォルダは js となります。

 

Google Ajax API CDNやMicrosoft Ajax CDN、jQuery CDNも同様です。

Google Ajax API CDN(ver.1.9.1)

----------------------------------------------------------------------------------------------------------

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

 

----------------------------------------------------------------------------------------------------------

・Microsoft Ajax CDN(ver.1.4.2)

----------------------------------------------------------------------------------------------------------

<head>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>

</head>

----------------------------------------------------------------------------------------------------------

jQuery CDN(ver.1.9.1)

----------------------------------------------------------------------------------------------------------

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>

----------------------------------------------------------------------------------------------------------

 

以上のような記述をすれば、jQueryは実行されます。