張凱迪(KD Chang)
台灣大學，主修經濟學，臺大資管所。服務過上市電子公司、人工智慧新創公司、全球前三大瀏覽器製造商和電子商務平台，也曾參與數個組織的創辦。夢想是做出人們想用的產品和辦一所心目中理想的學校。
jQuery 基礎入門
Front End 101 網頁前端入門
講師：張凱迪（KD.Chang）
Copyright © 2016 All rights reserved
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
[Front End 101] jQuery 基礎入門
By 張凱迪(KD Chang)
[Front End 101] jQuery 基礎入門
101一般是國外入門課程的課程代號，希望藉由這次的 Front End 101 Workshop 能讓對於網頁前端程式設計有興趣的朋友可以有一個和藹可親的入門管道，啟發學習興趣並認識志同道合的朋友。工作坊目標希望帶大家從基礎開始，最後完成一個瀏覽器外掛(extenstion)！
