Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
jQuery Basic
Search
Ryan Chung
March 14, 2020
Programming
0
190
jQuery Basic
Ryan Chung
March 14, 2020
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
300
Design Voice-First Games for Alexa
ryan403
0
52
AI Teaching Talk
ryan403
0
110
Cognitive Service
ryan403
0
93
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
150
JavaScript Practices
ryan403
0
96
Web Programming - Lesson 6
ryan403
1
610
Web Programming - Lesson 7
ryan403
1
620
Other Decks in Programming
See All in Programming
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
120
型安全なDrag and Dropの設計を考える
yudppp
5
690
TSConfigからTypeScriptの世界を覗く
planck16
2
1.3k
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
110
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
440
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
1
160
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
290
Blueskyのプラグインを作ってみた
hakkadaikon
1
350
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
330
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
240
PT AI без купюр
v0lka
0
210
単体テストの始め方/作り方
toms74209200
0
300
Featured
See All Featured
A designer walks into a library…
pauljervisheath
205
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
6
630
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
760
Transcript
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 jQuery Basic Ryan Chung
1
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 課程大綱 • 簡介 (jQuery是什麼
/ 目的 / 主要功能) • 開始使用 (如何下載 / 放在哪裡) • 文法結構 (識別符/選擇器/動作) • 選擇器與事件 – Lab : 按按鈕看詳細介紹 • HTML與CSS操作 – Lab : 畫面特效應用 – Lab : 滑過照片秀名子 – Lab : 馬利兄弟闖關 • 元件巡訪 • jQuery AJAX 應用 • 綜合範例 2
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 簡介 • JavaScript Library
• 簡化JavaScript程式碼 3
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 主要功能 • HTML/DOM 存取
• CSS 使用 • HTML事件方法 • 特效與動畫 • AJAX • 其他工具 4
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
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 文法結構 • $(selector).action() 選擇對象(找到誰)
. 進行動作(做什麼) • 例如: $(this).hide() 把目前這個元件藏起來 $("p").hide() 把所有段落藏起來 $(".test").hide() 把所有類別為test的元件藏起來 $("#test").hide() 把所有id為test的元件藏起來 6
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 避免jQuery存取到還沒載入的元件 7
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 選擇器 selector • element
selector $("p")、$("button") • #id selector $("#test") • .class selector $(".test") 8
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
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 效果 • hide() 隱藏
• show() 顯示 • toggle() 切換隱藏或顯示 • fadeIn() 淡入 • fadeOut() 淡出 • fadeToggle() 切換淡入與淡出 • fadeTo() 改變透明度 • slideDown() 下拉顯示 • slideUp() 上拉隱藏 • slideToggle() • animate() 動畫 10
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Lab.按按鈕看詳細介紹 按按鈕可以顯示詳細介紹 再按一下可以隱藏詳細介紹 11
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 index.html 12
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 main.js 13
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Lab.顯示/隱藏 ->各種特效 1. 請試著修改顯示/隱藏的範例,變成淡入淡出特效
• fadeToggle() 2. 請試著修改顯示/隱藏的範例,變成下拉上收特效 • slideToggle() 3. 請測試帶有參數的顯示效果 14
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Lab.滑鼠移到誰,就顯示誰的名字 15
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 滑鼠移到誰,就顯示誰的名字 • 用陣列儲存每一個人的名字 •
當網頁元件準備好時 • 當滑鼠移至圖片上面時 • hover吃兩個參數 • 進入範圍 • 取得是第幾張圖片,對應取得人名 • 利用text(),改變段落中的文字 • 離開範圍 • 清空文字 16
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 index.html 17
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 main.js 18
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 index() 19
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 animate() 動畫 • 改變元件的屬性
• 位置 • 透明度 • 大小(寬度、高度) • 各種CSS樣式 20
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Lab.瑪莉兄弟闖關 • 按下鍵盤右鍵,移動瑪莉兄弟闖關 21
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 index.html 22
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 style.css 23
jQuery Basic – Ryan@MobileDev.TW 行動開發學院 行動開發學院 main.js 24