$30 off During Our Annual Pro Sale. View Details »

jQuery Basic

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

jQuery Basic

Avatar for Ryan Chung

Ryan Chung

March 14, 2020
Tweet

More Decks by Ryan Chung

See All by Ryan Chung
MovieBot Development
Avatar for Ryan Chung ryan403
0
310
Design Voice-First Games for Alexa
Avatar for Ryan Chung ryan403
0
71
AI Teaching Talk
Avatar for Ryan Chung ryan403
0
130
Cognitive Service
Avatar for Ryan Chung ryan403
0
110
jQuery & API Practices
Avatar for Ryan Chung ryan403
0
140
CSS Practices
Avatar for Ryan Chung ryan403
1
170
JavaScript Practices
Avatar for Ryan Chung ryan403
0
110
Web Programming - Lesson 6
Avatar for Ryan Chung ryan403
1
630
Web Programming - Lesson 7
Avatar for Ryan Chung ryan403
1
640

Other Decks in Programming

See All in Programming
DevFest Android in Korea 2025 - 개발자 커뮤니티를 통해 얻는 가치
Avatar for Suhyeon Kim wisemuji
0
170
脳の「省エネモード」をデバッグする ～System 1（直感）と System 2（論理）の切り替え～
Avatar for HideyukiKitao panda728
PRO
0
120
re:Invent 2025 トレンドからみる製品開発への AI Agent 活用
Avatar for Kohei Yoshikawa yoskoh
0
430
まだ間に合う！Claude Code元年をふりかえる
Avatar for nogu nogu66
5
900
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
970
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
Avatar for suna-big sunabig
0
170
新卒エンジニアのプルリクエスト with AI駆動
Avatar for Yuta Fukunaga fukunaga2025
0
230
Flutter On-device AI로 완성하는 오프라인 앱, 박제창 @DevFest INCHEON 2025
Avatar for JaiChangPark itsmedreamwalker
1
150
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
120
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
Avatar for Suhyeon Kim wisemuji
0
130
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
Avatar for Philip Schwarz philipschwarz
PRO
0
120
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
390

Featured

See All Featured
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
81
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
260
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
390
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
120
It's Worth the Effort
Avatar for 3n 3n
187
29k
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
27
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
100

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