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
88
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.
EM候補者向け転職会議説明資料
livesense
PRO
0
6
コロナで失われたノベルティ作成ノウハウを復活させた話
livesense
PRO
0
73
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
360
転職会議でGPT-3を活用した企業口コミ要約機能をリリースした話
livesense
PRO
0
1k
株式会社リブセンス マッハバイト_プレイブック
livesense
PRO
0
410
Tech Award 2021 選出方法
livesense
PRO
0
1k
株式会社リブセンス エンジニアリング組織を支える風土と制度
livesense
PRO
0
530
株式会社リブセンス・マッハバイト 採用候補者様向け資料
livesense
PRO
0
210
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
2k
Other Decks in Technology
See All in Technology
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
220
JAWS-UG Bedrock Claude Night
yamahiro
3
610
Databricks における 『MLOps』
databricksjapan
2
170
MapLibreとAmazon Location Service
dayjournal
1
160
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
220
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
390
Cracking the KubeCon CfP
inductor
2
250
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
JSON攻略法.pdf
miyakemito
8
5.1k
Azureの基本的な権限管理の勉強会
yhana
0
590
Featured
See All Featured
BBQ
matthewcrist
80
8.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Fireside Chat
paigeccino
21
2.6k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Building Your Own Lightsaber
phodgson
99
5.7k
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 クックブックから ...