張凱迪(KD Chang)
台灣大學，主修經濟學，臺大資管所。服務過上市電子公司、人工智慧新創公司、全球前三大瀏覽器製造商和電子商務平台，也曾參與數個組織的創辦。夢想是做出人們想用的產品和辦一所心目中理想的學校。
jQuery 基礎入門
現代化行動網頁設計基礎入門班 DAY 5
講師：張凱迪（KD.Chang）
Copyright © 2013 All rights reserved
提醒您鍵盤左右鍵可以移動投影片
Sorry, PPT is not suitable for Hackers : (
Outline
jQuery 簡介
jQuery 選擇器
jQuery 和 DOM
jQuery 事件處理
jQuery UI 和特效
jQuery Advance & Plug-in
jQuery 簡介
關於 jquery
jQuery 是一個廣泛被使用的JS 函式庫 (Library)，其標榜寫月少做越多 (The Write Less, Do More)的強大功能，可以讓使用者更輕易的操作 DOM API、變更網頁的外觀、顯示動畫和進行事件處理
* 建議在使用jQuery前，對於JS 和 DOM 要有一定程度了解
使用 jquery
1. 到官方網站下載 jQuery (minified 版本檔案較小為正式上線使用，開發用unpressed版本)
2. 將下載的.js 檔案引入
<script src="jquery.js"></script>3. 開始使用 jQuery !
第一個 jQuery 程式
以前寫Native時，光選取想要改變的DOM元素就要寫很長一段，現在有了jQuery，可以用更簡潔的方式選取元素並更改其屬性值
jQuery(document).ready(function() {console.log('Hi jQuery');});
$ 為 jQuery別名，特殊變數名稱。 $()函數是呼叫建構函數建立的jQuery物件，參數document為HTML物件本身，然後註冊了 ready 事件，括號中為匿名函數，處理事件
jQUERY 程式架構
一般使用 jQuery情境在於要用更簡潔方式和DOM來做互動，所以必須等到 DOM完成載入(不用等到所有資源載入)後，才開始執行 jQuery 程式
1. jQuery(document).ready(function() { … }) [常用]
當 document 物件下所有 DOM 物件都可以正確取得時，就會觸發事件，也可簡寫為 $(function() { … });
2. jQuery(window).load(function() { … })
同 JS 裡的 window.onload 事件，會等所有資源載入
參考文件：
JQUERY 程式基本語法
一般jQuery程式敘述是由 $()函數開始，可以分為三個部分：
1. 選擇器
可以參考使用CSS選擇器寫法，找出符合條件元素
2. 動作
替元素套用樣式或是建立動畫、互動等
3. 參數列
執行動作所需的參數
$(選擇器字串).method(參數);串聯 chaining
由於jQuery方法的傳回值為jQuery物件本身，所以可以使用串聯的方法依序執行多個方法，達到簡潔語法的效果
$('.xd').css('color', 'red');$('.xd').html('Hi JS');$('.xd').addClass('XDDD');
$('.xd').css('color', 'red').html('Hi JS').addClass('XDDD');練習 一(SAMPLE 5-1)
利用jQuery的方法，選取一元素，動態改變其顏色
jQuery 選擇器
JQUERY 選擇器
jQuery選擇器可以說是jQuery的核心，亦即需要先選擇出你想要處理的元素，才可以進行接下來事件處理、更改樣式、建立動畫等功能
在 $() 函數中只有一種參數，為選擇器語法字串。透過傳入選擇器語法字串進入$()函數，可以回傳一個符合條件的jQuery物件，在根據回傳的物件呼叫jQuery方法進行處理
JQUERY 選擇器
基本上，jQuery選擇器有三種(類似CSS選擇器寫法)
1. 標籤名稱
$('element')
2. id 屬性
$('#idName')
3. class 屬性
$('.className')
jQuery 和 DOM
存取 CSS
使用jQuery可以簡單的存取元素的CSS屬性值
css('屬性名', '屬性值')
為元素套用CSS樣式或取出元素CSS屬性值
存取 CSS 樣式類別
可以用不同方式來存取CSS樣式類別
addClass()
增加樣式類別
hasClass()
檢查是否有該樣式類別
removeClass()
移除樣式類別
toggleClass()
如果沒有則新增，若有則移除樣式類別
JQUERY 與 DOM 處理
常用於新增、刪除、修改DOM的方法：
1. html() 即innerHTML 將參數HTML Tag取代DOM元素內容
2. text() 即innerText 將參數文字內容取代DOM元素內容
3. prepend() 將參數的HTML Tag新增成為第一個子元素
4. append() 將參數的HTML Tag新增成為最後一個子元素
5. before() 將參數的HTML Tag 插入元素之前
6. after() 將參數的HTML Tag 插入元素之後
7. remove() 從DOM刪除此元素
jQuery 事件處理
JQUERY 事件處理
事件處理是JS也是jQuery非常重要的功能，jQuery擴充了原生JS的事件處理，提供更強大的一些功能
1. 使用on來綁定事件(和JS原生比較看看)
$('#xd').on('click', eventHandler);function eventHandler(event){$(this).css('color', 'red');};
jQuery UI 和特效
jquery 特效方法
jQuery提供常用的特效，讓使用者可以輕鬆使用：
顯示、隱藏、滑動、淡出淡入等
使用方法：
$('選擇器').特效方法(duration , callback function);
1. 持續時間(duration)
特效持續時間，單位為毫秒，可為關鍵字fast(約200毫秒)
2. 回呼函數(callback function)
當特效結束時所呼叫的函數
顯示與隱藏特效
1. show() 顯示元素
2. hide() 隱藏元素
3. toggle() 按一下可以切換顯示或隱藏元素
滑動特效
1. slideDown() 元素向下滑動
2. slideUp() 元素向上滑動
3. slideToggle() 切換元素向上和向下滑動
淡出淡入特效
藉由改變透明度可以達到淡出淡入效果
1. fadeIn() 淡入元素
2. fadeOut() 淡出元素
3. fadeToggle() 切換淡出、淡入元素
4. fadeTo() 元素漸漸轉變成指定透明度
練習 二(SAMPLE 5-2)
製作點選標籤切換內容的網頁選單(請參考Yahoo奇摩首頁)
麻煩和JS寫法做比較
jQuery Advance & Plug-in
jQuery 基礎入門
By 張凱迪(KD Chang)
jQuery 基礎入門
隨著智慧型裝置的起飛，現在幾乎已是人手一支智慧型手機，根據統計今年全球智慧型手機出貨量已達10億支，由於大量的需求，開發Mobile Web也成為原生（Native App）外另一種較低成本的選擇。因此本課程將著重在網頁開發基礎介紹以及如何運用HTML5/CSS3/JavaScript（jQuery）來開發Mobile Web App。希望讓沒有基礎（或有基礎）的學員能在學習完課程後具備自學能力未來能持續進修，進而開發出搭配Facebook API、Google Map API的Mobile Web App。 課程網站：http://kdchang.cc/mobile-web-dev/
