Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery & API Practices

jQuery & API Practices

Ryan Chung

May 27, 2020
Tweet

More Decks by Ryan Chung

Other Decks in Technology

Transcript

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

    • 特效與動畫 • AJAX • 其他工具
  2. 5 文法結構  $(selector).action() 選擇物件(找到誰) . 進行動作(做什麼)  例如: $(this).hide()

    把目前這個元件藏起來 $("p").hide() 把所有段落藏起來 $(".test").hide() 把所有類別為test的組件藏起來 $("#test").hide() 把所有id為test的組件藏起來
  3. 6 常見事件偵測 • 點擊 click、dblclick $("p").click(function(){ // action goes here!!

    }); • 載入完成 ready • 滑鼠 mouseenter, mouseleave, mousedown, mouseup hover = mouseenter + mouseleave • 聚焦 focus, blur
  4. 7 效果 • hide() 隱藏 • show() 顯示 • toggle()

    切換隱藏或顯示 • fadeIn() 淡入 • fadeOut() 淡出 • fadeToggle() 切換淡入與淡出 • fadeTo() 改變透明度 • slideDown() 下拉顯示 • slideUp() 上拉隱藏 • slideToggle() 切換上下滑動 • animate() 動畫
  5. 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>
  6. 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>
  7. 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(),改變段落中的文字 • 離開範圍
  8. 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>
  9. 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>
  10. 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); });
  11. 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'); });
  12. 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; }