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

592 views
502 views

Published on

jQuery 教學

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
592
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

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

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

×