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
51
AI Teaching Talk
ryan403
0
110
Cognitive Service
ryan403
0
92
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
150
JavaScript Practices
ryan403
0
95
Web Programming - Lesson 6
ryan403
1
610
Web Programming - Lesson 7
ryan403
1
620
Other Decks in Programming
See All in Programming
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
從零到一:搭建你的第一個 Observability 平台
blueswen
0
250
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
400
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
290
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.4k
単体テストの始め方/作り方
toms74209200
0
210
型安全なDrag and Dropの設計を考える
yudppp
5
670
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
130
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
990
衛星の軌道をWeb地図上に表示する
sankichi92
0
260
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
100
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Embracing the Ebb and Flow
colly
85
4.7k
Making Projects Easy
brettharned
116
6.2k
Building Adaptive Systems
keathley
41
2.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualization
eitanlees
146
16k
Designing for Performance
lara
608
69k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
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