jQuery設置のための準備

2014.03.14
2014.01.23
jQuery , WEB

HTML、CSSに並ぶ？、jQueryというかJavaScript。
今では、jQuery自体も結構、有名なので、いろんなサイトで取り上げられています。
なので、ザックリとおさらいメモ程度です。

というか、いつもメモ程度なのですが。
また追記があれば、書き足していこうと思います。

とりあえずは、この準備して、どこかのサイトからコードを拾ってくればjQueryが動くよ！という感じの内容です。

このページの目次

jQuery本体の設置
- ダウンロードして設置する
- CDN（Contents Delivery Network）を利用して設置する
jQueryの記述
- 各HTMLファイルに記述する
- 外部ファイルで記述する

jQuery本体の設置

ダウンロードして設置する

jQuery公式よりダウンロードして、自分のサーバにアップロードします。
アップロードの際、ファイル名を変更してもOK、今回の例は「jquery.js」に変更しています。

アップロードが完了したら、<head>内に

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

を記述する。

CDN（Contents Delivery Network）を利用して設置する

<head>内に

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

を記述する。
途中の「X」は、jQueryのバージョンが入ります。
バージョンによっては、作ったjQueryが動かない時があるので注意です。

ちなみにIE8はjQuery2.0以降はサポートしてません。
IE8で動かすためには、新しくてもjQuery1.9.1のバージョンを利用しましょう。

どちらもメリット、デメリットと大げさなモノではないですがありまして、自分のサイト、制作ポリシーに合わせて設置しましょう。
他にも、記述の方法はあるのですが、代表的な2つをメモっておきました。

jQueryの記述

各HTMLファイルに記述する

<head>内に

<script type="text/javascript">
      ここにコードを記述していく。
</script>

を記述して、その中に、jQueryコードを記述していきます。

外部ファイルで記述する

テキストファイル等に、jQueryのコードを記述して、自分のサーバにファイルをアップロードする。

アップロードが完了したら、<head>内に

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

を記述する。
「XXX.js」は、自分で記述したjQueryのファイルになります。

どちらかというと、前者は初心者向けな感じで簡単そうですが、コードが冗長的になってしまい、管理の面でよくないかもしれません。
という感じで、こちらもメリット、デメリットが発生するので、自分のサイト、制作ポリシーに合わせて記述していきましょう。
ちなみに、いろんなところで配布されているjQueryをダウンロードして使用する場合は、基本的には、後者で記述します。

以上、簡単な説明でございました。