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
38k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
13k
中途セールス職_会社説明資料
livesense
PRO
0
270
EM候補者向け転職会議説明資料
livesense
PRO
0
130
Other Decks in Technology
See All in Technology
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
390
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
KotlinConf 2025_イベントレポート
sony
1
130
ガチな登山用デバイスからこんにちは
halka
1
240
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
820
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
400
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
480
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
330
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Thoughts on Productivity
jonyablonski
70
4.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
A designer walks into a library…
pauljervisheath
207
24k
Visualization
eitanlees
148
16k
How to Ace a Technical Interview
jacobian
279
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
RailsConf 2023
tenderlove
30
1.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Balancing Empowerment & Direction
lara
3
620
4 Signs Your Business is Dying
shpigford
184
22k
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 クックブックから ...