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_lesson01
Search
kanekenl
October 11, 2017
Programming
0
31
jQuery_lesson01
kanekenl
October 11, 2017
Tweet
Share
More Decks by kanekenl
See All by kanekenl
圭のお別れ会
kanekenl
0
15
弾幕JS.pdf
kanekenl
0
15
エンジニアからみるデザイナーの凄さ
kanekenl
0
340
爆速コーディング〜Sass入門〜
kanekenl
0
100
Other Decks in Programming
See All in Programming
TCA魔法学入門🪄
dazy
0
280
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
Building a Smaller App Binary
kateinoigakukun
2
200
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
OpenTelemetry のサービスという概念について
azukiazusa1
1
390
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
4
880
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Adopting Sorbet at Scale
ufuk
66
8.5k
Agile that works and the tools we love
rasmusluckow
323
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
A Modern Web Designer's Workflow
chriscoyier
689
190k
Scaling GitHub
holman
456
140k
What's new in Ruby 2.0
geeforr
335
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
How GitHub (no longer) Works
holman
301
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Music & Morning Musume
bryan
39
5.5k
Transcript
第1回 jQuery 勉強ձ
ΞδΣϯμ ɾjQueryͷ素晴Β͠͞ ɾ基本的ͳ書͖方 ɾ࣮際ʹ手Λ動͔͢
逆ʹ今日話͞ͳ͍͜ͱ ɾjQueryͷμϝͳͱ͜Ζ ɾ他ͷJSϥΠϒϥϦʹ͍ͭͯ ɾjQueryͷൃ展的ͳ͜ͱ
jQueryͷ素晴Β͠͞
jQueryͷ素晴Β͠͞ ɾJavaScript͕΄Μͷ行Ͱ書͚ͯ͠·͏! ɾJavaScriptʹ比ͯΔ͔ʹΘ͔Γ͍͢。 ɾ勉強ͷ障壁͕少ͳ͍
基本的ͳ書͖方
基本的ͳ書͖方
ʓʓͷʓʓΛͲ͏͢Δ͔ ϙΠϯτ
۩ମྫ
ʓʓͷʓʓΛͲ͏͢Δ͔ ʓʓͷͷ෦
ʓʓͷʓʓΛͲ͏͢Δ͔ ʓʓΛͷ෦
ʓʓͷʓʓΛͲ͏͢Δ͔ Ͳ͏͢Δ͔ͷ෦
GPPͷ$44ΛDPMPSCMVFʹ͢Δ
None
ͨͬͨ͜Ε͚ͩ
早速、DEMOͯ͠Έ·͠ΐ͏
環境準備
ᶃjquery_lesson01ϑΥϧμ作成 ᶄͦͷ中ʹindex.html作成 ᶅjQueryμϯϩʔυͨ͠ͷΛ ϑΥϧμʹ入Ε·͠ΐ͏
μϯϩʔυ
index.htmlͷ雛形
ϒϥβͰ開͖·͠ΐ͏
準備完了
容、 id=“bar”ͷ背景ͷ色Λ 赤色(red)ʹม͑Δ
完成ਤ
DEMO id=“bar”ͷ背景ͷ色Λ 赤色(red)ʹม͑Δ
࣍
id=“foo”ͷ要素ΛΫϦοΫͨ͠Β foo要素Λ削除͢Δ
ɾ.on()ϝιου ϙΠϯτ ɾ.remove()ϝιου
ɾ.on(Πϕϯτ, ʓʓΛ͢Δ) ϙΠϯτ ɾ.remove()要素Λ消͢
ΫϦοΫͨ͠Β ԿΛ͢Δ͔ ͜͜ͰGPPΛࢦ͢
ΫϦοΫͨ͠Β 文字色Λʹ͢Δ
DEMO
͋ͭ·ΔͷίʔσΟϯά規約Ͱ Ͳ͜ʹ書͘͜ͱ͕ 正͍͔͠Θ͔Γ·͔͢?
</head>ͷ直前
͜Εͩͱ要素͕ಡΈࠐ·ΕΔ前ʹ jQueryͷ࣮行͕͞Εͯ͠·͏ͷͰ ͏·͘動͔ͳ͍
jQuery(function($) { ͜͜ʹ書͘ }) 全部要素ΛಡΜͩ後ʹ࣮行͢Δ
None
ಈ͔ͳ͍ͱࢥͬͨΒ ͙͢ʹ σΟϕϩούʔπʔϧˠίϯιʔϧΛݟΔ͜ͱ
·ͱΊ ɾʓʓͷʓʓΛͲ͏͢Δ͔ ɾಈ͔ͳ͔ͬͨΒ·ͣ ίϯιʔϧΛ։͘͜ͱ