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
51
株式会社リブセンス・転職会議 採用候補者様向け資料
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
Witchcraft for Memory
pocke
1
580
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
660
フィンテック養成勉強会#54
finengine
0
180
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
980
A2Aのクライアントを自作する
rynsuke
1
220
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
190
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
380
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
480
Wasm元年
askua
0
160
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.8k
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
310
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Done Done
chrislema
184
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Thoughts on Productivity
jonyablonski
69
4.7k
Building Adaptive Systems
keathley
43
2.6k
Statistics for Hackers
jakevdp
799
220k
Visualization
eitanlees
146
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
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 クックブックから ...