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
110
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
64
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
13
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.4k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
390
26新卒_総合職採用_会社説明資料
livesense
PRO
0
8.8k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
27k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
12k
中途セールス職_会社説明資料
livesense
PRO
0
250
EM候補者向け転職会議説明資料
livesense
PRO
0
120
Other Decks in Technology
See All in Technology
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.3k
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
200
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
120
asken AI勉強会(Android)
tadashi_sato
0
110
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
280
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
170
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
660
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why Our Code Smells
bkeepers
PRO
337
57k
Fireside Chat
paigeccino
37
3.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
How to Ace a Technical Interview
jacobian
277
23k
Music & Morning Musume
bryan
46
6.6k
Making Projects Easy
brettharned
116
6.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Language of Interfaces
destraynor
158
25k
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 クックブックから ...