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

jQuery Basic

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
320
Design Voice-First Games for Alexa
Avatar for Ryan Chung ryan403
0
75
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
150
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
650
Web Programming - Lesson 7
Avatar for Ryan Chung ryan403
1
650

Other Decks in Programming

See All in Programming
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
250
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
680
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
170
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
6k
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
220
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
150
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6k
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
640

Featured

See All Featured
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
63
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
77
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
3.9k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
490

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