jQueryクックブック #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 クックブック  アニメーション