咩星征服計劃 用 Js 征服地球 Part II
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

咩星征服計劃 用 Js 征服地球 Part II

on

  • 508 views

jQuery 教學

jQuery 教學

Statistics

Views

Total Views
508
Views on SlideShare
508
Embed Views
0

Actions

Likes
2
Downloads
5
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

咩星征服計劃 用 Js 征服地球 Part II Presentation Transcript

  • 1. 咩星征服計劃 用 JS 征服地球 Part II
  • 2. 羊小咩 Lamb Mei Lamb-mei@homakimi.com lamb@lamb-mei.com 現任 禾米數位創意 Consultant
  • 3. Time of use
  • 4. 19:00 – 22:00 圖片來源 mtmorriscommunitychurch
  • 5. course content
  • 6. course content • • • • jQuery Introduction jQuery Seletor jQuery API Javascript Online
  • 7. jQuery Introduction
  • 8. jQuery Introduction What is jQuery 圖片來源 http://jquery.com/
  • 9. jQuery Introduction - What is jQuery jQuery是一個快速,體積小,功能豐富的 JavaScript Lib。 易於使用的API 處理 HTML DOM 遍歷操作,事 件處理,動畫和Ajax,並簡單處理多種瀏覽器 的問題。 圖片來源 http://jquery.com/
  • 10. jQuery Introduction - download 版本 1.9.x 此版本很多舊方法因效能問題被棄 用,若有使用套件請注意套件使用 版本 1.10.x 不使用舊方法可使用最心版本 2.x 不支援 IE 6 7 8 http://jquery.com/download/
  • 11. jQuery Introduction – 如何運作 $("div").addClass("special");
  • 12. jQuery 基礎 – 如何運作 $("div").addClass("special"); 選取的元素
  • 13. jQuery 基礎 – 如何運作 要做的事情 $("div").addClass("special"); 選取的元素
  • 14. jQuery Selector
  • 15. jQuery 基礎 –選取元素 $(您想選擇的元素)
  • 16. jQuery 基礎 –選取元素 <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div>
  • 17. jQuery 基礎 –選取元素 $("div") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取所有DIV
  • 18. jQuery 基礎 –選取元素 $("#body") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 取 id 為 body 的元素
  • 19. jQuery 基礎 –選取元素 $("div#body") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取 id 為 body 的 <div>
  • 20. jQuery 基礎 –選取元素 $(".contents") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取 class 為 contents 的元素
  • 21. jQuery 基礎 –選取元素 $("div.contents p") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取 class 為 contents 的 <div> 底下任何一層的 <p>
  • 22. jQuery 基礎 –選取元素 $("div > div") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 選取被 <div> 包住的下一層 <div>
  • 23. jQuery 基礎 –選取元素 $("div:has(div)") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 和前一個範例相反 選取至少有包住一個 <div> 的 <div>
  • 24. jQuery 基礎 –選取元素 $("div[id]") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 查找所有含有 id 属性的div元素
  • 25. jQuery 基礎 –選取元素 $("div[class='contents']") <div id="body"> <h2>Some Header</h2> <div class="contents"> <p>...</p> <p>...</p> </div> </div> 查找屬性 class 為contents 的 div 元素。
  • 26. jQuery 基礎 – Ready 事件 jQuery Ready 是 DOMContentLoaded
  • 27. jQuery 基礎 – Ready 事件 jQuery Ready 是 DOMContentLoaded DOMContentLoaded 當準備好DOM Tree 就會觸發
  • 28. jQuery 基礎 – Ready 事件 jQuery Ready 是 DOMContentLoaded DOMContentLoaded 當準備好DOM Tree 就會觸發 window.onload 所有文件內的元件,包含圖檔等等全部 下載完成後才會觸發
  • 29. jQuery 基礎 – Ready 事件 $(document).ready(function() { //do something });
  • 30. jQuery 基礎 – Ready 事件 縮寫 $(function() { //do something });
  • 31. jQuery API
  • 32. jQuery API Category • AJAX
  • 33. jQuery API Category • AJAX • Attributes
  • 34. jQuery API Category • AJAX • Attributes • CSS
  • 35. jQuery API Category • • • • AJAX Attributes CSS Data
  • 36. jQuery API Category • • • • • AJAX Attributes CSS Data Effects
  • 37. jQuery API Category • • • • • AJAX Attributes CSS Data Effects • Events
  • 38. jQuery API Category • • • • • AJAX Attributes CSS Data Effects • Events • Forms
  • 39. jQuery API Category • • • • • AJAX Attributes CSS Data Effects • Events • Forms • Traversing
  • 40. jQuery API Category • • • • • AJAX Attributes CSS Data Effects • • • • Events Forms Traversing Selectors
  • 41. jQuery API API 查詢 http://api.jquery.com/
  • 42. jQuery API API 查詢 http://jqapi.com/
  • 43. jQuery API Do Someting
  • 44. jQuery API – Do Something .show() .hide() .toggle()
  • 45. jQuery API – Do Something .show() 顯示元素 .hide() .toggle()
  • 46. jQuery API – Do Something .show() 顯示元素 .hide() 隱藏元素 .toggle()
  • 47. jQuery API – Do Something .show() 顯示元素 .hide() 隱藏元素 .toggle() 切換顯示或隱藏
  • 48. jQuery API – Do Something .css() .addClass() .removeClass() . toggleClass()
  • 49. jQuery API – Do Something .css() 設定樣式 .addClass() .removeClass() . toggleClass()
  • 50. jQuery API – Do Something .css() 設定樣式 .addClass() 新增 class .removeClass() . toggleClass()
  • 51. jQuery API – Do Something .css() 設定樣式 .addClass() 新增 class .removeClass() 移除 class . toggleClass()
  • 52. jQuery API – Do Something .css() 設定樣式 .addClass() 新增 class .removeClass() 移除 class . toggleClass() 切換 class
  • 53. jQuery API – Do Something . append() .html() .text()
  • 54. jQuery API – Do Something . append() 設定樣式 .html() .text()
  • 55. jQuery API – Do Something . append() 設定樣式 .html() 設定html .text()
  • 56. jQuery API – Do Something . append() 設定樣式 .html() 設定html .text() 設定Text 標籤語言無效只當作文字
  • 57. jQuery API – Do Something .click() .bind()
  • 58. jQuery API – Do Something .click() 點擊事件 .bind()
  • 59. jQuery API – Do Something .click() 點擊事件 .bind() 綁定事件 .unbind() 移除綁定事件
  • 60. jQuery API example
  • 61. jQuery API – Do Something 選取最後一個 <p>,並且修 class 屬性 原始的 HTML <p>Hello</p> <p>and</p> <p>Goodbye</p>
  • 62. jQuery API – Do Something 選取最後一個 <p>,並且修 class 屬性 原始的 HTML <p>Hello</p> <p>and</p> <p>Goodbye</p> $( "p:last" ).addClass( "selected highlight" );
  • 63. jQuery API – Do Something 選取最後一個 <p>,並且修 class 屬性 執行結果的 HTML <p>Hello</p> <p>and</p> <p class="selected highlight">Goodbye</p> $( "p:last" ).addClass( "selected highlight" );
  • 64. jQuery API – Do Something 選取 id 為 contents 的元素,並且修 css 屬性 原始的 HTML <div id="contents"> ... </div>
  • 65. jQuery API – Do Something 選取 id 為 contents 的元素,並且修 css 屬性 原始的 HTML <div id="contents"> ... </div> $("#contents").css({ border: “2px solid red", height: “60px" });
  • 66. jQuery API – Do Something 選取 id 為 contents 的元素,並且修 css 屬性 執行結果的 HTML <div id="contents” style="border: 2px solid red; height: 60px" > ... </div> $("#contents").css({ border: “2px solid red", height: “60px" });
  • 67. jQuery API – Do Something 選取所有有 target 屬性的<a> 並且在其節點下加入一段文字 原始的 HTML <a href="http://homakimi.com">Homakimi</a> <a href="http://google.com" target="_blank">Google</a> <a href="http://yahoo.com" target="_blank">Yahoo</a>
  • 68. jQuery API – Do Something 選取所有有 target 屬性的<a> 並且在其節點下加入一段文字 原始的 HTML <a href="http://homakimi.com">Homakimi</a> <a href="http://google.com" target="_blank">Google</a> <a href="http://yahoo.com" target="_blank">Yahoo</a> $("a[target]").append(" (blank)");
  • 69. jQuery API – Do Something 選取所有有 target 屬性的<a> 並且在其節點下加入一段文字 執行結果的 HTML <a href="http://homakimi.com">Homakimi</a> <a href="http://google.com" target="_blank">Google (blank)</a> <a href="http://yahoo.com" target="_blank">Yahoo (blank)</a> $("a[target]").append(" (blank)");
  • 70. jQuery API – Do Something 選取<div> 並修改HTML 原始的 HTML <span>Hello</span> <div></div>
  • 71. jQuery API – Do Something 選取<div> 並修改HTML 原始的 HTML <span>Hello</span> <div></div> $( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
  • 72. jQuery API – Do Something 選取<div> 並修改HTML 執行結果的 HTML <span>Hello</span> <div><span class='red'>Hello <b>Again</b></span></div> $( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
  • 73. jQuery API – Do Something 選取<div> 並修改Text 原始的 HTML <span>Hello</span> <div></div>
  • 74. jQuery API – Do Something 選取<div> 並修改Text 原始的 HTML <span>Hello</span> <div></div> $( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" );
  • 75. jQuery API – Do Something 選取<div> 並修改Text 執行結果的 HTML <span>Hello</span> <div>&lt;span class='red'&gt;Hello &lt;b&gt;Again&lt;/b&gt;&lt;/span&gt;</div> $( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" );
  • 76. jQuery API – Do Something 選取<div> 並修改Text 執行結果的 HTML <span>Hello</span> <div>&lt;span class='red'&gt;Hello &lt;b&gt;Again&lt;/b&gt;&lt;/span&gt;</div> $( "div" ).text( "<span class='red'>Hello <b>Again</b></span>" ); .html() 和 .text() 最大的不同 Text輸入的資料不會被執行 (避免XSS )
  • 77. jQuery API – Do Something 選取<button> 並設定click事件 原始的 HTML <button>I'm a Button</button>
  • 78. jQuery API – Do Something 選取<button> 並設定click事件 原始的 HTML <button>I'm a Button</button> $("button").click(function(){ alert(“You Just Clicked on a Button"); });
  • 79. Javascript Online
  • 80. Javascript Online http://jsfiddle.net/
  • 81. Javascript Online http://codepen.io/
  • 82. Javascript Online http://jsbin.com/
  • 83. jQuery API practice
  • 84. jQuery API http://goo.gl/JwAUZD show & hide http://codepen.io/phate/pen/sGAzl toggle http://codepen.io/phate/pen/pKtsu addClass & removeClass http://codepen.io/phate/pen/CEazJ toggleClass http://codepen.io/phate/pen/KAdEq css http://codepen.io/phate/pen/mErxt append/prepend http://codepen.io/phate/pen/AnKys html / text http://codepen.io/phate/pen/nHEDi
  • 85. Thank You! 羊小咩 Lamb Mei Lamb-mei@homakimi.com lamb@lamb-mei.com 2014 / 01 / 02