最新討論
基礎課程
建議學習 3 週(每週 2 小時)
課程共 109 小節55 影片 ( 3.1
小時 )54 測驗
提供完訓證書
提供制定學習計畫什麼是學習計畫？課程目標
在熟悉了 HTML、CSS 之後，覺得自己與自己的作品網站：
- 不知道還可以對網頁做什麼優化？
- 只會以靜態死版的方式呈現！總想增加一些動態互動效果？
- 動態效果一旦跨瀏覽器就容易出錯！
- 不知道可以學習什麼技術來增進網頁開發的能力？
想要成為前端工程師
光學會 HTML、CSS 是不夠的，除了 Javascript 之外，想要快速增加網頁的互動性，jQuery 可以簡單的讓你的網頁「活」起來！
jQuery
是一個快速、簡易、具瀏覽器兼容性的「Javascript 語法函式庫」。在函式庫中，囊括了許多 Javascript 的函數功能，可以讓你的程式碼寫起來更漂亮簡潔，還能以更便捷的方式執行動畫效果，並且不用擔心瀏覽器相容性的問題，是一個可以讓開發者可以更輕鬆的上手製作網站功能的工具。
輕鬆駕馭
雖然 jQuery 能夠簡單地透過官方文件就能夠學習，但在這門線上課程中，我們將會延續更多 HTML、CSS 的知識，交付給你更多進階技巧，加上大量的實作案例，靠著每一行每一個步驟完整的概念解說，就是要讓大家能夠在學完這門課程後能輕鬆地駕馭 jQuery。
✓ 用更精簡的程式碼達成效果：Javascript 需要使用三行程式碼，jQuey 只要一行程式碼。
＃就算不懂 JavaScript 也能夠簡單入門
＃延續 HTML、CSS 概念知識並學會進階技巧
＃用更少的程式碼完成互動式網頁
＃不再為不同瀏覽器的相容性煩惱！
課程介紹
| 3-1 | 取得內容、屬性 |
| 4-1 | 認識 name、id、class |
| 10-1 | 事件的介紹與綁定寫法 |
從基本的滑動、淡入淡出效果開始，到進階的 CSS + jQuery 語法搭配，帶著你更好的掌握並應用各類語法，在動畫操作上也會讓你的網頁動態更精緻、多元。這門課將會把所有 jQuery 必備技巧都教給你，課程中也會一步步帶著你看到語法的撰寫架構，只要跟著影片中的教學步驟，一定可以做出屬於自己的網頁功能與效果唷！
✦ 核心一、掌握基礎語法與學習資源
1. 學會 jQuery 的基礎語法
✓ 取得內容與屬性、更新屬性、取代內容、移除元素、新增元素
2. 學會查詢 jQuery 官方文件
✓ 查找 jQuery 辭典資源，輕鬆查詢不同功能說明與範例。
3. 學會 jQuery 選擇器的用法
✓ 認識 name、id、class、屬性與符號、:first-child、:last-child
▲ 不只釣魚（實作教學）給你吃，還要教會你怎麼釣魚（自學能力）。
✦ 核心二、操控網頁元素
1. 學會取得與更新 HTML 元素的內容
2. 學會動態新增及更新 HTML 元素
3. 學會在 DOM tree 間遊走以轉換選擇元素
✓ 更改 DOM 中元件的內容和外觀。例如選擇任一元件修改其 CSS 樣式、定位、內容文本、圖像等。
4. 學會操作及修改 CSS 樣式5. 學會 HTML 表單的操作技巧
✓ 創建一個快速反饋表單。例如在提交表單之前通知使用者輸入格式不正確，在將資料發送到伺服器之前，使用 jQuery 執行驗證檢查。
✦ 核心三、事件處理
｜學會監聽與操作 HTML 元素的各種事件
✓ 處理用戶輸入事件，包括鼠標點擊和鍵盤輸入。例如使用鍵盤輸入創建一個使用箭頭鍵移動的簡單小遊戲。
✦ 核心四、製作效果/動畫
｜學會使用 jQuery 來製作動畫的效果
✓ 使用 jQuery 的動畫工具使你的網站變得生動，並強化你的設計元素，對使用者的行為與輸入有響應的能力。例如將元件加入淡入淡出效果，或是針對子選單中的所選元件產生出滑動與突顯的效果。
✦ 核心五、更多技巧
｜學會自製與使用第三方 plugin
✓ 認識基本套件寫法並使用 jQuery 製作套件與熟悉套用別人寫好的套件。例如使用別人寫好的套件將輸入完成的文字進行反轉顯示。
｜實作「待辦事項」功能
小試身手第六步：加上重要性的星號
▲ 基本介面 ⤑ 新增待辦 ⤑ 新增移除 ⤑ 加入更新 ⤑ 拖曳排序 ⤑ 加入星號
從「不會動態網頁設計」到「懂得製作互動式網頁」再到「掌握效果和動畫的呈現」是我們教學不變的核心！
✎ 互動式網頁課程人氣講師
此次我們特地邀請到「制服地圖」的創辦人 紅色死神 / 江舜智老師，專案經歷豐富且獲獎無數的江舜智老師，同時也是 TibaMe 養成就業班學員一致認同，屢屢獲高評點、高滿意度的人氣老師，老師這次將會運用執行各式專案的豐富實例，融合至這次的線上課程中，對動態網頁有興趣的你不要再錯過啦！
最完整的知識體系
這門課程仰賴 TibaMe 多年廣受好評且開班不斷的就業養成班體系「Web/APP 前端設計工程師養成班」所產出的以就業為出發點且在完訓後能為業界公司所用的最完整的知識內容，在課程製作前便已先行依照多位業界專家與授課講師（專業面）協同資深的教學設計師（教學面）一同規劃的「課程地圖」進行教學課綱的擬定與討論，在課程教材與影片上也已經過層層審核，不會出現像坊間線上課程沒有完整的知識架構，著重面不夠全面或是單元間的銜接度不足的尷尬狀況。
最豐富的培訓經驗
TibaMe 有著傳承中壢資策會多年的培訓基因，加上 TibaMe 雲端科技培訓團隊近 5 年的雲端科技導入。並且有著多年來累積的堅強教學師資，在知識與科技上的跟進從來不會一成不變，我們相信一門專業領域知識很難在一、兩堂線上課程完整呈現與詮釋，但只要透過有步驟、有技巧的學習方式就能有效確保學員只要有心想學就可以有所收穫！
最有效的學習成果
- 學習目標｜完成這門課程，讓你學會課程實作的知識及技能，每支課程影片都會有明確的學習目標，讓學員能完全掌握每支課程影片的教學目的與內容，可讓你將課程中的知識及技能實際應用在你的工作或專案上。
- 學習計劃｜我們設計的學習計畫，可以結合 Google 日曆，學員可以依照系統建議設定的學習週期與時數，也可以依照個人學習步調安排學習的時間，以逐步完成這門課的學習，系統會主動提醒學習時段。
- 碎片學習｜我們將課程教學影片每個知識點設計在 10 分鐘以內，利於學習者運用零碎時間學習，也方便使用電腦、平版或手機等跨裝置的學習。
- 學習檢核｜每個單元章節都會有形成性評量測驗，透過 QUIZ 練習讓你清楚知道自己的學習狀況，知道哪些內容學的好，那些內容需要加強。
- 學習履歷｜學員能夠透過學習履歷了解自我學習的歷程、足跡與習慣，進而掌握自己的能力的圖。此外，我們還會提供完課學員「學習證明」讓學員的努力更可以被看見並增加履歷的豐富度。
- 複習便利｜因有著每支課程影片（知識點）的學習目標與精簡的教學影片，在用作複習時也更容易進行快速搜索，找出想要重複觀看的教學內容，不會有在查找一支影片時需花費大量時間觀看且不易找出所需教學內容的問題。
- 職涯增能｜課程規劃以職場實際需求的知識和技能為目標，針對業界各職位所需的技能設計一步步引導的教學方式，讓你容易學會課程內容，也同時學會在職場上應用的知識及技能。
這門課程作為整個「成為前端工程師系列」的其中一門課，除了提供程式碼讓學員便於練習，還會在課堂中提供網頁互動效果與動畫製作的實作技巧，以現有常用實際的功能案例進行演示，並且每個章節都有測驗練習。全部內容包含了「 18 個章節、 55 支共 3.1 小時教學影片、54 個測驗評量與 1 份「 jQuery 入門密技」學習講義。結合其他系列課程的基礎，讓你一步一步成為前端工程師，準備好了嗎？我們將一同陪你紮好馬步讓你一步一步成為前端工程師。
⚑ 18 章節
⚑ 55 教學影片
⚑ 3.1 小時教學時數
⚑ 54 評量
⚑ 1 份「 jQuery 入門密技」學習講義
誰適合學習這門課程呢？
1. 我是網頁開發的新手，想要進一步獲得打造互動式網頁的能力
2. 我有網頁開發（HTML、CSS）基礎的能力，想要更增進網頁開發中動態技術的能力
3. 我是 UI/UX 設計師，想要往前端工程師領域發展
學習前需要有什麼基本能力呢？
｜具備 HTML 和 CSS 的基本知識與能力
｜熟悉 JavaScript 或其他程式語言也會在學習上有幫助唷！如果你是想從頭開始學習 jQuery，或者想加快 Jvascript 的開發速度，那麼這門課程也會對你來說很有用唷！
學習前需要準備什麼呢？
基礎課程建議學習 3 週(每週 2 小時)課程共 109 小節55 影片 ( 3.1
小時 )54 測驗提供完訓證書提供制定學習計畫什麼是學習計畫？
紅色死神 / 江舜智
經歷｜
▹ 制服地圖 / 創辦人
▹ 天氣風險管理開發 / 視覺動畫師
▹ 資策會 / 工程師
▹ 髮弄資訊 / CDO
▹ TibaMe、資策會、飛肯設計學苑、台北市公訓處、中國科技大學等單位 / 講師
▹ 資拓宏宇、公共電視台、玉山銀行等企業內訓 / 講師
重要專案經驗｜
▹ La new 活力熊 / 吉祥物繪製與經營
▹ 環保署減碳代言人 / 減碳雙熊設計
▹ 氣象局影音氣象
▹ 國科會雲端硬碟 COSA 計畫
▹ 資策會去識別化系統
▹ 公視 2020 總統大選即時開票網站
▹ 文策院「台湾漫画夜市」活動網站
▹ 公視新聞網 / 改版
▹ Gogoro 內部系統
▹ 勞保局系統 / 改版
▹ 電視節目《我要當女一》/ 官網架設
▹ 統一企業、桃園市政府、udn、三立電視台、三星等知名企業 / 活動網站架設
▹ 許多中小企業 / 官網架設
獲獎｜
▹ Nokia Widget 兩岸三地比賽 / 首獎
▹ 第八屆黃金企鵝獎應用程式組 / 優勝、網路人氣獎
▹ 2010 Android 使用者介面設計比賽 / 特別獎
▹ 文策院「台湾漫画夜市」活動網站 CSSDesignAwards / Special Kudos
專長｜
▹ CSS
▹ jQuery, Vue.js / javascript
▹ CodeIgniter, WordPress / PHP
▹ SEO
▹ 網站規劃與架設
課程大綱
- 1. jQuery 簡介
開發工具簡介
03:54
QUIZ：開發工具簡介
共1題
jQuery 是什麼？
04:37
QUIZ： jQuery 是什麼？
共1題
jQuery 官網的 API 文件使用
02:06
QUIZ： jQuery 官網的 API 文件使用
共1題
- 2.jQuery 安裝
手動下載安裝
01:57
QUIZ：手動下載安裝
共1題
使用 CDN 方式安裝
00:55
QUIZ：使用 CDN 方式安裝
共1題
在 CodePen 上使用 jQuery
01:42
QUIZ：在 CodePen 上使用 jQuery
共1題
- 3.試試看：基本語法
取得內容、屬性
06:15
QUIZ：取得內容、屬性
共1題
更新屬性、取代內容
04:32
QUIZ：更新屬性、取代內容
共1題
移除元素、新增元素
10:21
QUIZ：移除元素、新增元素
共1題
- 4.選擇器（Selectors）
認識 name、id、class
05:45
QUIZ：認識 name、id、class
共1題
屬性與符號的理解
00:36
QUIZ：屬性與符號的理解
共1題
其它常用語法，例： :first-child、:last-child
07:05
QUIZ：其它常用語法，例： :first-child、:last-child
共1題
- 5.篩選器（Filters）函式
.first()、.last()、.eq()
01:44
QUIZ：.first()、.last()、.eq()
共1題
.slice()、.has()
02:21
QUIZ：.slice()、.has()
共1題
.filter()、.not()
04:20
QUIZ：.filter()、.not()
共1題
- 6.巡訪（Traversing）函式
.prev()、.next()
04:30
QUIZ：.prev()、.next()
共1題
.siblings()、.parent()、.parents()
03:20
QUIZ：.siblings()、.parent()、.parents()
共1題
.children()、.find()
05:34
QUIZ：.children()、.find()
共1題
- 7.操控文件物件模型（DOM）- Part1
DOM 介紹
02:12
QUIZ：DOM 介紹
共1題
屬性的操控
02:34
QUIZ：屬性的操控
共1題
樣式的操控
04:34
QUIZ：樣式的操控
共1題
- 8.操控文件物件模型（DOM）- Part2
表單相關的操控(上)
09:53
表單相關的操控(下)
04:47
QUIZ：表單相關的操控
共2題
文字的操控
02:04
QUIZ：文字的操控
共1題
HTML5 data 屬性的操控
03:26
QUIZ：HTML5 data 屬性的操控
共1題
- 9.操控文件物件模型（DOM）- Part3
html 標籤的操控
02:41
QUIZ：html 標籤的操控
共1題
取得元素的位置座標
03:32
QUIZ：取得元素的位置座標
共1題
複製元素
01:19
QUIZ：複製元素
共1題
- 10.事件監聽（Event Handling）- Part1
事件的介紹與綁定寫法
03:40
QUIZ：事件的介紹與綁定寫法
共1題
認識 DOMContentLoaded 與 load 事件
02:31
QUIZ：認識 DOMContentLoaded 與 load 事件
共1題
認識事件物件（Event Object）
02:45
QUIZ：認識事件物件（Event Object）
共1題
- 11.事件監聽（Event Handling）- Part2
事件觸發寫法及注意事項，例：事件冒泡狀況
02:51
QUIZ：事件觸發寫法及注意事項，例：事件冒泡狀況
共1題
關於動態事件的綁定
03:49
QUIZ：關於動態事件的綁定
共1題
事件的觸發與解除綁定
07:22
QUIZ：事件的觸發與解除綁定
共1題
- 12.動畫效果 - Part1
.hide() 與 .show()
03:02
QUIZ：.hide() 與 .show()
共1題
.fadeIn()、.fadeOut()、.fadeToggle()
01:45
QUIZ：.fadeIn()、.fadeOut()、.fadeToggle()
共1題
.slideUp()、slideDown()、.slideToggle()
01:28
QUIZ：.slideUp()、slideDown()、.slideToggle()
共1題
- 13.動畫效果 - Part2
.animate() 中的 CSS 設定與時間設定
02:45
QUIZ：.animate() 中的 CSS 設定與時間設定
共1題
.animate() 中的 Easing 與 complete 參數
04:01
QUIZ：.animate() 中的 Easing 與 complete 參數
共1題
.delay() 與 .stop() 函式
03:40
QUIZ：.delay() 與 .stop() 函式
共1題
- 14.實用函式 - Part1
判斷陣列：$.isArray()
00:59
QUIZ：判斷陣列：$.isArray()
共1題
判斷是否有該值：$.inArray()
01:09
QUIZ：判斷是否有該值：$.inArray()
共1題
陣列的合併：$.merge()
01:07
QUIZ：陣列的合併：$.merge()
共1題
- 15.實用函式 - Part2
陣列的合併與取代：$.extend()
01:37
QUIZ：陣列的合併與取代：$.extend()
共1題
執行陣列、物件迴圈：$.each()
02:41
QUIZ：執行陣列、物件迴圈：$.each()
共1題
執行陣列、物件迴圈，產生新的陣列或物件：$.map()
02:31
QUIZ：執行陣列、物件迴圈，產生新的陣列或物件：$.map()
共1題
- 16.簡易 jQuery 套件介紹
基本套件寫法
02:31
QUIZ：基本套件寫法
共1題
寫一個文字反轉套件
02:11
QUIZ：寫一個文字反轉套件
共1題
套用別人寫好的 plugin
03:25
QUIZ：套用別人寫好的 plugin
共1題
- 17.實作：待辦事項 - Part1
第一步：基本介面及 text 欄位事件
02:16
QUIZ：第一步：基本介面及 text 欄位事件
共1題
第二步：新增待辦事項
05:03
QUIZ：第二步：新增待辦事項
共1題
第三步：移除與清空
04:03
QUIZ：第三步：移除與清空
共1題
- 18.實作：待辦事項 - Part2
第四步：更新待辦事項
04:27
QUIZ：第四步：更新待辦事項
共1題
第五步：排序
03:35
QUIZ：第五步：排序
共1題
第六步：重要性的星號
01:39
QUIZ：第六步：重要性的星號
共1題
課程附件
購買此課程後，才能使用留言功能
目前尚無任何討論主題
成為第一個發問的人！在問答中找到學習的捷徑。