jQuery利用前の準備(ダウンロード、HTMLでの読み込み)

今回は、jQueryの利用の前に必要な準備を説明する。以下の手順で進める。

1. jQueryのダウンロード
2. jQueryをHTMLで読み込む

jQueryのダウンロード

jQueryのダウンロードは公式ページから行う。

1. jQuery公式ページにて「Download(jQuery);」(下の画像の赤枠部分)をクリック。
jQueryダウンロード方法

2. ソースコードのみが表示される場合は、そのページ内を右クリックし、「名前をつけて保存」を選択。ファイル名は「jquery-1.8.1.min.js」などとする。

3. 2でこれとは異なる挙動となる場合にはその流れに沿ってダウンロードする。1年前と挙動が違うようなので、分からなくなったら適宜検索してください。

jQueryをHTMLで読み込む

以下のようにしてjQueryを読み込む。8行目で先ほどダウンロードしたjQueryファイルを読み込んでいる。このサンプルではsample.htmlと同じ階層にjsフォルダを配置し、その中にjquery-1.8.1.min.jsファイルがある。

jquery-1.8.1.min.jsを呼び込んだ後(9-11行目)でjQueryを用いたプログラムを書いていく。

jQueryをHTMLで読み込む – sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQueryをHTMLで読み込む</title>
<script type="text/javascript" src="./js/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
// ここにjQueryを用いてプログラムを書いていく
</script>
</head>
<body>
</body>
</html>

もちろん、jQueryを用いたプログラムを別ファイルにして呼び出すこともできる。その場合は以下のようにする。

このようにすることでソースコードもスッキリし、SEO的にも良い。(参照記事:検索エンジンはプログラムの上部を重要視する

jQueryプログラムも読み込む例 – sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQueryをHTMLで読み込む</title>
<script type="text/javascript" src="./js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="./js/sample.js"></script>
</head>
<body>
</body>
</html>

以上。

関連記事

jQueryとは
HTMLでJavaScriptファイルを読み込む方法
HTMLの読み込み後にjQueryのプログラムを実行する方法

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/jquery/1425/trackback/