使用 jQuery 打造互動性網頁動畫效果

0 seconds of 1 minute, 27 secondsVolume 0%

00:00

01:27

六角學院

使用 jQuery 打造互動性網頁動畫效果

儘管你沒有 JavaScript 基礎也適合上這門課，為網頁添加具互動性的網頁動畫效果！

Hahow AI 學習升級

87 k 的人也在觀看

4.8

(27)

關於課程

課程包含

包含 10 章 61 單元、1 項作業

課程時長

5 時 50 分鐘

課程總人數

300 位同學

觀看限制

不限觀看次數，還會附贈完課證書

學習升級

Hahow AI 學習助教

無需額外付費

即時問答、重點整理、測驗理解，讓知識派上用場

課程內容

學習途徑第二步，路徑由 HTML/CSS 進入 jQuery，接著延伸至 RWD 與 Bootstrap；JavaScript、Vue、Git / Gulp 列為後續學習方向。

跨出前端學習途徑的第二步！

學習 jQuery 將會是我們在學會 HTML/CSS 網頁基本排版的第二步驟，恭喜我們又在學習地圖上前進了一步呢！

如果你已經學會 HTML/CSS 了，接下來應該學習哪些技術來豐富自己的網頁呢？
在這堂課程中，將交給你打造互動性網頁動畫效果的最佳利器 - jQuery，就算沒有 JavaScript 基礎也沒有關係，帶著你用更便捷的方式為網頁添加更多特色！

標題為「什麼是 jQuery ?」的頁首橫幅，以深綠色背景搭配薄荷綠幾何色塊、星光圖示與網格線裝飾，呈現簡潔的科技風格。

瀏覽器視窗中央呈現 jQuery 標誌與英文標語「write less, do more.」，背景以藍、灰、粉紅及橘紅色幾何色塊構成。

沒有 JavaScript 基礎也適合，為網頁添加具互動性的動畫效果！

作為網頁開發的新手，你可能常常聽到別人在談論 JavaScript，那 jQuery 又是什麼呢？

我們可以把 jQuery 想像是一個更快速、簡易、具瀏覽器兼容性的「Javascript 語法函式庫」。在這一套函式庫中，撰寫了很多 Javascript 的函數功能，除了能夠讓程式碼包裝的更漂亮之外，也能夠以更便捷的方式執行動畫效果，不用擔心瀏覽器相容性的問題，是一個可以讓開發者可以更輕鬆的上手製作網站功能。

用更少的程式碼經驗，漂亮地完成更多的功能！

如果你在程式碼中看到 $ 的符號，便代表此程式碼為 jQuery 的框架，而非 Javascript 的原始代碼，但是兩者程式碼寫出來的操作效果是一樣的喔！

jQuery 與 JavaScript 程式碼對照：jQuery 以 $(document).ready(function(){ $("#house").搖動(); }); 執行搖動；JavaScript 則透過 document.getElementById("house") 取得元素，再呼叫搖動() 函式。

你是否有注意到上述 jQuery 的程式碼比下面 JavaScript 的程式碼簡便很多呢？
這便是學習 jQuery 框架的魅力之一喔！

「課程核心特色」白色標題置於深綠色幾何橫幅中央，左側有薄荷綠色塊與星芒圖案，右側以斜向網格點綴。

目前有 9 成以上的網頁動畫皆是使用 JavaScript 設計出來的，其中 jQuery 更是拿來設計動畫的主流之一。
除了能夠讓初學者運用更便捷的放出操作網頁效果外，挑選他作為教材的優點有以下三項：

1. 所有瀏覽器皆適用：不為不同瀏覽器的相容性煩惱！

許多開發者想用 Javascript 設計動畫效果時，不知道該如何設計出兼容所有瀏覽器的程式碼，導致出來的效果時常會有 bug。jQuery 則是由許多開發者共同維護，因將不同瀏覽器的兼容性納入設計考量，利用它來寫動畫效果比較不會出問題喔！

2. 簡單易懂：就算你不懂 JavaScript 也能夠簡單入門

jQuery 好懂到，就算你不用 JavaScript，也可以只看他的文件來設計動畫效果，但是建議同學們不要以為 jQuery 是魔術喔！它還是必須得透過 HTML、CSS 才有辦法操作。因此在課程中，老師將會延續更多 HTML、CSS 的知識，交付給你更多進階技巧，讓大家能夠更輕鬆使用 jQuery。

3. 事半功倍：整合不同資源，讓自己的程式碼更豐富！

因 jQuery 為許多開發者共同維護的框架，已經有許多開發者為了 jQuery 設計各式各樣的動畫資源。除了讓你釐清觀念外，這堂課程也會教你如何去整合別人與自己的程式碼。讓你不會因為網路載入太多動畫效果而不知道該如何妥善管理！

「學生好評推薦」收錄四則學員回饋：讚賞老師講解清楚、教法淺顯易懂且搭配圖形說明，並表示課程內容豐富完整，透過 jQuery、Bootstrap 練習與 RWD 邏輯學習，能快速上手並掌握實用觀念。

「誰適合這門課？」白色大字置於深綠色橫幅中央，左側有薄荷綠幾何色塊與線條，右側以斜向網格和星芒圖案作為裝飾。

誰適合這樣課程？

想要了解 WEB UI 究竟該如何設計網頁動畫效果的學生
想要設計出超棒的網頁使用者體驗的學生
除了基本 jQuery 技巧，還想學會更多應用的學生基本條件

我將從這堂課程學到什麼？

能夠掌握如何在網頁上設計互動性網頁動畫效果
有辦法輕易整合別人寫好的第三方動畫插件，並套用在自己的網頁上
有能力評估別人的網站究竟是用了哪些插件來設計網頁動畫效果
當 jQuery 程式碼變多時，也能夠有條理地進行維護整理

上課前的注意事項

因這是學習途徑的第二步，如果你還沒有上過以 HTML、CSS 語言為主的第一堂課程，請同學門先確保自己是否已具備以下條件來評估這堂課程適不適合你喔！

具有基本的 HTML + CSS 觀念
本課程使用 Sublime Text 3 網頁編輯器進行教學

擔心自己不具備以上條件嗎？看看六角系列課程中更基礎的課程：

第一堂課程 | 使用 HTML、CSS 開發一個網站

「課程章節規劃」標題置於深綠色橫幅中央，搭配薄荷綠幾何色塊、星星圖示與右側網格線條作為段落裝飾。

從講解基本觀念和學習資源開始，帶你輕鬆入門

課程將從所有你需要具備的基礎知識，從觀念開始學習，讓你更懂得分辨 JavaScript 和 jQuery 的差異、jQuery 的環境設定、初探各種 jQuery 能夠做到的功能。

在章節 3 中，老師更是會帶著你找到 jQuery 辭典資源，讓你能夠輕鬆查詢不同的功能之外，也讓你有機會開始撰寫網頁設計的互動效果！

jQuery Quick API Reference 速查表，依序整理 Attributes/CSS、Manipulation、Traversing 與 Events，涵蓋屬性、DOM 操作、篩選遍歷、表單及滑鼠與鍵盤事件等常用 API。

章節 1 | 課前說明

章節 2 | jQuery 入門

章節 3 | 選擇器與事件：開始讓你的網頁具有互動性吧！

教授給你關鍵的動畫效果語法，幫助你的網頁加入更多動態元素！

在老師將透過四大章節教授給你所有 jQuery 必備的語法技巧，從簡單的滑動效果、淡入淡出效果開始，到更進階的 CSS + jQuery 語法搭配，帶著你更好的掌握並應用各類語法，在動畫操作上也會讓你的網頁動態更精緻、多元。老師除了將所有必備技巧都讓你知道外，課程中也會一步步帶著你看到語法的撰寫架構，讓你能夠比照老師的教學步驟，自行實踐與驗證，測試看看自己是否也能夠獨立做出和老師相同的動態視覺喔！

瀏覽器預覽黑色、橘色與粉紅色區塊，右側 JavaScript 程式以 $(document).ready() 綁定 .open 點擊事件，使用 jQuery 的 slideDown() 依序顯示 .box1、.box2 與 .box3。

章節 4 | 看看還有哪些動畫效果可以使用

章節 5 | 教你如何搭配 CSS + jQuery 各式各樣的動畫效果

章節 6 | 教你如何操控網頁元素

章節 7 | jQuery 常用小技巧

提供給你更多資源，讓你掌握更多技法！

老師在這一章節中將會介紹各種第三方的 plug-in，讓你能夠做出更多不同的動畫效果，例如圖片燈箱效果和輪播的效果。除了會教授你使用第三方 plug-in 需要注意的細節之外，還會教你試著將不同的動畫效果整合在一個網頁中。

Lightbox2「Getting started」教學畫面，說明下載 lightbox2-master.zip、使用 Bower 或 NPM 安裝 lightbox2，並將 CSS 與 JavaScript 檔案加入網頁。

章節 8  | 第三方 plug-in

章節 9  | 開始喜歡 jQuery了嗎？教你如何更精進！

章節 10 | 最後，你還可以往哪些方向去精進

當你更理解 jQuery 的語言後，老師將會帶給你更多的資源，包括 jQuery 和 CSS 樣式抽離的心法、提供更多元的教學資源與內容！

「課程作業設計」白色標題置於深綠色橫幅中央，左側有薄荷綠幾何色塊與星形裝飾，右側以斜向網格圖案收尾。

【最終試煉任務】使用 jQuery 打造互動性網頁動畫效果

當你完成所有課程內容後，六角團隊將賦予你一個更大規模的實作任務，考驗你是否有完整學會這門課程的要領！

作業詳細說明與指引、設計稿以及圖片檔皆可以在「第 9 章：作業 1 - 最終作業講解」的頁面中找到。
作業需結合 jQuery 套件，來練習完成任務條件內列出的功能：

功能 1 |  Lightbox 燈箱

功能 2 | 下拉式選單功能

功能 3 |  wiper Banner 輪播

功能 4 |  Scroll to top 效果

在完成這堂課程的最終試煉任務後，你將獲得以下兩個重要技能！

jQuery 套件整合應用
使用 jQuery 實作動畫效果

要如何承接任務，並讓六角助教團隊批改我的作業呢？

步驟 1 | 註冊「程式勇者村」帳號
「程式勇者村平台」為六角專為學員設計的學習輔助平台，如果還沒有註冊過該平台帳號，在繳交作業之前記得先註冊專屬自己的「程式勇者村」帳號喔！

步驟 2 | 登入「程式勇者村」帳號，承接專為課程設計的【最終試煉】任務
登入程式勇者村後，可以回到 Hahow 課程中的「第 9 章開始喜歡 jQuery了嗎？教你如何更精進！」，在此章節中的「作業 1 - 最終作業講解」會提供更詳細的指引與專屬作業的檔案喔！

步驟  3 |  回報任務
完成作業後，可以在課程任務連結中的「回報任務」的留言系統，提交希望給助教檢視的任務內容，六角助教在完成批改後，將提供專屬回饋，確保你理解課程內容。 你還可以在同一頁面中的「任務對話欄」和助教討論繳交的內容喔！

⚠️   繳交作業的注意事項 
提交作業檔時，請使用 Google Drive、Dropbox、GitHub Repo 任一來提供網頁壓縮檔，還請記得開啟公開權限，六角助教才能進行下載流程。傳送作業前，可先開 Chrome 無痕視窗，觀察是否能提供下載，確保六角助教能夠進行下載作業批改，才能夠提供給你回饋喔！

作業批改與問題答覆頻率

建議同學一定要完成承接任務，完成本課程的最終試煉喔！
唯有透過實作的當下，才真正明白自己是否完整領會、吸收。如果作業太難也歡迎將遇到的困難與問題紀錄下來，向六角助教們發問、求救喔！

回覆問題：六角助教會以每週二次的頻率上來回覆大家的問題喔！同學們如果有疑問歡迎留言發問，等待助教的解答喔！

批改作業：六角助教會以每週一次的頻率上來批改大家的作業，建議一定要繳交作業才可以得到助教的回饋，幫助你進步喔！

❗️ 如時間有更動請參照 Hahow 公告為主喔！

「講師與六角學院」標題置於深綠色幾何橫幅中央，搭配薄荷綠六角形、星星圖示與網格線條裝飾，呈現講師與六角學院的主題視覺。

六角學院的校長：廖洧杰

高雄前端社群發起人
中華電信前端講師
高雄大學前端講師
十年實務經驗，授課時數超過一千小時

熱愛分享與交流的前端工程師，目前專注於兼容桌面/移動網頁前端開發，期間已協助數百位平面設計師，網頁設計師導入標準網頁設計。

關於六角學院

六角學院是一所線上程式開發學習單位，目前已累積超過 20,000 名學員，讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是，如果您贊同我們的理念，歡迎加入六角。

綠色幾何風格橫幅，以星芒與網格線裝飾，中央呈現「Hahow x 六角」字樣。

什麼是「合作優選」的課程？

「合作優選課程」為 Hahow 向外探尋、精心挑選進來的優質課程，讓渴望深度學習的你，在 Hahow 擁有更多選擇！

價格保證

「合作優選課程」讓你放心！只要你可以在其他網站以更低的價格購買到相同課程，我們將協助全額退費，詳細說明請參考相關政策。

哪些人適合這堂課？

想要了解 WEB UI 究竟該如何設計網頁動畫效果的學生想要設計出超棒的網頁使用者體驗的學生除了基本 jQuery 技巧，還想學會更多應用的學生

你可以學到

► 能夠掌握如何在網頁上設計互動性網頁動畫效果 ► 有辦法輕易整合別人寫好的第三方動畫插件，並套用在自己的網頁上 ► 有能力評估別人的網站究竟是用了哪些插件來設計網頁動畫效果 ► 當 jQuery 程式碼變多時，也能夠有條理地進行維護整理

上課前的準備

需要準備的工具 / 軟體（若購買課程前不清楚版本是否支援，請先留言與老師確認。）

具有基本的 HTML + CSS 觀念本課程使用 Sublime Text 3 網頁編輯器進行教學

需要具備的背景知識

在學習這堂課之前，建議同學至少具備 CSS 與 HTML 基礎，舉例來講至少必須了解以下語法的用途 CSS： .box { color: red; } 其中也會建議至少知道以下 CSS 語法用途 transition、background、color、display、overflow HTML： <ul> <li class="box">這是一段話</li> </ul> 了解這兩者標籤用途 <script></script> <style></style>

單元一覽

10 章 61 單元｜總時長 350 分鐘

全部展開

課前說明

單元 1 - 課前說明