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

儘管你/妳沒有 JavaScript 基礎也適合上這門課,為網頁添加具互動性的網頁動畫效果!
4.8 (100 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
540 students enrolled
$45
Take This Course
  • Lectures 67
  • Length 7 hours
  • Skill Level Beginner Level
  • Languages Traditional Chinese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2016 Traditional Chinese

Course Description

你/妳好,我們是六角學院!

如果你沒有 JavaScript 基礎,但又想要快點為網頁上添增動畫效果,
那麼 jQuery 是你的最佳選擇!

我們在課堂期間提供的服務有:

  1. 無限期、無限次數地觀看線上教學影片
  2. 隨時可提問的 udemy 發問社群
  3. 每週三晚上七點半都會舉辦線上問答會,讓學生們提問網頁技術上的問題
  4. 提供二次檢視網頁程式碼

若想看我們提供的其他服務與課程,
歡迎 Google 關鍵字搜尋「六角學院」搜尋我們的粉絲頁,
瀏覽更多有關於我們的訊息!

What are the requirements?

  • 本課程使用 Sublime Text 3 網頁編輯器進行教學

What am I going to get from this course?

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

What is the target audience?

  • 想要了解 WEB UI 究竟該如何設計網頁動畫效果的學生
  • 想要設計出超棒的網頁使用者體驗的學生
  • 不適合完全不懂 HTML、CSS 的學生

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: jQuery 入門
JavaScript 與 jQuery 傻傻分不清楚? 讓我們來教你!
Preview
07:20
六角學院線上問答會資訊
Article
初探 jQuery 強大之處(練習流程)
Article
初探 jQuery 強大之處
Preview
12:47
下載jQuery檔案,介紹1.x與2.x的差別
06:21
設定 jQuery 環境好簡單
11:35
jQuery 環境建置範例程式碼
Article
小叮嚀(win熱鍵提醒):使用 Sublime 插件提升寫 jQuery 效率
Article
使用 Sublime 插件提升寫 jQuery 效率
Preview
07:11
第一章測驗
2 questions
Section 2: 選擇器與事件:開始讓你的網頁具有互動性吧!
選擇器:設定 CSS 般指定要操控的網頁元素
06:23
選擇器範例程式碼
Article
輕鬆撰寫第一個網頁設計互動效果
07:56
點擊事件範例程式碼
Article
使用 toggle 切換開啟或隱藏效果
04:53
教你如何除錯 jQuery
08:02
jquery 辭典 - 輕鬆查詢功能一把抓
Preview
03:36
第二章測驗
3 questions
Section 3: 看看還有哪些動畫效果可以使用
使用 Fade 設計淡入淡出效果
05:29
使用 Slide 設計滑動效果
09:57
都不喜歡?那使用 toggleClass、搭配 CSS3 Transition 自訂 CSS 效果吧!
08:41
設定 CSS 動畫小密技:overflow、CSS3 transition
08:46
jquery 鏈式寫法
04:45
善用 chrome 內建開發工具,提升撰寫 jQuery 效率
Preview
05:00
第三章測驗
3 questions
Section 4: 教你如何搭配 CSS + jQuery 各式各樣的動畫效果
使用 preventDefault() 取消默認行為
07:31
preventDefault 程式碼範例
Article
css() - 教你如何動態載入 CSS style 設定
04:05
設計下拉式收闔選單
11:00
delay() - 延遲動畫效果的好用語法
Preview
08:04
即時放大縮小字型好簡單
06:47
fixed 固定網頁內容
06:01
使用 stop() 讓你的動畫效果更滑順
04:45
設定offcanvas左右選單切換
08:31
Animate.css - 載入第三方插件 - 增添網頁動畫豐富度
07:23
第四章測驗
2 questions
Section 5: 教你如何操控網頁元素
this - 教你如何操作本身元素
05:33
parent() - 找到父階層元素
Preview
07:42
siblings() - 同層元素
08:01
find () - 輕鬆找到子元素內容
04:00
設計 QA折疊選單
10:10
二階層式折疊選單設計
06:34
使用 html()、text() 載入內容
04:48
click()、on() 的差別
07:18
click與on的範例程式碼
Article
總結回顧
03:30
第五章測驗
3 questions
Section 6: jQuery 常用小技巧
attr() - 動態增加 HTML 標籤屬性
09:04
remove() - 移除網頁標籤小工具
08:44
top 滑動效果
04:57
使用 fontAwesome 動態加入連結 icon
Preview
10:11
第六章測驗
1 question
Section 7: 第三方Pugin
使用第三方plugin需要注意的細節
06:33
Lightbox 2 - 圖片燈箱效果 (上)
16:05
Lightbox 2 - 圖片燈箱效果 (下)
09:53
Nivo Slider - 圖片輪播效果 (上)
06:48
Nivo Slider - 圖片輪播效果 (下)
17:31
將上面的效果試著整合在一個網頁中吧!
05:08
Peity - 無痛設計網頁圖表資訊
07:06
parallax - 輕鬆製作滾動視差效果
09:25
教你如何管理多個 jQuery Plugin
Preview
06:29
如何去查詢別人使用的 jQuery 插件
Preview
05:44
Section 8: jQuery UI
jQuery UI 教學事前須知
Article
jQuery UI 簡介
08:28
datepicker - 設計日曆效果 (上)
16:48
datepicker - 設計日曆效果 (下)
06:41
tabs - 頁籤效果
Preview
09:26
Section 9: 開始喜歡 jQuery了嗎?教你如何更精進!
將 jQ 與 CSS 樣式抽離心法
Preview
03:25
各種國內外 jQuery教學資源、線上試題
04:04
最終作業講解
03:24
作業細節
Article
Section 10: 最後,你還可以往哪些方向去精進
網頁關鍵字速記表
Article
如何從網路上找到適合自己的學習教材
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

廖洧杰 liao, 前端工程師

你好,我是六角學院的校長,洧杰,

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

同時我也是高雄前端社群創辦人,於2013年3月31日創立社群,每月固定舉辦前端主題聚會,至今已舉辦超過30場聚會,不重複參與人數破千位,2015年協助14位平面設計師、網頁工程師轉職為前端工程師。同時也是國立高雄大學資管前端兼任講師、業界講師。

Instructor Biography

王志誠 Wang, 前端設計師、前端工程師

大家好,我是王志誠 (Casper),是由設計師轉為前端工程師,專長是視覺設計與前端整合、前端技術教育訓練、前端自動化,常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。

目前是高雄前端社群的核心成員,高雄前端社群除了會有中型的交流會、Workshop以外,我還會舉辦 CSS 讀書會(每月1~2次),如果對 前端、CSS 有興趣,歡迎追蹤 FB / 高雄前端社群,將可以看到我們的活動。

Instructor Biography

一次付費,終身複習 
隨著時代更新的線上數位教材
透過國際知名 Udemy 線上教育平台 
我們致力於優化程式教育的流程

Instructor Biography

包子 林, 前端實習生

Ready to start learning?
Take This Course