jQuery & API Practices

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. 在<head></head>中插入或</body>前 <script src="jquery-X.X.X.min.js"></script> 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 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HellojQuery</title> </head>
<body> <img width="200" height="300" src="http://content6.flixster.com/movie/11/17/27/11172744_800.jpg"> <h1>The Hangover Part III</h1> <p>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.</p> <button>Show Detail</button> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script async defer src="main.js"></script> </body> </html>

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

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

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

13 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HellojQuery</title> <link
rel="stylesheet" href="style.css"> </head> <body> <img alt="Bradley Cooper" src="images/Bradley_Cooper.jpg"> <img alt="Ed Helms" src="images/Ed_Helms.jpg"> <img alt="Zach Galifianakis" src="images/Zach_Galifianakis.jpg"> <h1>The Hangover Part III</h1> <p></p> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script async defer src="main.js"></script> </body> </html>

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 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test Pokedex</title>
<link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="pokemon"> <iframe src="pokemon.html" width="600px" height="500px"></iframe> </div> <div class="pokedex"> <div class="name"></div> <div class="picture"></div> <div class="types"></div> <div class="height"></div> <div class="weight"></div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script async defer src="main.js"></script> </body> </html>

22 pokemon.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test Pokedex</title>
</head> <body> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script async defer src="pokemon.js"></script> </body> </html>

23 pokemon.js let id; for (let i = 1; i
<= 151; i++){ $("body").append('<img id="' + i + '" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/' + i + '.png">'); } $('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 = "<h1>" + id+"<br>"+ res.name + "</h1>"; $('.name').html(nameString); //顯示圖片 let imgString = '<img src="'; imgString += res.sprites["front_default"] +'">'; $('.picture').html(imgString); //巡訪並顯示類別 var types = "<h3>Types</h3><ul>"; for(let i = 0; i < res.types.length; i++) { types += "<li>" + res.types[i]["type"].name + "</li>"; } types += "</ul>"; $(".types").html(types); //顯示高度、重量 $('.height').html("<h3>Height</h3>"+res.height); $('.weight').html("<h3>Weight</h3>"+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; }

jQuery & API Practices

jQuery & API Practices

Ryan Chung

More Decks by Ryan Chung

Other Decks in Technology

Featured

Transcript

1 使用jQuery與API

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

3 主要功能 • HTML/DOM 存取 • CSS 使用 • HTML事件方法

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

5 文法結構  $(selector).action() 選擇物件(找到誰) . 進行動作(做什麼)  例如： $(this).hide()

6 常見事件偵測 • 點擊 click、dblclick $("p").click(function(){ // action goes here!!

7 效果 • hide() 隱藏 • show() 顯示 • toggle()

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

9 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HellojQuery</title> </head>

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

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

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

13 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HellojQuery</title> <link

14 main.js $("img").hover( function(){$("p").text($(this).attr("alt"));}, function(){$("p").text("");}); style.css img{ width: 200px; height:

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

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

21 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test Pokedex</title>

22 pokemon.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test Pokedex</title>

23 pokemon.js let id; for (let i = 1; i

24 main.js $(document).on("imageClick",function(e,id){ $.get("https://pokeapi.co/api/v2/pokemon/" + id + "/", function(res) {

25 style.css *{ margin: 0px; padding: 0px; } .pokemon{ display: