jQueryの基礎知識 (2/3)
作成:2010-04-03 18:17
更新:2010-05-11 20:38
更新:2010-05-11 20:38
■jQueryのライブラリを利用する
では、jQueryのライブラリはどのように利用すればよいのでしょうか。――JavaScriptのライブラリは、どんなものであれ、基本的な使い方は共通です。すなわち、「ライブラリファイルをダウンロードし、使用したいWebサイトにアップロードし、<script>タグでそれをロードする」というものです。
ライブラリというとなんだか特殊な感じがしますが、要は「ただのスクリプトファイル」なのです。特にjQueryは、本体がたった１つのスクリプトファイルでしかありません。
http://jquery.com/
まずは、上のアドレスにアクセスをしましょう。ここが、jQueryのサイトです。そして、ページの右側にある「Download(jQuery)」というボタンをクリックしてください。ぶわ～～！！っと画面にJavaScriptのスクリプトが表示されます。これが、jQueryのライブラリです。後は、それをファイルに保存すればOKです。
この「Download(jQuery)」ボタンで表示されるスクリプトファイルは「jquery-1.4.2.min.js」というファイル名になっていますので、ここでも同じ名前で保存しておくことにしましょう。そして、jQueryを使いたいWebページと同じ場所にアップロードしておきます。これで準備は完了です。
実際にWebページでjQueryの機能を利用する場合には、下のリストに掲載したように、<script>タグをWebページのヘッダー部分に記述しておきます。ここでは、"jquery-1.4.2.min.js"というファイル名で記述してありますが、もちろん、それぞれが使っているライブラリのファイル名にあわせてやればOKです。
○動作チェック！○
それじゃ、実際にjQueryがきちんとロード出来ているか、簡単なサンプルを作って確かめてみましょう。下のリスト部分に掲載したサンプルをHTMLファイルで保存し、jQueryをアップロードしているWebサーバーにアップしてください。そしてこのWebページにアクセスしてみましょう。
もし、jQueryがちゃんとロードされていれば、Webページには「jQuery、準備OKです！」と表示されます。jQueryが機能していなければ、「※準備はできたかな？」のままのはずです。
ライブラリというとなんだか特殊な感じがしますが、要は「ただのスクリプトファイル」なのです。特にjQueryは、本体がたった１つのスクリプトファイルでしかありません。
http://jquery.com/
まずは、上のアドレスにアクセスをしましょう。ここが、jQueryのサイトです。そして、ページの右側にある「Download(jQuery)」というボタンをクリックしてください。ぶわ～～！！っと画面にJavaScriptのスクリプトが表示されます。これが、jQueryのライブラリです。後は、それをファイルに保存すればOKです。
この「Download(jQuery)」ボタンで表示されるスクリプトファイルは「jquery-1.4.2.min.js」というファイル名になっていますので、ここでも同じ名前で保存しておくことにしましょう。そして、jQueryを使いたいWebページと同じ場所にアップロードしておきます。これで準備は完了です。
実際にWebページでjQueryの機能を利用する場合には、下のリストに掲載したように、<script>タグをWebページのヘッダー部分に記述しておきます。ここでは、"jquery-1.4.2.min.js"というファイル名で記述してありますが、もちろん、それぞれが使っているライブラリのファイル名にあわせてやればOKです。
○動作チェック！○
それじゃ、実際にjQueryがきちんとロード出来ているか、簡単なサンプルを作って確かめてみましょう。下のリスト部分に掲載したサンプルをHTMLファイルで保存し、jQueryをアップロードしているWebサーバーにアップしてください。そしてこのWebページにアクセスしてみましょう。
もし、jQueryがちゃんとロードされていれば、Webページには「jQuery、準備OKです！」と表示されます。jQueryが機能していなければ、「※準備はできたかな？」のままのはずです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※jQueryライブラリをロードするタグ
<script src="jquery-1.4.2.min.js"></script>
※サンプルスクリプト
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
function initial(){
$('#message').text('jQuery、準備OKです！');
}
//-->
</script>
</head>
<body onload="initial();">
<H1>TEST.</H1>
<div id="message">※準備はできたかな？</div>
</body>
</html>
※関連コンテンツ