1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tsukuyomip

jQueryとの初デート日記

1
Last updated at Posted at 2014-12-29

この文書について

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

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

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

  1. <dl id="foo">に含まれる<dd class="content">をすべて非表示にし
  2. <dt class="title">がクリックされたら
  3. 直後の<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すれば，実際の遷移は行わないらしい．
これらを使えば実現できるらしい．

  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で書くと，こんな感じ！

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?