この文書について
遡ること十数年,
<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>
<body>
<dl id="foo">
<dt class="title">タイトル1</dt>
<dd class="content">コンテンツ1</dd>
<dt class="title">タイトル2</dt>
<dd class="content">コンテンツ2</dd>
<dt class="title">タイトル3</dt>
<dd class="content">コンテンツ3</dd>
</dl>
</body>
</html>
考え方
click(func)
を使えば,指定した要素がクリックされた際の処理を記述できるようだ.
また,toggle()
というAPIは,呼び出されるたびに対象の表示/非表示を切り替える.
これをら利用すれば良さそうだ. 方針としては,
- はじめに「コンテンツ」をすべて非表示にし
- 「タイトル」がクリックされたら
- その「タイトル」に対応した「コンテンツ」を表示/非表示する
簡単そう! もうすこし具体的に書くと
-
<dl id="foo">
に含まれる<dd class="content">
をすべて非表示にし -
<dt class="title">
がクリックされたら - 直後の
<dd class="content">
を表示/非表示する
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>
<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. 対象のコンテンツだけ表示させる
- 2.1. すべてのコンテンツ
- 先頭の
<a href="#content1">
をクリックした状態にしておく
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>
<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…… すごい…….