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

課程資訊 課程大綱 開課單位 常見問答
Loading...
線上課程

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

3491次瀏覽
NT$1,180
優惠現領
85 折
【4/9-5/5限時85折】
課程資訊
本頁面課程內容及活動資訊概由廠商提供,部分內容非屬104服務範疇,會員應遵守之規範悉依 104課程中心會員規約 所載。
上課時間 無限期觀看課程查看更多
上課方式 於開課單位網站兌換後觀看課程
課程內容
課程大綱
展開全部
1 jQuery 簡介
01
開發工具簡介
02
QUIZ:開發工具簡介
03
jQuery 是什麼?
04
QUIZ: jQuery 是什麼?
05
jQuery 官網的 API 文件使用
06
QUIZ: jQuery 官網的 API 文件使用
2 jQuery 安裝
01
手動下載安裝
02
QUIZ:手動下載安裝
03
使用 CDN 方式安裝
04
QUIZ:使用 CDN 方式安裝
05
在 CodePen 上使用 jQuery
06
QUIZ:在 CodePen 上使用 jQuery
3 試試看:基本語法
01
取得內容、屬性
02
QUIZ:取得內容、屬性
03
更新屬性、取代內容
04
QUIZ:更新屬性、取代內容
05
移除元素、新增元素
06
QUIZ:移除元素、新增元素
4 選擇器(Selectors)
01
認識 name、id、class
02
QUIZ:認識 name、id、class
03
屬性與符號的理解
04
QUIZ:屬性與符號的理解
05
其它常用語法,例: :first-child、:last-child
06
QUIZ:其它常用語法,例: :first-child、:last-child
5 篩選器(Filters)函式
01
.first()、.last()、.eq()
02
QUIZ:.first()、.last()、.eq()
03
.slice()、.has()
04
QUIZ:.slice()、.has()
05
.filter()、.not()
06
QUIZ:.filter()、.not()
6 巡訪(Traversing)函式
01
.prev()、.next()
02
QUIZ:.prev()、.next()
03
.siblings()、.parent()、.parents()
04
QUIZ:.siblings()、.parent()、.parents()
05
.children()、.find()
06
QUIZ:.children()、.find()
7 操控文件物件模型(DOM)- Part1
01
DOM 介紹
02
QUIZ:DOM 介紹
03
屬性的操控
04
QUIZ:屬性的操控
05
樣式的操控
06
QUIZ:樣式的操控
8 操控文件物件模型(DOM)- Part2
01
表單相關的操控(上)
02
表單相關的操控(下)
03
QUIZ:表單相關的操控
04
文字的操控
05
QUIZ:文字的操控
06
HTML5 data 屬性的操控
07
QUIZ:HTML5 data 屬性的操控
9 操控文件物件模型(DOM)- Part3
01
html 標籤的操控
02
QUIZ:html 標籤的操控
03
取得元素的位置座標
04
QUIZ:取得元素的位置座標
05
複製元素
06
QUIZ:複製元素
10 事件監聽(Event Handling)- Part1
01
事件的介紹與綁定寫法
02
QUIZ:事件的介紹與綁定寫法
03
認識 DOMContentLoaded 與 load 事件
04
QUIZ:認識 DOMContentLoaded 與 load 事件
05
認識事件物件(Event Object)
06
QUIZ:認識事件物件(Event Object)
11 事件監聽(Event Handling)- Part2
01
事件觸發寫法及注意事項,例:事件冒泡狀況
02
QUIZ:事件觸發寫法及注意事項,例:事件冒泡狀況
03
關於動態事件的綁定
04
QUIZ:關於動態事件的綁定
05
事件的觸發與解除綁定
06
QUIZ:事件的觸發與解除綁定
12 動畫效果 - Part1
01
.hide() 與 .show()
02
QUIZ:.hide() 與 .show()
03
.fadeIn()、.fadeOut()、.fadeToggle()
04
QUIZ:.fadeIn()、.fadeOut()、.fadeToggle()
05
.slideUp()、slideDown()、.slideToggle()
06
QUIZ:.slideUp()、slideDown()、.slideToggle()
13 動畫效果 - Part2
01
.animate() 中的 CSS 設定與時間設定
02
QUIZ:.animate() 中的 CSS 設定與時間設定
03
.animate() 中的 Easing 與 complete 參數
04
QUIZ:.animate() 中的 Easing 與 complete 參數
05
.delay() 與 .stop() 函式
06
QUIZ:.delay() 與 .stop() 函式
14 實用函式 - Part1
01
判斷陣列:$.isArray()
02
QUIZ:判斷陣列:$.isArray()
03
判斷是否有該值:$.inArray()
04
QUIZ:判斷是否有該值:$.inArray()
05
陣列的合併:$.merge()
06
QUIZ:陣列的合併:$.merge()
15 實用函式 - Part2
01
陣列的合併與取代:$.extend()
02
QUIZ:陣列的合併與取代:$.extend()
03
執行陣列、物件迴圈:$.each()
04
QUIZ:執行陣列、物件迴圈:$.each()
05
執行陣列、物件迴圈,產生新的陣列或物件:$.map()
06
QUIZ:執行陣列、物件迴圈,產生新的陣列或物件:$.map()
16 簡易 jQuery 套件介紹
01
基本套件寫法
02
QUIZ:基本套件寫法
03
寫一個文字反轉套件
04
QUIZ:寫一個文字反轉套件
05
套用別人寫好的 plugin
06
QUIZ:套用別人寫好的 plugin
17 實作:待辦事項 - Part1
01
第一步:基本介面及 text 欄位事件
02
QUIZ:第一步:基本介面及 text 欄位事件
03
第二步:新增待辦事項
04
QUIZ:第二步:新增待辦事項
05
第三步:移除與清空
06
QUIZ:第三步:移除與清空
18 實作:待辦事項 - Part2
01
第四步:更新待辦事項
02
QUIZ:第四步:更新待辦事項
03
第五步:排序
04
QUIZ:第五步:排序
05
第六步:重要性的星號
06
QUIZ:第六步:重要性的星號
你可以學到



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

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



想要成為前端工程師
光學會 HTML、CSS 是不夠的,除了 Javascript 之外,想要快速增加網頁的互動性,jQuery 可以簡單的讓你的網頁「活」起來! 


jQuery
是一個快速、簡易、具瀏覽器兼容性的「Javascript 語法函式庫」。在函式庫中,囊括了許多 Javascript 的函數功能,可以讓你的程式碼寫起來更漂亮簡潔,還能以更便捷的方式執行動畫效果,並且不用擔心瀏覽器相容性的問題,是一個可以讓開發者可以更輕鬆的上手製作網站功能的工具。


輕鬆駕馭

雖然 jQuery 能夠簡單地透過官方文件就能夠學習,但在這門線上課程中,我們將會延續更多 HTML、CSS 的知識,交付給你更多進階技巧,加上大量的實作案例,靠著每一行每一個步驟完整的概念解說,就是要讓大家能夠在學完這門課程後能輕鬆地駕馭 jQuery。



用更精簡的程式碼達成效果:Javascript 需要使用三行程式碼,jQuey 只要一行程式碼。

#就算不懂 JavaScript 也能夠簡單入門

#延續 HTML、CSS  概念知識並學會進階技巧

#用更少的程式碼完成互動式網頁

#不再為不同瀏覽器的相容性煩惱!


適合對象
1. 我是網頁開發的新手,想要進一步獲得打造互動式網頁的能力2. 我有網頁開發(HTML、CSS)基礎的能力,想要更增進網頁開發中動態技術的能力3. 我是 UI/UX 設計師,想要往前端工程師領域發展
課程講師
江舜智
講師|紅色死神 / 江舜智經歷|▹ 制服地圖 / 創辦人▹ 天氣風險管理開發 / 視覺動畫師▹ 資策會 / 工程師▹ 髮弄資訊 / CDO▹ TibaMe、資策會、飛肯設計學苑、台北市公訓處、中國科技大學等單位 / 講師▹ 資拓宏宇、公共電視台、玉山銀行等企業內訓 / 講師重要專案經驗|▹ La new 活力熊 / 吉祥物繪製與經營▹ 環保署減碳代言人 / 減碳雙熊設計▹ 氣象局影音氣象▹ 國科會雲端硬碟 COSA 計畫▹ 資策會去識別化系統▹ 公視 2020 總統大選即時開票網站▹ 文策院「台湾漫画夜市」活動網站▹ 公視新聞網 / 改版▹ Gogoro 內部系統▹ 勞保局系統 / 改版▹ 電視節目《我要當女一》/ 官網架設▹ 統一企業、桃園市政府、udn、三立電視台、三星等知名企業 / 活動網站架設▹ 許多中小企業 / 官網架設獲獎|▹ Nokia Widget 兩岸三地比賽 / 首獎▹ 第八屆黃金企鵝獎應用程式組 / 優勝、網路人氣獎▹ 2010 Android 使用者介面設計比賽 / 特別獎▹ 文策院「台湾漫画夜市」活動網站 CSSDesignAwards / Special Kudos專長|▹ CSS▹ jQuery, Vue.js / javascript▹ CodeIgniter, WordPress / PHP▹ SEO▹ 網站規劃與架設
展開全部
開課單位
緯育TibaMe
緯育TibaMe由全球最大資通訊集團之一的緯創資通集團於2015年正式成立,我們專注於人才培訓與平台服務,發展多元的授課模式,並結合緯育開發的雲端智能化學習系統,有效培育新世代數位化人才。在行動與雲端時代,用科技加值人才培育,持續發展創新與有效的數位教育學習服務。
最新動態 看所有動態

Power Automate、Zapier、Make、n8n、tldraw​ 怎麼挑選適合你的自動化工具

想提升工作效率,你該考慮導入 #自動化工具! 🚀 但何謂自動化工具? 可以在工作中協助到哪些面向? 我們又該如何挑選適合自己的工具?🤔 📖 文章重點摘要 📍 自動化工具就是把重複性工作流程,交給機器執行 📍 不需要程式背景,也不一定要工程師才能使用 📍 自動化能有效: ➊ 提升效率:減少重複性工作,讓人力專注在高價值任務,提升整體工作成效 ➋ 降低錯誤:避免人為疏失,提高數據與操作準確性 ➌ 加速應用:AI + RPA 工具逐年普及,低程式碼(Low-Code)、無程式碼(No-Code)工具降低門檻,企業導入更快速 ➍ 應對挑戰:面對人力短缺與數位轉型壓力,懂得運用自動化工具的工作者將更具職場競爭力 完整 5 大自動化工具介紹與比較 & 針對不同工作/職務挑選建議 現在就前往閱讀完整文章 👉 https://bit.ly/4364RGw #powerautomate #n8n #zapier #tldraw

從想轉職到成功轉職-學長姊現身說最真實

🎤 學長姊分享 想跨域轉職一路上的 ✅ 心態調適 ✅ 準備過程 ✅ 成功經驗 ✅ 職場真實樣貌 聽我們說不如聽過來人──轉職成功的學長姊現身說最真實~ 這裡報名線上與學長聊聊>> https://bit.ly/4cGHC9f ▍誰適合參加 🔹即將從就業培訓班結訓的你 🔹剛結訓想繼續物色優質職缺的你 🔹想跨域域轉職猶豫中的你 ▍從財金系畢業轉職為後端工程師的學長要跟你分享 🔥 如何結合非本科系的背景創造自己的優勢 🔥 專題作品準備心法 🔥 履歷撰寫技巧與面試準備方向 🔥 進入職場的實際狀況與持續進修該學什麼 🔥 後端工程師未來職涯發展的可能性 ▍直播資訊 時間:4/23 (三) 晚上 8 點至 9 點 型式:線上直播 (直播連結將於報名後2~3個工作天email提供) 報名連結: https://bit.ly/4cGHC9f
常見問答
如何購買課程並開始上課
於欲購買 1. 線上課程之頁面,點擊「立即購買」,成功使用信用卡完成付款並確立訂單成立後,本平台將透過購買填寫之信箱,以郵件方式通知「訂單成立」,後續兌換學習有兩種形式:(A) 若購買學習廠商提供課程,購買後「提供課程兌換序號、兌換連結、兌換碼使用說明」,引導您至購買課程之出版廠商兌換並上課、(B)若購買是104學習系統,購買完可以從郵件、訂單明細、課程詳細頁直接進到站內線上學習。 2. 實體課程之頁面,點擊「立即購買」,成功完成付款並確立訂單成立後,本平台將透過購買填寫之信箱,以郵件方式通知「訂單成立」即可完成報名,後續開課單位會有專員與您聯繫後續事宜。
購買與報名課程付款方式?
僅提供信用卡付款。
有支援信用卡分期嗎?
平台有提供分期服務:結帳金額滿$4,000可享三期零利率,滿$12,000可享六期零利率;分期服務支援銀行公司為:中國信託、台新銀行、玉山銀行,實際分期金額依各發卡行規定
已完成付款,但用錯折扣碼怎麼辦?
請申請退款並重新下單,已使用之折扣碼,本平台將不進行退回,敬請見諒。
線上刷卡後訂單狀態顯示「待付款」
代表您的結帳流程尚未完成,請儘速完成結帳程序,以免課程相關優惠權益失效。
刷卡失敗的原因
可能為以下原因: 1.授權失敗(例:信用卡發卡銀行系統忙碌、網路塞車、刷卡等待時間過久造成系統確認失敗等問題),建議稍待一段時間再重新刷卡。 2.輸入信用卡卡號等相關資料不正確(例:輸入資料不正確、卡號過期、尚未開卡等問題),建議重新確認輸入資訊。
如何選擇紙本發票
為響應政府政策,不主動提供紙本發票,委由金財通系統寄發電子發票開立通知信至學員購買課程時填寫之Email,發票自動存入會員載具,若未收到請告知。
企業請款之憑證,如何申請
若需要進行企業請款,請於購買時輸入統一編號、發票抬頭,本平台將以郵件寄送電子發票方式,至您填寫之信箱。
多久會收到發票
發票將於付款成功,3個工作天內開立,敬請稍候。
如何退款
請參考下方退款須知與流程 1.若您於本平台成功完成付款購買課程,有退款需求,於外部學習廠商兌換之線上課程自購買日起7天內,且未進行課程兌換,可申請全額退費;於104課程中心站內學習課程若購買日起7天內後「未進到學習頁」,可申請全額退費;實體課程須於開課日前 1 日之非假日上班時段前與104學習精靈提出申請,始得要求全額退費。 2.若需申請退款,請使用信件主旨:「課程中心退款申請」,並於信件內容寫明購買人姓名、訂單編號、欲退款之課程名稱,郵件至nabiservice@104.com.tw,本平台將於5個工作天內盡快為您處理。 3.確認提出退款申請時間為課程購買日起7天內,且未進行課程兌換,本平台將與欲申請退款課程之出版廠商,提出會員資料與學習紀錄查詢,確認您課程的觀看紀錄,並同步確認出版廠商訂定之退款事項,是否全數符合。申請退款的同時,即代表您同意本平台與退款課程之出版廠商,提出查詢會員資料與學習紀錄。 4.若您單一訂單中購買兩堂(含)以上課程,不需要整張訂單退款(只退其中幾堂課),退款金額為欲退款課程售價加總後,扣除此張訂單所使用之折扣碼(若折扣碼為整張訂單之折數折扣,則退款金額為欲退款課程售價加總後乘以折數折扣),若計算後退款金額低於(含)0元,本平台將不執行退款。5.上述退款方式僅限於本平台成功完成付款購買之課程,若付款與訂單成立之任一程序不在本平台完成,退款方式需依照課程出版之廠商所訂定之規則提出申請,並由課程出版廠商協助處理,本平台不介入。 6.若您的發票沒有填寫統一編號,並需要辦理退款時,由本平台代為處理發票相關作業 (如作廢電子發票或開立電子發票折讓單),以加速退款作業時程。 7.若您原訂單信用卡分期,其申請退費時,須整筆訂單全額退費,無法部分或擇一課程退費。
款項何時退回
課程退費採原信用卡退刷方式,退費所需之工作天依各金融機構實際作業時間為準。