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

jQuery Basic

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

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
300
Design Voice-First Games for Alexa
Avatar for Ryan Chung ryan403
0
52
AI Teaching Talk
Avatar for Ryan Chung ryan403
0
110
Cognitive Service
Avatar for Ryan Chung ryan403
0
93
jQuery & API Practices
Avatar for Ryan Chung ryan403
0
130
CSS Practices
Avatar for Ryan Chung ryan403
1
150
JavaScript Practices
Avatar for Ryan Chung ryan403
0
96
Web Programming - Lesson 6
Avatar for Ryan Chung ryan403
1
610
Web Programming - Lesson 7
Avatar for Ryan Chung ryan403
1
620

Other Decks in Programming

See All in Programming
"使いづらい" をリバースエンジニアリングする UI の読み解き方
Avatar for 株式会社Rebase_エンジニアリング rebase_engineering
0
120
型安全なDrag and Dropの設計を考える
Avatar for yudppp yudppp
5
690
TSConfigからTypeScriptの世界を覗く
Avatar for らいと planck16
2
1.3k
FastMCPでMCPサーバー/クライアントを構築してみる
Avatar for ttnyt8701 ttnyt8701
2
110
Proxmoxをまとめて管理できる コンソール作ってみました
Avatar for karugamo karugamo
1
440
実践ArchUnit ～実例による検証パターンの紹介～
Avatar for 荻原利雄 ogiwarat
1
160
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
Avatar for kasacchiful kasacchiful
0
290
Blueskyのプラグインを作ってみた
Avatar for Hakkadaikon hakkadaikon
1
350
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
Avatar for Taiyu Yoshizawa nekoya3
0
330
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
Avatar for TAKASE Kazuyuki guvalif
1
240
PT AI без купюр
Avatar for Vladimir Kochetkov v0lka
0
210
単体テストの始め方/作り方
Avatar for toms toms74209200
0
300

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
19
1.3k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6.1k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
42
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
6
630
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
76
5.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
760

Transcript

  1. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 jQuery Basic Ryan Chung

    1

  2. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 課程大綱 • 簡介 (jQuery是什麼

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

  3. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 簡介 • JavaScript Library

    • 簡化JavaScript程式碼 3

  4. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 主要功能 • HTML/DOM 存取

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

  5. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 如何使用 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 – Ryan@MobileDev.TW 行動開發學院 行動開發學院 文法結構 • $(selector).action() 選擇對象(找到誰)

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

  7. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 避免jQuery存取到還沒載入的元件 7

  8. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 選擇器 selector • element

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

  9. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 常見事件偵測 • click、dblclick $("p").click(

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

  10. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 效果 • hide() 隱藏

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

  11. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Lab.按按鈕看詳細介紹 按按鈕可以顯示詳細介紹 再按一下可以隱藏詳細介紹 11

  12. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 index.html 12

  13. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 main.js 13

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

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

  15. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Lab.滑鼠移到誰，就顯示誰的名字 15

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

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

  17. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 index.html 17

  18. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 main.js 18

  19. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 index() 19

  20. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 animate() 動畫 • 改變元件的屬性

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

  21. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Lab.瑪莉兄弟闖關 • 按下鍵盤右鍵，移動瑪莉兄弟闖關 21

  22. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 index.html 22

  23. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 style.css 23

  24. jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 main.js 24