jQueryとの初デート日記


# この文書について
遡ること十数年，
`<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"`のタグを指すセレクタ|

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

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

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

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



# 簡単な実例
## 目的1: 折りたたまれるメニュー（アコーディオンメニュー）作りたい！
### 目指すもの
例えば，次のような定義リスト(definition list: `<dl>`)について，定義語(definition term: `<dt>`)を押したら項目が出たり消えたりするメニュー表示を実装するにはどうすればいいだろうか．

```HTML: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は，呼び出されるたびに対象の表示/非表示を切り替える．
これをら利用すれば良さそうだ． 方針としては，

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

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

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

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

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

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

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

### サンプル
```HTML
<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
<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`すれば，実際の遷移は行わないらしい．
これらを使えば実現できるらしい．

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

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

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

これを具体的に書くと，

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

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

```javascript: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
<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…… すごい……．