Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQueryクックブック #TechLunch

jQueryクックブック #TechLunch

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

E60aa4f80303f3f386898546ddb3686a?s=128

Livesense Inc.
PRO

April 23, 2014
Tweet

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