javascript 與 jQuery 互動介面程式設計 - 進級

Event (事件)

1. 事件流程
   1. capture, target, bubbling.
   2. 事件目標 (event target)
   3. 事件處理函數 (event handler)
2. jQuery 使用者互動事件 (interactive event)
   1. .on('click')
   2. .on('mouseenter'), .on('mouseleave'), .on('mouseover'), .on('mouseout')
   3. .on('focus'), .on('blur'), .on('focusin'), .on('focusout')
   4. .on('keypress'), .on('keydown'), .on('keyup')
   5. .on('submit'), .on('change'), .on('input')
3. jQuery 移除事件的註冊
   1. .off()
   2. .one()
4. jQuery(this) 物件特殊字與事件處理函數的關係
5. 互動事件建置無障礙網頁的觀念。

jQuery animation (動畫)

1. CSS 3 動畫與 jQuery 的運用。
2. 動畫方法
   1. 消失與顯現
      1. .hide(), .show(), .toggle()
   2. 淡入與淡出
      1. .fadeTo(), .fadeIn(), .fadeOut(), .fadeToggle()
   3. 開與合
      1. .slideDown(), .slideUp(), .slideToggle()
3. 自訂動畫的方法
   1. .animate()
   2. .stop(), .delay()
   3. 動畫特殊 CSS 屬性表示法。
4. 側欄收合設計
5. 製作特別動畫的 plugin
   1. easing plugin 製作 ㄉㄨㄞ ㄉㄨㄞ 動畫效果。
   2. color plugin 製作顏色變換動畫。

jQuery 特殊的 CSS 屬性

1. .innerHeight(), .innerWidth(), .outerHeight(), .outerWidth()
2. .scrollTop(), .scrollLeft()
3. .position(), .offset()
4. 製作捲動的動畫效果。

指向複雜的物件

1. 子孫級 (descendants)
   1. .children(), .find(), .end()
2. 同輩級 (siblings)
   1. .next(), .prev(), .siblings(), .nextAll(), .prevAll(), .nextUntil(), .prevUntil()
3. 祖級 (ancestors)
   1. .parent(), .offsetParent(), .parents(), .parentsUntil()
4. 篩選
   1. .not(), .eq(), .filter(), .each()
5. DOM 索引
   1. .index()

動畫選單設計

1. 折合目錄 (accordion) 。
2. 下拉選單 (dropdown) 。
3. 頁籤 (tabs) 。
4. 覆蓋彈出目錄 (overlay pop-up) 。
5. 動態選單建置無障礙網頁的觀念。

Ajax 遠端資料傳遞與流暢的使用者體驗

1. HTTP GET, POST request
2. .load()
3. jQuery.get(), jQuery.post()
4. jQuery.getJSON()

學習資格

1. 了解 jQuery 處理物件的模式。→ 瞧瞧 jQuery 初級課程
2. 熟悉 html 語法。→ 瞧瞧 HTML 課程
3. 熟悉 css 排版觀念。→ 瞧瞧 CSS 排版課程, CSS 特效課程

應用範圍

1. 網頁設計、雲端應用程式 (web Apps) 。
2. 行動裝置應用程式 (Apps) 。
3. 電腦應用程式。

教學示範

1. Banner 輪播廣告設計 (cycle2) 一
2. Banner 輪播廣告設計 (cycle2) 二
3. Banner 輪播廣告設計 (cycle2) 三
4. ㄉㄨㄞ ㄉㄨㄞ 動畫效果
5. 覆蓋彈出式燈箱效果 (lightbox)
6. 下拉選單
7. Ajax 填表
8. Ajax 網路電視播放機
9. 歷屆學員作業

相關證照

1. w3schools jQuery Developer Certificate

更新日期： 2015-2-5