自動播放
自動完成
上一堂課程
完成並繼續課程
1648454
[大學生實習培育計畫專用] 使用 jQuery 打造互動性網頁動畫效果
六角學院線上資源
課程最終任務說明
Apple M1 觀看公告
jQuery 入門
JavaScript 與 jQuery 傻傻分不清楚？ 讓我們來教你！ (7:20)
初探 jQuery 強大之處(練習流程)
初探 jQuery 強大之處 (12:47)
下載jQuery檔案，介紹1.x與2.x的差別 (6:21)
下載jQuery檔案，介紹1.x與2.x的差別-課程補充
設定 jQuery 環境好簡單 (11:35)
jQuery 環境建置範例程式碼
jQuery Codepen 環境建立(無聲音版) (1:13)
第一章測驗
選擇器與事件：開始讓你的網頁具有互動性吧！
選擇器：設定 CSS 般指定要操控的網頁元素 (6:23)
選擇器範例程式碼
輕鬆撰寫第一個網頁設計互動效果 (7:56)
點擊事件範例程式碼
使用 toggle 切換開啟或隱藏效果 (4:53)
教你如何除錯 jQuery (8:02)
教你如何除錯 jQuery-課程補充
jQuery 辭典 - 輕鬆查詢功能一把抓 (3:36)
第二章測驗
看看還有哪些動畫效果可以使用
使用 Slide 設計滑動效果 (9:57)
使用 Fade 設計淡入淡出效果 (5:29)
都不喜歡？那使用 toggleClass、搭配 CSS3 Transition 自訂 CSS 效果吧！ (8:41)
設定 CSS 動畫小密技：overflow、CSS3 transition (8:46)
jQuery 鏈式寫法 (4:45)
善用 Chrome 內建開發工具，提升撰寫 jQuery 效率 (5:00)
第三章測驗
教你如何搭配 CSS + jQuery 各式各樣的動畫效果
使用 preventDefault() 取消默認行為 (7:31)
preventDefault 程式碼範例
css() - 教你如何動態載入 CSS style 設定 (4:05)
設計下拉式收闔選單 (11:00)
delay() - 延遲動畫效果的好用語法 (8:04)
即時放大縮小字型好簡單 (6:47)
fixed 固定網頁內容 (6:01)
使用 stop() 讓你的動畫效果更滑順 (4:45)
設定offcanvas左右選單切換 (8:31)
Animate.css 更新說明
Animate.css - 載入第三方插件 - 增添網頁動畫豐富度 (7:23)
第四章測驗
教你如何操控網頁元素
this - 教你如何操作本身元素 (5:33)
parent() - 找到父階層元素 (7:42)
siblings() - 同層元素 (8:01)
find () - 輕鬆找到子元素內容 (4:00)
設計 QA折疊選單 (10:10)
二階層式折疊選單設計 (6:34)
使用 html()、text() 載入內容 (4:48)
click()、on() 的差別 (7:18)
click與on的範例程式碼
總結回顧 (3:30)
第五章測驗
jQuery 常用小技巧
attr() - 動態增加 HTML 標籤屬性 (9:04)
remove() - 移除網頁標籤小工具 (8:44)
top 滑動效果 (4:57)
使用 fontAwesome 動態加入連結 icon (10:11)
使用 fontAwesome 動態加入連結 icon-課程補充
第六章測驗
第三方Plugin
使用第三方plugin需要注意的細節 (6:33)
使用第三方plugin需要注意的細節-課程補充
Lightbox 2 - 圖片燈箱效果 (上) (16:05)
Lightbox 2 - 圖片燈箱效果 (上)-課程補充
Lightbox 2 - 圖片燈箱效果 (下) (9:53)
Swiper - 輪播效果 (上) (11:05)
Swiper - 輪播效果 (上)-課程補充
Swiper - 輪播效果 (中) (13:24)
Swiper - 輪播效果 (下) (3:22)
Swiper - 補充備註 (1:57)
將上面的效果試著整合在一個網頁中吧！ (5:57)
如何去查詢別人使用的 jQuery 插件 (5:44)
開始喜歡 jQuery了嗎？教你如何更精進！
最終作業講解 (2:14)
最後，你還可以往哪些方向去精進
網頁關鍵字速記表
如何從網路上找到適合自己的學習教材
JavaScript 與 jQuery 傻傻分不清楚？ 讓我們來教你！
課程內容未解鎖
如果您已經購買此課程，
請您重新登入後再查看
.
購買本課程