jQueryクックブック #TechLunch

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

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 クックブックから ...