Slide 1

Slide 1 text

1 使用jQuery與API

Slide 2

Slide 2 text

2 簡介 • JavaScript Library • 簡化JavaScript程式碼

Slide 3

Slide 3 text

3 主要功能 • HTML/DOM 存取 • CSS 使用 • HTML事件方法 • 特效與動畫 • AJAX • 其他工具

Slide 4

Slide 4 text

4 如何使用 1. 在官網找到最新版本下載 https://code.jquery.com/jquery-X.X.X.min.js 2. 在中插入或前 https://code.jquery.com/

Slide 5

Slide 5 text

5 文法結構  $(selector).action() 選擇物件(找到誰) . 進行動作(做什麼)  例如: $(this).hide() 把目前這個元件藏起來 $("p").hide() 把所有段落藏起來 $(".test").hide() 把所有類別為test的組件藏起來 $("#test").hide() 把所有id為test的組件藏起來

Slide 6

Slide 6 text

6 常見事件偵測 • 點擊 click、dblclick $("p").click(function(){ // action goes here!! }); • 載入完成 ready • 滑鼠 mouseenter, mouseleave, mousedown, mouseup hover = mouseenter + mouseleave • 聚焦 focus, blur

Slide 7

Slide 7 text

7 效果 • hide() 隱藏 • show() 顯示 • toggle() 切換隱藏或顯示 • fadeIn() 淡入 • fadeOut() 淡出 • fadeToggle() 切換淡入與淡出 • fadeTo() 改變透明度 • slideDown() 下拉顯示 • slideUp() 上拉隱藏 • slideToggle() 切換上下滑動 • animate() 動畫

Slide 8

Slide 8 text

8 Lab.按按鈕看詳細介紹 按按鈕可以顯示詳細介紹 再按一下可以隱藏詳細介紹

Slide 9

Slide 9 text

9 index.html HellojQuery

The Hangover Part III

When one of their own is kidnapped by an angry gangster, the Wolf Pack must track down Mr. Chow, who has escaped from prison and is on the lam.

Show Detail

Slide 10

Slide 10 text

10 main.js $("p").hide(); //先隱藏段落 $("button").click(function(){ //當按鈕按下後 $("p").toggle(); //切換顯示段落 });

Slide 11

Slide 11 text

11 Lab.顯示/隱藏 ->各種特效 1. 請試著修改顯示/隱藏的範例,變成淡入淡出特效 • fadeToggle() 2. 請試著修改顯示/隱藏的範例,變成下拉上收特效 • slideToggle() 3. 請測試帶有參數的顯示效果

Slide 12

Slide 12 text

12 Lab.滑鼠移到誰,就顯示誰的名字

Slide 13

Slide 13 text

13 index.html HellojQuery Bradley Cooper Ed Helms Zach Galifianakis

The Hangover Part III

Slide 14

Slide 14 text

14 main.js $("img").hover( function(){$("p").text($(this).attr("alt"));}, function(){$("p").text("");}); style.css img{ width: 200px; height: 300px; } p{ font-size: 18px; font-style: italic; } • 當滑鼠移至圖片上面時 • hover吃兩個參數 • 進入範圍 • 取得該張圖片的alt屬性值 • 利用text(),改變段落中的文字 • 離開範圍

Slide 15

Slide 15 text

15 API: Application Programming Interface 商品資訊 企業內部資料 電影資料庫 物聯網感測器資料 天氣資料庫

Slide 16

Slide 16 text

16 綜合練習:Pokédex 寶可夢圖鑑

Slide 17

Slide 17 text

17 綜合練習:Pokédex 寶可夢圖鑑

Slide 18

Slide 18 text

18 Pokédex 寶可夢圖鑑資料 https://pokeapi.co/api/v2/pokemon/25/

Slide 19

Slide 19 text

19 用 JSON Viewer 觀察一下資料結構 thisObject.height thisObject.name thisObject.types[0]["type"].name thisObject.weight 需要巡訪types http://jsonviewer.stack.hu/ thisObject.sprites["front_default"]

Slide 20

Slide 20 text

20 專案結構 index.html main.js style.css pokemon.html pokemon.js

Slide 21

Slide 21 text

21 index.html Test Pokedex

Slide 22

Slide 22 text

22 pokemon.html Test Pokedex

Slide 23

Slide 23 text

23 pokemon.js let id; for (let i = 1; i <= 151; i++){ $("body").append(''); } $('img').click(function(){ id = $(this).attr('id'); parent.$(parent.document).trigger("imageClick",id); });

Slide 24

Slide 24 text

24 main.js $(document).on("imageClick",function(e,id){ $.get("https://pokeapi.co/api/v2/pokemon/" + id + "/", function(res) { //顯示名子 let nameString = "

" + id+"
"+ res.name + "

"; $('.name').html(nameString); //顯示圖片 let imgString = ''; $('.picture').html(imgString); //巡訪並顯示類別 var types = "

Types

    "; for(let i = 0; i < res.types.length; i++) { types += "
  • " + res.types[i]["type"].name + "
  • "; } types += "
"; $(".types").html(types); //顯示高度、重量 $('.height').html("

Height

"+res.height); $('.weight').html("

Weight

"+res.weight); }, 'json'); });

Slide 25

Slide 25 text

25 style.css *{ margin: 0px; padding: 0px; } .pokemon{ display: inline-block; vertical-align: top; } .pokedex{ width: 20%; height: 400px; border: 10px solid #5fb3df; display: inline-block; vertical-align: top; padding: 20px; text-align: center; } .pokedex div{ margin-top: 5px; } .picture img{ display: block; margin: 0px auto; } .types li{ list-style: none; padding-top: 5px; } h3{ color:purple; }