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

jQueryクックブック #TechLunch

jQueryクックブック #TechLunch

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

E60aa4f80303f3f386898546ddb3686a?s=128

Livesense Inc.
PRO

April 23, 2014
Tweet

Transcript

  1. jQuery クックブック Yoshihiro shimada

  2. page 2 jQuery の原理 「少ないコードで多くのことを行う」 3 つの概念 要素を検索し、それらを使って何かを行う 要素セットで複数の jQuery

    メソッドを連鎖 させる jQuery ラッパーを使って暗黙的にやり取り する
  3. page 3 要素を検索し、それらを使って何かを行う DOM で要素を検索し、その要素を使って何か を行う。 例 ) <div> を非表示にし、非表示にした

    <div> に新しい テキストコンテンツを読み込み、選択した <div> の 属性を変更し、最後に <div> を再び置き換える。
  4. page 4 jQuery('div').hide(); jQuery('div').text('new content'); jQuery('div').addClass("updatedContent"); jQuery('div').show();

  5. page 5 連鎖 ( チェイン ) jQuery のメソッドは連鎖させることができる。

  6. page 6 jQuery('div').hide().text('newcontent').addClass ("updatedContent").show(); jQuery メソッドの適用前に選択されていた要素を 常に返すことで、連鎖を継続できる。 連鎖により処理の負荷も軽減される。

  7. page 7 jQuery のラッパーセット jQuery の機能でラップされた要素セット DOM 要素が 1 つ含まれることもあれば、複数また

    は全く含まれないこともある。 jQuery がサポートしているメソッド / プロパティは、空 のラッパーセットで呼び出されても何も言わずに失敗 する。→無駄な if 文を避けるのに役立つ 暗黙の繰り返し( jQuery メソッドがラッパーセットの DOM 要素毎に実行されること)。
  8. page 8 jQuery('div').hide().text('newcontent').addClass ("updatedContent").show(); プログラムにループはないが、 jQuery が <div> 要素をラッパーセットに追加し、暗黙の繰り返しを している。

  9. page 9 $$('div').each(function(div){ div.show(); }); Prototype.js の場合 $$('div').invoke('show'); $$('div').each(Element.show);

  10. page 10 要素の表示について 例えば、 HTML ソースコード中に次のような要素が存 在したと場合。 <p id="example">example</p> この要素を非表示の状態に切り換える場合、例えば

    次のような記述をすることになります。
  11. page 11 document.getElementById('example').style.display = 'none'; •通常 • jQuery $('#example').hide(); •

    Prototype.js $('example').hide();
  12. page 12 show() について hide() とは逆に非表示の要素を表示させる show() と いうメソッドもそれぞれ存在する。 これらのメソッドは

    CSS の display プロパティを操作 する。 要素が実際に見えるかどうかの判別は display だけ か?
  13. page 13 visibility プロパティ 位置 透明度 overflow 制御 厳密に調べる場合には、これら全てについてコンテナ の連鎖をたどって再帰的に調べる必要がある。

    → 効率的ではない。多くのライブラリは display プロ パティのみをチェックしている。
  14. page 14 #example{ display:none; } 先述の HTML に次のような CSS を適用。

    • jQuery $('#example').show(); $('example').show(); • Prototype.js
  15. page 15 CSS の display プロパティをインラインの「 style= 属 性」の形でセットする必要がある。 外観をコンテンツの中に紛れ込ませているので関心

    の分離に反するまずいやり方だが、現時点では必要 悪。
  16. page 16 制限を設けている理由 クロスブラウザ インラインで指定しない限り、クロスブラウザでプロパ ティの指定された値を確実に取得する方法がないた め。 アクセシビリティ JavaScript が無効な環境においてこの要素を見るこ

    とができなくなってしまう。
  17. page 17 $('example').setStyle('display:block'); Prototype.js で表示させる場合。

  18. page 18 次回 続、 jQuery クックブックから ...