jQueryクックブック #TechLunch

2011/09/14(水) @ Livesense TechLunch
発表者：島田 喜裕

Transcript

1. jQuery jQuery クックブック クックブック
2. jQuery jQuery での要素の選択 での要素の選択 • jQuery の中心にはセレクタエンジンがあ る。 • CSS セレクタ構文で要素選択ができる。 • 特別な状態や特性に基づいた要素選択 を可能にするカスタムセレクタがある。
3. 基本原理 基本原理 • 要素を指定する簡単な方法 • 例 ) #content 内のすべての <p> 要素に 含まれるすべての <a> 要素を選択 　 jQuery('#content p a');
4. 基本原理 基本原理 • 選択された要素は jQuery メソッドを実行で きる。 • 例 ) すべてのリンクに selected クラスを追加する jQuery('#content p a') .addClass('selected');
5. セレクタを作成するときの セレクタを作成するときの 最適化の原則 最適化の原則 • できるだけ具体的なものにする • 意味もなく複雑にはしない 　 jQuery('body div#wrapper div#content'); ↓ 　 jQuery('#content');
6. セレクタの高速化 セレクタの高速化 • class 属性の代わりに id 属性 ・ HTML 　 <div id="bar" class="foo"></div> 　 $('.foo') // Slower $('#bar') // Faster
7. セレクタの高速化 セレクタの高速化 ・ HTML 　 <table id="log"> 　 <tr> <td>Client X:</td><td class="clientX"></td> </tr> ... 　 </table> • tr.clientX を選択する場合にはどうするか？
8. セレクタの高速化 セレクタの高速化 • クラスセレクタを使う場合、 ID セレクタでた どる $('.clientX') // Slower $('td.clientX') // May be faster $('#log .clientX') // May be much faster $('#log td.clientX') // Possibly faster in some browsers
9. セレクタについて セレクタについて • ページが単純な場合はクラスセレクタのほうが 複雑なセレクタより速い可能性がある。 セレクタが複雑だとセットアップに時間 がかかる • 特定のページで最も高速なセレクタを確認す るためには、そのページでそれぞれをテストす るしかない。
10. セレクタについて セレクタについて • クラスセレクタは時間がかかる可能性がある。 jQuery1.3 よりも以前 どのブラウザでも時間がかかる jQuery1.3 以降 Sizzele セレクタエンジンが導入
11. Sizzele Sizzele セレクタエンジン セレクタエンジン • 新しいブラウザでは高速なセレクタ API を利用 する。 getElementByClassName() querySelectorAll() • IE7 では使えない Id セレクタを仕様 親要素やタグ名でより具体的に指定
12. セレクタ セレクタ API API • 目的の要素を取得に、ノードを反復処理す る必要がある場合  getElementById() や getElementByTagName() では不十分、非 効率になりがち  querySelectorAll() の方が高速 var elements = document.querySelectorAll('#menu a');
13. セレクタ セレクタ API API • getElementsByTagName()  Html コレクション・・・シャローコピー • querySelectorAll()  NodeList ・・・ディープコピー ・ querySelectorAll() を使わずに同様の処理を行う場合 var elements = document.getElementById('#menu').getElementBy TagName('a');
14. セレクタ セレクタ API API 利用できる各ブラウザのバージョンは IE8 、 Fir efox3.5 、 Safari3.1 、 Chrome1 、 Opera10 document.querySelectorAll() が利用可能か調 べ、可能ならそれを使うことは有益
15. フィルタ フィルタ • :first ・・・最初に選択された要素 • :last ・・・最後に選択された要素 • :even ・・・偶数要素 • :odd ・・・奇数要素 • :eq(n) ・・・インデックス (n) • :lt(n) ・・・インデックスが n より小さい要素 • :gt(n) ・・・インデックスが n より大き要素
16. フィルタ フィルタ • 元になるコレクションが指定されない場合  ドキュメント内のすべての要素を意味するも のを前提とする jquery('*:even');
17. カスタムフィルタセレクタ カスタムフィルタセレクタ • Jquery のセレクタ式は jQuery.expr[':'] オブ ジェクトに基づいて拡張できる。 • Sizzle.selector.filters のエイリアス。 jQuery.expr[':'].newFilter = function(elem, index, match){ return true; };
18. カスタムフィルタセレクタ カスタムフィルタセレクタ 例 ) インラインで表示される全ての要素とマッ チ jQuery.expr[':'].inline = function(elem) { return jQuery(elem).css('display') === 'inline'; }; // 例 1 jQuery('div a:inline').css('color', 'red'); // 例 2 jQuery('span').filter(':not(:inline)').css('color', 'blue')
19. カスタムフィルタセレクタ カスタムフィルタセレクタ • 新しいセレクタをいくつか同時に追加する場 合 jQuery.extend(jQuery.expr[':'], { newFilter1 : function(elem, index, match){ // Return true or false. }, newFilter2 : function(elem, index, match){ // Return true or false. }, newFilter3 : function(elem, index, match){ // Return true or false. } });
20. 次回 次回 • 続、 jQuery クックブック  アニメーション