jQueryの基礎知識 (2/3)

■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が機能していなければ、「※準備はできたかな？」のままのはずです。

(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>

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail