第2章　「ドキュメントへのアクセス」

それでは早速jQueryを使ってみましょう。jQueryで多く利用されるのがprototype.jsでもおなじみの$()です。prototype.jsなど他のライブラリでは$()は単純な1つのHTMLエレメント（タグ）へのアクセス用として使われています。要するにdocument.getElementById()のショートカットです。
しかし、jQueryは違います。$()は非常に高機能でCSSセレクタのような機能も持ち合わせています。この高機能な$()のおかげで複雑な階層構造のページでも手軽に操作対象のエレメントを特定することができます。また、該当するエレメントが複数あっても全く問題ありません。例えばイベントを設定する場合でも自動的に複数のエレメントに割り当ててくれます。このため、繰り返し記述がなくなってしまうわけです。
まず、もっとも簡単な例を見てみましょう。サンプル1はボタンをクリックするとページ上の文字が書き変わるものです。（サンプル1を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p id="about">jQueryとは？</p>
<form>
<input type="button" value="書き替え" onClick="changeText()">
</form>
</body>
</html>


【JavaScript】
function changeText(){
$("#about").html("<b>軽量/高速</b>なライブラリです");
}


jQueryを使用している部分は1行だけです。jQueryでは$("#〜")とすると#以後に指定したID名を持つエレメントが操作対象になります。サンプル1では「<p id="about">jQueryとは？</p>」の部分が該当することになります。
jQueryでHTMLタグを含む文字を出力するにはhtml()メソッドを使います。注意しないといけないのは$("#about").innerHTMLと記述しても動作しないという点です。prototype.jsなど他のライブラリでは、このような記述で問題なく動作しますが、jQueryでは駄目です。これは$()とした場合、jQueryオブジェクトが返されるためです。つまり、ページ上にあるエレメントが返されるわけではありません。このため、必ずhtml()メソッドを使わないとページにHTMLタグを含む文字列を出力することができません。
HTMLタグを含む文字列を出力するのではなく、プレーンテキストを出力したい場合もあります。この場合はtext()メソッドを使います。サンプル2ではボタンがクリックされるとHTMLタグも、ただの文字列としてページ上に表示します。（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p id="about">jQueryとは？</p>
<form>
<input type="button" value="書き替え" onClick="changeText()">
</form>
</body>
</html>


【JavaScript】
function changeText(){
$("#about").text("<b>軽量/高速</b>なライブラリです");
}

[目次へ]