この文書について

遡ること十数年，
<font size="5" color="#FF0000">私（本名）のホームページ！</font>
のように，スタイルをHTMLファイルにベタ書きしてた時代．
その頃にほんの少しだけHTMLをいじっていた初心者同然の私が，
今，jQueryと出会い，一目惚れした．

jQueryとの初デート．その忘れられない一日の思い出を綴った，
甘酸っぱいチラシの裏．

jQueryの基礎知識

jQueryって？

JavaScriptを強力に支援するライブラリ．
Webブラウザの互換性とかも全部面倒みてくれるようだ．

基本的な構文

操作対象（セレクタ）を $(selector) の形で指定し，それに対してAPIを用いて $(selector).api() のように操作する．

指定方法

基本的な指定方法は以下のとおり．

記述例	説明
`$('div')`	すべての`<div>`タグを指すセレクタ
`$('#foo')`	`id="foo"`のタグを指すセレクタ
`$('div#foo')`	`<div id="foo">`を指すセレクタ
`$('.bar')`	`class="bar"`のタグを指すセレクタ
`$('#foo .bar')`	`id="foo"`の子孫であり，かつ`class="bar"`のタグを指すセレクタ

もっといっぱいあるので，適宜調べるべし．

はじめに実行される処理

ひとまず，始めに実行したい処理はこの無名関数内に書くこと．

$(document).ready(function(){
	// ここに記述
});

一般的に用いられる`window.onload = function(){}` との違い

window.onloadは全てのリソース（画像，FLASH等の外部リソース含む）がすべて全てロードされてから処理が開始される．サイズの大きなリソースがWebページ内に存在すると，ユーザはストレスを感じるかも．モッサリ．
これに対し，$(document).ready()はHTMLをDOMツリーに変換し終わった時点で処理が開始される．サクサク！

簡単な実例

目的1: 折りたたまれるメニュー（アコーディオンメニュー）作りたい！

目指すもの

例えば，次のような定義リスト(definition list: <dl>)について，定義語(definition term: <dt>)を押したら項目が出たり消えたりするメニュー表示を実装するにはどうすればいいだろうか．

HTML

<html>
	<body>
		<dl id="foo">
			<dt class="title">タイトル1</dt>
			<dd class="content">コンテンツ１</dd>
			
			<dt class="title">タイトル2</dt>
			<dd class="content">コンテンツ２</dd>
			
			<dt class="title">タイトル3</dt>
			<dd class="content">コンテンツ３</dd>
		</dl>
	</body>
</html>

考え方

click(func)を使えば，指定した要素がクリックされた際の処理を記述できるようだ．
また，toggle()というAPIは，呼び出されるたびに対象の表示/非表示を切り替える．
これをら利用すれば良さそうだ．方針としては，

はじめに「コンテンツ」をすべて非表示にし
「タイトル」がクリックされたら
その「タイトル」に対応した「コンテンツ」を表示/非表示する

簡単そう！もうすこし具体的に書くと

<dl id="foo">に含まれる<dd class="content">をすべて非表示にし
<dt class="title">がクリックされたら
直後の<dd class="content">を表示/非表示する

jQueryで書くと，こんな感じ！

jQuery

$('#foo > .content').toggle();         // 1.の処理

$('#foo > .title').click(function(){   // 2.の処理
	$(this).next('.content').toggle()  // 3.の処理
});

えっ，これだけ？なにこれすごい．

サンプル

<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			<!--
			$(document).ready(function(){
				$('#foo > .content').toggle();
				
				$('#foo > .title').click(function(){
					$(this).next('.content').toggle();
				});
			});
			-->
		</script>
	</head>
	
	<body>
		<dl id="foo">
			<dt class="title">No.1</dt>
			<dd class="content">11111</dd>
			
			<dt class="title">No.2</dt>
			<dd class="content">222</dd>
			
			<dt class="title">No.3</dt>
			<dd class="content">3333333</dd>
		</dl>
	</body>
</html>

応用: いずれかの`<dt>`に対し`<dd>`を複数対応させる場合は

今回の例，$(this).next('.content').toggle();だと，直後の1要素しか対象とならないため，複数の<dd>が存在する場合に先頭しか表示されない．
$(this).nextUntil('dt', '.content') とすれば，次の<dt>までのすべての兄弟要素が選ばれる（ここではclass='.content'でさらにフィルタをかけている）．

目的2: タブで選べるメニュー作りたい！

目指すもの

例えば次のようなHTMLで，リンクをクリックしたら下に表示される内容が変わる，所謂タブナビゲーションを実現したいときはどうすればいいだろうか．

HTML

<html>
	<body>
		<ul id="tabmenu">
			<li class="title"><a href="#content1">TITLE 1</a></li>
			<li class="title"><a href="#content2">TITLE 2</a></li>
			<li class="title"><a href="#content3">TITLE 3</a></li>
		</ul>
		
		<div id="tabcontent">
			<div id="content1">
				content one.
			</div>
			<div id="content2">
				content two.
			</div>
			<div id="content3">
				content three.
			</div>
		</div>
	</body>
</html>

考え方

セレクタで指定した要素に対しclick()をおこなうと，jQueryを用いてクリックを実行できるようだ．
また，filter(selector)によって，さらに絞り込むことができるようである．
<a>タグクリック時の関数内でのthis.hashではaタグ参照先のハッシュ値を持ってこられるし，同関数でreturn falseすれば，実際の遷移は行わないらしい．
これらを使えば実現できるらしい．

タイトルがクリックされたら
そのタイトルに対応したコンテンツだけを表示する

でも，このままだとはじめは表示されちゃうので，強制的に最初のメニューをクリックさせておく！
つまり，

タイトルがクリックされたら
そのタイトルに対応したコンテンツだけを表示する
最後に，先頭のタイトルをクリックした状態にする

これを具体的に書くと，

<div id="tabmenu">内の<a>タグがクリックされたら
クリックされたアンカータグのハッシュhref="#contentX"に対応したidを持つコンテンツ<div id="contentX">のみ表示
- 2.1. すべてのコンテンツ$('#tabcontent div')を非表示にし
- 2.2. 対象のコンテンツだけ表示させる
先頭の<a href="#content1">をクリックした状態にしておく

jQueryで書くと，こんな感じ！

jQuery

$('#tabmenu a').click(function(){  // 1.の処理
	$('#tabcontent div').hide()    // 2.1.の処理
		.filter(this.hash).fadeIn();  // 2.2.の処理 *1
	return false;  // falseを返すとリンク先に飛ばない *2
}).filter(':eq(0)').click();  // 3.の処理

この例でのキモは3つ．
(*1): this.hashで，クリックされたアンカーのハッシュを"#contentX"の形（jQueryのid指定と同じ形）で取得できること．
(*1): 全てhide()した後，filter()をかけることで，特定の要素だけ表示できること．
(*2): アンカータグのクリック時の処理を記述したclick(func)のfuncがfalseを返すとリンク先に飛ばなくなること．（イベントのバブリングが中断されると言うらしい．）

初心者としては，読めるけど，書けない．

サンプル

HTML

<html>
	<head>
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			<!--
			$(document).ready(function(){
				$('#tabmenu a').click(function(){
				$('#tabcontent div').hide()
					.filter(this.hash).fadeIn();
				return false;
				}).filter(':eq(0)').click();
			});
			-->
		</script>
	</head>
	
	<body>
		<ul id="tabmenu">
			<li class="title"><a href="#content1">TITLE 1</a></li>
			<li class="title"><a href="#content2">TITLE 2</a></li>
			<li class="title"><a href="#content3">TITLE 3</a></li>
		</ul>
		
		<div id="tabcontent">
		
			<div id="content1">
				content one.
			</div>
			
			<div id="content2">
				content two.
			</div>
			
			<div id="content3">
				content three.
			</div>
			
		</div>
	</body>
</html>

まとめ

初心者でもかなり使いやすいし，わかりやすい．
なんとなくセミコロン付けてたけど，本当はいらないのかな？調べておかなければです．
ライブラリなので，jQueryでどんなことが出来るかを頭に入れておくことが大事かな？
もっと，もーっと，色々なことが出来るみたい．
数行でお洒落な処理できるjQuery…… すごい……．