jQueryをはじめてみた

categories: javascript

クロスブラウザ対応JavaScriptライブラリとして定番のjQueryの勉強をはじめてみた。学んだことを綴ってみるよ。現時点での最新バージョン1.4.4を公式サイトからダウンロードして試してみます。

jQueryライブラリをインクルードする

jQueryを使うため読み込みます。

ローカルにダウンロードしたのを使う(開発向け uncompressed code を使用)

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

Googleがホストしているのを使う(リリース向け minified code を使用)

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

HTMLを出力してみる

Hello, jQueryって表示させてみる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="jquery-1.4.4.js"></script>
		<title>Beginning jQuery</title>
	</head>
	<body>
		<script type="text/javascript">
			$('body').html('<p>Hello, jQuery.</p>');
		</script>
	</body>
</html>

ふむふむ、ちゃんと動いた。

$(‘セレクタ’)で、指定したDOM要素のjQueryオブジェクトを生成して(この例だとbody要素)、それに対してhtml()メソッドを使ってp要素を追加した。ちなみに$はjQueryの省略形なのでjQuery(‘セレクタ’)と書いても同じ。

さっきのはbody内にscriptを書いたけど、次はhead内に移してみる。

DOMの準備が出来たら実行する

準備が出来る前にDOM操作をしてうまく動かない

先ほどのjQueryのコードをそのままhead内に移しただけだとHello, jQueryが表示されない。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="jquery-1.4.4.js"></script>
		<script type="text/javascript">
			$('body').html('<p>Hello, jQuery.</p>');
		</script>
		<title>Beginning jQuery</title>
	</head>
	<body>
	</body>
</html>

HTMLは上から順番に実行されるので、head内にDOMを操作するスクリプトを書くとドキュメントの準備が完了する前に実行されてしまう。そのため指定した要素がなくエラーになる。この場合ready()メソッドを使うと準備が出来た段階で実行出来る。

準備が出来てから実行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="jquery-1.4.4.js"></script>
		<script type="text/javascript">
		$(function () {
			$('body').html('<p>Hello, jQuery.</p>');
		});
		</script>
		<title>Beginning jQuery</title>
	</head>
	<body>
	</body>
</html>

あれready()メソッド使ってませんね。$(function)はready()メソッドの省略した書き方です。省略しないで書くとフルで書くとこんな感じ

<script type="text/javascript">
	jQuery(document).ready(function () {
 		$('body').html('<p>Hello, jQuery.</p>');
	});
</script>

ready()メソッドは準備が出来た時に実行したい関数を引数に取ります。今回は無名関数 function () { } を渡してます。$(function () { });はjQuery使うときの定型句ね。

今回はこのぐらいにして、次回はセレクタの勉強をしたいと思います。

tags: ,

Comments

Trackbacks

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です。コメントは承認制です。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Trackback URL