成為前端工程師|jQuery 入門密技,愉快打造互動式網頁不求人

成為前端工程師|jQuery 入門密技,愉快打造互動式網頁不求人

軟體開發 - 網頁開發
基礎
3.1 小時
4,334
NT$1,180

在這門 jQuery 課程中,將從基本的滑動、淡入淡出效果開始,到進階的 CSS + jQuery 語法搭配,帶著你更好的掌握並應用各類語法,在動畫操作上也會讓你的網頁動態更精緻、多元。加上大量的實作案例,就是要讓大家能夠在學完這門課程後能輕鬆地使用 jQuery,做出屬於自己的網頁功能與效果!

目前尚無任何課程公告
講師將會在這發佈與課程相關的公告或是通知課程內容更新的公告。

最新討論

modal沒有跳出來?
劉百合 · 2022/08/01 16:19
請問$t.text(),後面用",newText"賦空值用意為何?
劉百合 · 2022/07/29 11:13
請問那些css屬性不能發揮效果?
劉百合 · 2022/07/26 16:51
jQuery 入門密技課程程式碼.zip下載,內容是空的
Rambo Yang · 2021/02/15 18:08
查看更多討論
default label基礎課程
default clock建議學習 3 週(每週 2 小時)
default video課程共 109 小節55 影片 ( 3.1 小時 )54 測驗
icon_info_certificate提供完訓證書
default plan提供制定學習計畫什麼是學習計畫?

課程目標



在熟悉了 HTML、CSS 之後,覺得自己與自己的作品網站:

  1. 不知道還可以對網頁做什麼優化?
  2. 只會以靜態死版的方式呈現!總想增加一些動態互動效果?
  3. 動態效果一旦跨瀏覽器就容易出錯!
  4. 不知道可以學習什麼技術來增進網頁開發的能力?



想要成為前端工程師
光學會 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 製作套件與熟悉套用別人寫好的套件。例如使用別人寫好的套件將輸入完成的文字進行反轉顯示。

|實作「待辦事項」功能

✓ 小試身手第一步:完成基本介面及 text 欄位
    小試身手第二步:新增待辦事項
    小試身手第三步:移除與清空
    小試身手第四步:更新待辦事項
    小試身手第五步:進行排序
    小試身手第六步:加上重要性的星號
   

▲ 基本介面 ⤑ 新增待辦 ⤑ 新增移除 ⤑ 加入更新 ⤑ 拖曳排序 ⤑ 加入星號


從「不會動態網頁設計」到「懂得製作互動式網頁」再到「掌握效果和動畫的呈現」是我們教學不變的核心!



互動式網頁課程人氣講師

此次我們特地邀請到「制服地圖」的創辦人 紅色死神 / 江舜智老師,專案經歷豐富且獲獎無數的江舜智老師,同時也是 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 的開發速度,那麼這門課程也會對你來說很有用唷!

學習前需要準備什麼呢?

確認上述基本能力與一台筆記型電腦或桌上型電腦以利進行線上學習唷!

default label基礎課程
default clock建議學習 3 週(每週 2 小時)
default video課程共 109 小節55 影片 ( 3.1 小時 )54 測驗
icon_info_certificate提供完訓證書
default plan提供制定學習計畫什麼是學習計畫?
關於講師

講師|
紅色死神 / 江舜智

經歷|
▹ 制服地圖 / 創辦人
▹ 天氣風險管理開發 / 視覺動畫師
▹ 資策會 / 工程師
▹ 髮弄資訊 / 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 簡介
  • video common icon

    開發工具簡介


    03:54
    quiz common icon

    QUIZ:開發工具簡介


    共1題
    video common icon

    jQuery 是什麼?


    04:37
    quiz common icon

    QUIZ: jQuery 是什麼?


    共1題
    video common icon

    jQuery 官網的 API 文件使用


    02:06
    quiz common icon

    QUIZ: jQuery 官網的 API 文件使用


    共1題
  • 2.jQuery 安裝
  • video common icon

    手動下載安裝


    01:57
    quiz common icon

    QUIZ:手動下載安裝


    共1題
    video common icon

    使用 CDN 方式安裝


    00:55
    quiz common icon

    QUIZ:使用 CDN 方式安裝


    共1題
    video common icon

    在 CodePen 上使用 jQuery


    01:42
    quiz common icon

    QUIZ:在 CodePen 上使用 jQuery


    共1題
  • 3.試試看:基本語法
  • video common icon

    取得內容、屬性


    06:15
    quiz common icon

    QUIZ:取得內容、屬性


    共1題
    video common icon

    更新屬性、取代內容


    04:32
    quiz common icon

    QUIZ:更新屬性、取代內容


    共1題
    video common icon

    移除元素、新增元素


    10:21
    quiz common icon

    QUIZ:移除元素、新增元素


    共1題
  • 4.選擇器(Selectors)
  • video common icon

    認識 name、id、class


    05:45
    quiz common icon

    QUIZ:認識 name、id、class


    共1題
    video common icon

    屬性與符號的理解


    00:36
    quiz common icon

    QUIZ:屬性與符號的理解


    共1題
    video common icon

    其它常用語法,例: :first-child、:last-child


    07:05
    quiz common icon

    QUIZ:其它常用語法,例: :first-child、:last-child


    共1題
  • 5.篩選器(Filters)函式
  • video common icon

    .first()、.last()、.eq()


    01:44
    quiz common icon

    QUIZ:.first()、.last()、.eq()


    共1題
    video common icon

    .slice()、.has()


    02:21
    quiz common icon

    QUIZ:.slice()、.has()


    共1題
    video common icon

    .filter()、.not()


    04:20
    quiz common icon

    QUIZ:.filter()、.not()


    共1題
  • 6.巡訪(Traversing)函式
  • video common icon

    .prev()、.next()


    04:30
    quiz common icon

    QUIZ:.prev()、.next()


    共1題
    video common icon

    .siblings()、.parent()、.parents()


    03:20
    quiz common icon

    QUIZ:.siblings()、.parent()、.parents()


    共1題
    video common icon

    .children()、.find()


    05:34
    quiz common icon

    QUIZ:.children()、.find()


    共1題
  • 7.操控文件物件模型(DOM)- Part1
  • video common icon

    DOM 介紹


    02:12
    quiz common icon

    QUIZ:DOM 介紹


    共1題
    video common icon

    屬性的操控


    02:34
    quiz common icon

    QUIZ:屬性的操控


    共1題
    video common icon

    樣式的操控


    04:34
    quiz common icon

    QUIZ:樣式的操控


    共1題
  • 8.操控文件物件模型(DOM)- Part2
  • video common icon

    表單相關的操控(上)


    09:53
    video common icon

    表單相關的操控(下)


    04:47
    quiz common icon

    QUIZ:表單相關的操控


    共2題
    video common icon

    文字的操控


    02:04
    quiz common icon

    QUIZ:文字的操控


    共1題
    video common icon

    HTML5 data 屬性的操控


    03:26
    quiz common icon

    QUIZ:HTML5 data 屬性的操控


    共1題
  • 9.操控文件物件模型(DOM)- Part3
  • video common icon

    html 標籤的操控


    02:41
    quiz common icon

    QUIZ:html 標籤的操控


    共1題
    video common icon

    取得元素的位置座標


    03:32
    quiz common icon

    QUIZ:取得元素的位置座標


    共1題
    video common icon

    複製元素


    01:19
    quiz common icon

    QUIZ:複製元素


    共1題
  • 10.事件監聽(Event Handling)- Part1
  • video common icon

    事件的介紹與綁定寫法


    03:40
    quiz common icon

    QUIZ:事件的介紹與綁定寫法


    共1題
    video common icon

    認識 DOMContentLoaded 與 load 事件


    02:31
    quiz common icon

    QUIZ:認識 DOMContentLoaded 與 load 事件


    共1題
    video common icon

    認識事件物件(Event Object)


    02:45
    quiz common icon

    QUIZ:認識事件物件(Event Object)


    共1題
  • 11.事件監聽(Event Handling)- Part2
  • video common icon

    事件觸發寫法及注意事項,例:事件冒泡狀況


    02:51
    quiz common icon

    QUIZ:事件觸發寫法及注意事項,例:事件冒泡狀況


    共1題
    video common icon

    關於動態事件的綁定


    03:49
    quiz common icon

    QUIZ:關於動態事件的綁定


    共1題
    video common icon

    事件的觸發與解除綁定


    07:22
    quiz common icon

    QUIZ:事件的觸發與解除綁定


    共1題
  • 12.動畫效果 - Part1
  • video common icon

    .hide() 與 .show()


    03:02
    quiz common icon

    QUIZ:.hide() 與 .show()


    共1題
    video common icon

    .fadeIn()、.fadeOut()、.fadeToggle()


    01:45
    quiz common icon

    QUIZ:.fadeIn()、.fadeOut()、.fadeToggle()


    共1題
    video common icon

    .slideUp()、slideDown()、.slideToggle()


    01:28
    quiz common icon

    QUIZ:.slideUp()、slideDown()、.slideToggle()


    共1題
  • 13.動畫效果 - Part2
  • video common icon

    .animate() 中的 CSS 設定與時間設定


    02:45
    quiz common icon

    QUIZ:.animate() 中的 CSS 設定與時間設定


    共1題
    video common icon

    .animate() 中的 Easing 與 complete 參數


    04:01
    quiz common icon

    QUIZ:.animate() 中的 Easing 與 complete 參數


    共1題
    video common icon

    .delay() 與 .stop() 函式


    03:40
    quiz common icon

    QUIZ:.delay() 與 .stop() 函式


    共1題
  • 14.實用函式 - Part1
  • video common icon

    判斷陣列:$.isArray()


    00:59
    quiz common icon

    QUIZ:判斷陣列:$.isArray()


    共1題
    video common icon

    判斷是否有該值:$.inArray()


    01:09
    quiz common icon

    QUIZ:判斷是否有該值:$.inArray()


    共1題
    video common icon

    陣列的合併:$.merge()


    01:07
    quiz common icon

    QUIZ:陣列的合併:$.merge()


    共1題
  • 15.實用函式 - Part2
  • video common icon

    陣列的合併與取代:$.extend()


    01:37
    quiz common icon

    QUIZ:陣列的合併與取代:$.extend()


    共1題
    video common icon

    執行陣列、物件迴圈:$.each()


    02:41
    quiz common icon

    QUIZ:執行陣列、物件迴圈:$.each()


    共1題
    video common icon

    執行陣列、物件迴圈,產生新的陣列或物件:$.map()


    02:31
    quiz common icon

    QUIZ:執行陣列、物件迴圈,產生新的陣列或物件:$.map()


    共1題
  • 16.簡易 jQuery 套件介紹
  • video common icon

    基本套件寫法


    02:31
    quiz common icon

    QUIZ:基本套件寫法


    共1題
    video common icon

    寫一個文字反轉套件


    02:11
    quiz common icon

    QUIZ:寫一個文字反轉套件


    共1題
    video common icon

    套用別人寫好的 plugin


    03:25
    quiz common icon

    QUIZ:套用別人寫好的 plugin


    共1題
  • 17.實作:待辦事項 - Part1
  • video common icon

    第一步:基本介面及 text 欄位事件


    02:16
    quiz common icon

    QUIZ:第一步:基本介面及 text 欄位事件


    共1題
    video common icon

    第二步:新增待辦事項


    05:03
    quiz common icon

    QUIZ:第二步:新增待辦事項


    共1題
    video common icon

    第三步:移除與清空


    04:03
    quiz common icon

    QUIZ:第三步:移除與清空


    共1題
  • 18.實作:待辦事項 - Part2
  • video common icon

    第四步:更新待辦事項


    04:27
    quiz common icon

    QUIZ:第四步:更新待辦事項


    共1題
    video common icon

    第五步:排序


    03:35
    quiz common icon

    QUIZ:第五步:排序


    共1題
    video common icon

    第六步:重要性的星號


    01:39
    quiz common icon

    QUIZ:第六步:重要性的星號


    共1題

課程附件


file-icon
jQuery 入門密技課程講義.pdf
98.51 MB
stage arrow to bottom
file-icon
jQuery 入門密技課程程式碼.zip
169.70 KB
stage arrow to bottom

購買此課程後,才能使用留言功能

沒有回應的問題

目前尚無任何討論主題

成為第一個發問的人!在問答中找到學習的捷徑。
立即加入成為Line官方好友
become line friend
返回主選單
課程類型
影音課程
直播課程
實體課程
返回主選單
返回主選單
返回主選單