jQuery Basic - Speaker Deck

Slide 1

Slide 1 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 jQuery Basic Ryan Chung 1

Slide 2

Slide 2 text

jQuery Basic – [email protected] 行動開發學院行動開發學院課程大綱 • 簡介 (jQuery是什麼 / 目的 / 主要功能) • 開始使用 (如何下載 / 放在哪裡) • 文法結構 (識別符/選擇器/動作) • 選擇器與事件 – Lab : 按按鈕看詳細介紹 • HTML與CSS操作 – Lab : 畫面特效應用 – Lab : 滑過照片秀名子 – Lab : 馬利兄弟闖關 • 元件巡訪 • jQuery AJAX 應用 • 綜合範例 2

Slide 3

Slide 3 text

jQuery Basic – [email protected] 行動開發學院行動開發學院簡介 • JavaScript Library • 簡化JavaScript程式碼 3

Slide 4

Slide 4 text

jQuery Basic – [email protected] 行動開發學院行動開發學院主要功能 • HTML/DOM 存取 • CSS 使用 • HTML事件方法 • 特效與動畫 • AJAX • 其他工具 4

Slide 5

Slide 5 text

jQuery Basic – [email protected] 行動開發學院行動開發學院如何使用 1. 在官網找到最新版本下載 https://code.jquery.com/jquery-X.X.X.min.js 2. 在中插入 5

Slide 6

Slide 6 text

jQuery Basic – [email protected] 行動開發學院行動開發學院文法結構 • $(selector).action() 選擇對象(找到誰) . 進行動作(做什麼) • 例如： $(this).hide() 把目前這個元件藏起來 $("p").hide() 把所有段落藏起來 $(".test").hide() 把所有類別為test的元件藏起來 $("#test").hide() 把所有id為test的元件藏起來 6

Slide 7

Slide 7 text

jQuery Basic – [email protected] 行動開發學院行動開發學院避免jQuery存取到還沒載入的元件 7

Slide 8

Slide 8 text

jQuery Basic – [email protected] 行動開發學院行動開發學院選擇器 selector • element selector $("p")、$("button") • #id selector $("#test") • .class selector $(".test") 8

Slide 9

Slide 9 text

jQuery Basic – [email protected] 行動開發學院行動開發學院常見事件偵測 • click、dblclick $("p").click( function(){ // action goes here!! }); • ready • mouseenter,mouseleave,mousedown,mous eup • hover = mouseenter+mouseleave • focus, blur 9

Slide 10

Slide 10 text

jQuery Basic – [email protected] 行動開發學院行動開發學院效果 • hide() 隱藏 • show() 顯示 • toggle() 切換隱藏或顯示 • fadeIn() 淡入 • fadeOut() 淡出 • fadeToggle() 切換淡入與淡出 • fadeTo() 改變透明度 • slideDown() 下拉顯示 • slideUp() 上拉隱藏 • slideToggle() • animate() 動畫 10

Slide 11

Slide 11 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 Lab.按按鈕看詳細介紹按按鈕可以顯示詳細介紹再按一下可以隱藏詳細介紹 11

Slide 12

Slide 12 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 index.html 12

Slide 13

Slide 13 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 main.js 13

Slide 14

Slide 14 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 Lab.顯示/隱藏 ->各種特效 1. 請試著修改顯示/隱藏的範例，變成淡入淡出特效 • fadeToggle() 2. 請試著修改顯示/隱藏的範例，變成下拉上收特效 • slideToggle() 3. 請測試帶有參數的顯示效果 14

Slide 15

Slide 15 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 Lab.滑鼠移到誰，就顯示誰的名字 15

Slide 16

Slide 16 text

jQuery Basic – [email protected] 行動開發學院行動開發學院滑鼠移到誰，就顯示誰的名字 • 用陣列儲存每一個人的名字 • 當網頁元件準備好時 • 當滑鼠移至圖片上面時 • hover吃兩個參數 • 進入範圍 • 取得是第幾張圖片，對應取得人名 • 利用text()，改變段落中的文字 • 離開範圍 • 清空文字 16

Slide 17

Slide 17 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 index.html 17

Slide 18

Slide 18 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 main.js 18

Slide 19

Slide 19 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 index() 19

Slide 20

Slide 20 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 animate() 動畫 • 改變元件的屬性 • 位置 • 透明度 • 大小(寬度、高度) • 各種CSS樣式 20

Slide 21

Slide 21 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 Lab.瑪莉兄弟闖關 • 按下鍵盤右鍵，移動瑪莉兄弟闖關 21

Slide 22

Slide 22 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 index.html 22

Slide 23

Slide 23 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 style.css 23

Slide 24

Slide 24 text

jQuery Basic – [email protected] 行動開發學院行動開發學院 main.js 24