Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery Basic

Avatar for Ryan Chung Ryan Chung
March 14, 2020
Programming
240
0

jQuery Basic

Avatar for Ryan Chung

Ryan Chung

March 14, 2020

More Decks by Ryan Chung

See All by Ryan Chung
MovieBot Development
Avatar for Ryan Chung ryan403
0
330
Design Voice-First Games for Alexa
Avatar for Ryan Chung ryan403
0
90
AI Teaching Talk
Avatar for Ryan Chung ryan403
0
150
Cognitive Service
Avatar for Ryan Chung ryan403
0
120
jQuery & API Practices
Avatar for Ryan Chung ryan403
0
160
CSS Practices
Avatar for Ryan Chung ryan403
1
180
JavaScript Practices
Avatar for Ryan Chung ryan403
0
110
Web Programming - Lesson 6
Avatar for Ryan Chung ryan403
1
670
Web Programming - Lesson 7
Avatar for Ryan Chung ryan403
1
670

Other Decks in Programming

See All in Programming
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
140
仕様駆動開発の消費期限
Avatar for watany watany
18
7.6k
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
180
What's New in Android 2026
Avatar for Veronikapj veronikapj
0
250
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
240
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.4k
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
120
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
0
220
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
500
Built Our Own Background Agent at LayerX
Avatar for LayerX layerx
PRO
9
5.1k
作るコストが小さくなった時代 幸せに働くために改めて考えたいこと 〜エンジニアとして価値を出し続けるために注視している二分野〜
Avatar for YuppeEng yuppeeng
0
200
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
540

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
200
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
330
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
440
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.4k

Transcript

  1. jQuery Basic – [email protected] 行動開發學院 行動開發學院 jQuery Basic Ryan Chung

    1

  2. jQuery Basic – [email protected] 行動開發學院 行動開發學院 課程大綱 • 簡介 (jQuery是什麼

    / 目的 / 主要功能) • 開始使用 (如何下載 / 放在哪裡) • 文法結構 (識別符/選擇器/動作) • 選擇器與事件 – Lab : 按按鈕看詳細介紹 • HTML與CSS操作 – Lab : 畫面特效應用 – Lab : 滑過照片秀名子 – Lab : 馬利兄弟闖關 • 元件巡訪 • jQuery AJAX 應用 • 綜合範例 2

  3. jQuery Basic – [email protected] 行動開發學院 行動開發學院 簡介 • JavaScript Library

    • 簡化JavaScript程式碼 3

  4. jQuery Basic – [email protected] 行動開發學院 行動開發學院 主要功能 • HTML/DOM 存取

    • CSS 使用 • HTML事件方法 • 特效與動畫 • AJAX • 其他工具 4

  5. jQuery Basic – [email protected] 行動開發學院 行動開發學院 如何使用 1. 在官網找到最新版本下載 https://code.jquery.com/jquery-X.X.X.min.js

    2. 在<head></head>中插入 <script src="jquery-X.X.X.min.js"></script> 5

  6. jQuery Basic – [email protected] 行動開發學院 行動開發學院 文法結構 • $(selector).action() 選擇對象(找到誰)

    . 進行動作(做什麼) • 例如： $(this).hide() 把目前這個元件藏起來 $("p").hide() 把所有段落藏起來 $(".test").hide() 把所有類別為test的元件藏起來 $("#test").hide() 把所有id為test的元件藏起來 6

  7. jQuery Basic – [email protected] 行動開發學院 行動開發學院 避免jQuery存取到還沒載入的元件 7

  8. jQuery Basic – [email protected] 行動開發學院 行動開發學院 選擇器 selector • element

    selector $("p")、$("button") • #id selector $("#test") • .class selector $(".test") 8

  9. jQuery Basic – [email protected] 行動開發學院 行動開發學院 常見事件偵測 • click、dblclick $("p").click(

    function(){ // action goes here!! }); • ready • mouseenter,mouseleave,mousedown,mous eup • hover = mouseenter+mouseleave • focus, blur 9

  10. jQuery Basic – [email protected] 行動開發學院 行動開發學院 效果 • hide() 隱藏

    • show() 顯示 • toggle() 切換隱藏或顯示 • fadeIn() 淡入 • fadeOut() 淡出 • fadeToggle() 切換淡入與淡出 • fadeTo() 改變透明度 • slideDown() 下拉顯示 • slideUp() 上拉隱藏 • slideToggle() • animate() 動畫 10

  11. jQuery Basic – [email protected] 行動開發學院 行動開發學院 Lab.按按鈕看詳細介紹 按按鈕可以顯示詳細介紹 再按一下可以隱藏詳細介紹 11

  12. jQuery Basic – [email protected] 行動開發學院 行動開發學院 index.html 12

  13. jQuery Basic – [email protected] 行動開發學院 行動開發學院 main.js 13

  14. jQuery Basic – [email protected] 行動開發學院 行動開發學院 Lab.顯示/隱藏 ->各種特效 1. 請試著修改顯示/隱藏的範例，變成淡入淡出特效

    • fadeToggle() 2. 請試著修改顯示/隱藏的範例，變成下拉上收特效 • slideToggle() 3. 請測試帶有參數的顯示效果 14

  15. jQuery Basic – [email protected] 行動開發學院 行動開發學院 Lab.滑鼠移到誰，就顯示誰的名字 15

  16. jQuery Basic – [email protected] 行動開發學院 行動開發學院 滑鼠移到誰，就顯示誰的名字 • 用陣列儲存每一個人的名字 •

    當網頁元件準備好時 • 當滑鼠移至圖片上面時 • hover吃兩個參數 • 進入範圍 • 取得是第幾張圖片，對應取得人名 • 利用text()，改變段落中的文字 • 離開範圍 • 清空文字 16

  17. jQuery Basic – [email protected] 行動開發學院 行動開發學院 index.html 17

  18. jQuery Basic – [email protected] 行動開發學院 行動開發學院 main.js 18

  19. jQuery Basic – [email protected] 行動開發學院 行動開發學院 index() 19

  20. jQuery Basic – [email protected] 行動開發學院 行動開發學院 animate() 動畫 • 改變元件的屬性

    • 位置 • 透明度 • 大小(寬度、高度) • 各種CSS樣式 20

  21. jQuery Basic – [email protected] 行動開發學院 行動開發學院 Lab.瑪莉兄弟闖關 • 按下鍵盤右鍵，移動瑪莉兄弟闖關 21

  22. jQuery Basic – [email protected] 行動開發學院 行動開發學院 index.html 22

  23. jQuery Basic – [email protected] 行動開發學院 行動開發學院 style.css 23

  24. jQuery Basic – [email protected] 行動開發學院 行動開發學院 main.js 24