1 使用jQuery與API 

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

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

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

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

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

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

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

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 

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

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

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

13 index.html HellojQuery

The Hangover Part III



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()，改變段落中的文字 • 離開範圍 

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

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

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

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

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

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

21 index.html Test Pokedex 

22 pokemon.html Test Pokedex 

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); }); 

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'); }); 

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; }