Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
jQueryクックブック #TechLunch
Search
Livesense Inc.
PRO
April 23, 2014
Technology
0
120
jQueryクックブック #TechLunch
2011/08/17(水) @ Livesense TechLunch
発表者:島田 喜裕
Livesense Inc.
PRO
April 23, 2014
Tweet
Share
More Decks by Livesense Inc.
See All by Livesense Inc.
27新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
0
2.4k
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
51
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.5k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
440
26新卒_総合職採用_会社説明資料
livesense
PRO
0
11k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
37k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
13k
中途セールス職_会社説明資料
livesense
PRO
0
260
EM候補者向け転職会議説明資料
livesense
PRO
0
130
Other Decks in Technology
See All in Technology
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.6k
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
290
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.5k
データアナリストからアナリティクスエンジニアになった話
hiyokko_data
2
440
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
510
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
440
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
280
Language Update: Java
skrb
2
290
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
470
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
330
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
1
23
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
For a Future-Friendly Web
brad_frost
180
9.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A better future with KSS
kneath
239
17k
Writing Fast Ruby
sferik
628
62k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
jQuery クックブック Yoshihiro shimada
page 2 jQuery の原理 「少ないコードで多くのことを行う」 3 つの概念 要素を検索し、それらを使って何かを行う 要素セットで複数の jQuery
メソッドを連鎖 させる jQuery ラッパーを使って暗黙的にやり取り する
page 3 要素を検索し、それらを使って何かを行う DOM で要素を検索し、その要素を使って何か を行う。 例 ) <div> を非表示にし、非表示にした
<div> に新しい テキストコンテンツを読み込み、選択した <div> の 属性を変更し、最後に <div> を再び置き換える。
page 4 jQuery('div').hide(); jQuery('div').text('new content'); jQuery('div').addClass("updatedContent"); jQuery('div').show();
page 5 連鎖 ( チェイン ) jQuery のメソッドは連鎖させることができる。
page 6 jQuery('div').hide().text('newcontent').addClass ("updatedContent").show(); jQuery メソッドの適用前に選択されていた要素を 常に返すことで、連鎖を継続できる。 連鎖により処理の負荷も軽減される。
page 7 jQuery のラッパーセット jQuery の機能でラップされた要素セット DOM 要素が 1 つ含まれることもあれば、複数また
は全く含まれないこともある。 jQuery がサポートしているメソッド / プロパティは、空 のラッパーセットで呼び出されても何も言わずに失敗 する。→無駄な if 文を避けるのに役立つ 暗黙の繰り返し( jQuery メソッドがラッパーセットの DOM 要素毎に実行されること)。
page 8 jQuery('div').hide().text('newcontent').addClass ("updatedContent").show(); プログラムにループはないが、 jQuery が <div> 要素をラッパーセットに追加し、暗黙の繰り返しを している。
page 9 $$('div').each(function(div){ div.show(); }); Prototype.js の場合 $$('div').invoke('show'); $$('div').each(Element.show);
page 10 要素の表示について 例えば、 HTML ソースコード中に次のような要素が存 在したと場合。 <p id="example">example</p> この要素を非表示の状態に切り換える場合、例えば
次のような記述をすることになります。
page 11 document.getElementById('example').style.display = 'none'; •通常 • jQuery $('#example').hide(); •
Prototype.js $('example').hide();
page 12 show() について hide() とは逆に非表示の要素を表示させる show() と いうメソッドもそれぞれ存在する。 これらのメソッドは
CSS の display プロパティを操作 する。 要素が実際に見えるかどうかの判別は display だけ か?
page 13 visibility プロパティ 位置 透明度 overflow 制御 厳密に調べる場合には、これら全てについてコンテナ の連鎖をたどって再帰的に調べる必要がある。
→ 効率的ではない。多くのライブラリは display プロ パティのみをチェックしている。
page 14 #example{ display:none; } 先述の HTML に次のような CSS を適用。
• jQuery $('#example').show(); $('example').show(); • Prototype.js
page 15 CSS の display プロパティをインラインの「 style= 属 性」の形でセットする必要がある。 外観をコンテンツの中に紛れ込ませているので関心
の分離に反するまずいやり方だが、現時点では必要 悪。
page 16 制限を設けている理由 クロスブラウザ インラインで指定しない限り、クロスブラウザでプロパ ティの指定された値を確実に取得する方法がないた め。 アクセシビリティ JavaScript が無効な環境においてこの要素を見るこ
とができなくなってしまう。
page 17 $('example').setStyle('display:block'); Prototype.js で表示させる場合。
page 18 次回 続、 jQuery クックブックから ...