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

jQuery Basic

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ryan Chung Ryan Chung
March 14, 2020
Programming
230
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
320
Design Voice-First Games for Alexa
Avatar for Ryan Chung ryan403
0
87
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
150
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
660
Web Programming - Lesson 7
Avatar for Ryan Chung ryan403
1
660

Other Decks in Programming

See All in Programming
Old Dog, New Tricks: The Java 25 Reinvention - JNation
Avatar for A N M Bazlur Rahman bazlur_rahman
0
150
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
310
AI駆動開発勉強会 広島支部 第一回勉強会 AI駆動開発概要とワークショップ
Avatar for smz hyt hayatoshimiu
0
450
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
Avatar for r-kagaya rkaga
4
4.7k
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
Avatar for tk3fftk tk3fftk
5
660
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
Avatar for geeawa gawa
12
3.5k
AIとASP.NET Coreで雑Webアプリを作った話
Avatar for Mayuki Sawatari mayuki
0
430
ローカルLLMを使ってB2Bサービスを作っていての学び
Avatar for Hiroshige Umino yaotti
0
150
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
650
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
Avatar for 武田 憲太郎 kentaroutakeda
1
340
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
Avatar for doriven d0riven
0
310
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
4.5k

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
480
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
860
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
190
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
310
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
250

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