用jQuery玩弄你的網頁2

2,755 views

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,755
On SlideShare
0
From Embeds
0
Number of Embeds
214
Actions
Shares
0
Downloads
55
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

用jQuery玩弄你的網頁2

  1. 1. 用 jQuery 玩弄你的網頁 (2) kewang
  2. 2. Agenda ● JavaScript Library ● $() function ● Event Handling ● Effects
  3. 3. JavaScript Library 3
  4. 4. 讓工作更快速! 4
  5. 5. 跨瀏覽器更簡單! 5
  6. 6. 寫的少做的多! 6
  7. 7. JavaScript Library ● jQuery ● Prototype ● YUI
  8. 8. 什麼是 jQuery ? 8
  9. 9. 什麼是 jQuery ? ● 開放原始碼的 JavaScript Library ● 支援大部分的瀏覽器 ( 包括 IE) ● 檔案很小 (15KB) ● 擴充容易 ● 各大網站愛用 ( 包括 MS) ● 無縫連結其他 Library 9
  10. 10. 什麼是 jQuery ? 10
  11. 11. $() function 11
  12. 12. $() function ● jQuery wrapper (based on CSS Selector) ● 公用函式 ● document.ready ● 建立 DOM 元素 ● 擴展 jQuery 12
  13. 13. 用傳統方式存取 DOM 元素 13
  14. 14. 用 jQuery 存取 DOM 元素 14
  15. 15. jQuery Core 15
  16. 16. size() / length 16
  17. 17. each(fn) 17
  18. 18. get() 18
  19. 19. Attributes 19
  20. 20. attr(name) 20
  21. 21. attr(key, value) 21
  22. 22. attr(properties) 22
  23. 23. attr(key, fn) 23
  24. 24. addClass(class) 24
  25. 25. hasClass(class) 25
  26. 26. removeClass(class) 26
  27. 27. toggleClass(class) 27
  28. 28. Set/Get html 28
  29. 29. Set/Get text 29
  30. 30. Set/Get value 30
  31. 31. empty() 31
  32. 32. CSS 32
  33. 33. css(name) 33
  34. 34. css(name, value) 34
  35. 35. css(properties) 35
  36. 36. Set/Get Height & Width 36
  37. 37. Events - ready() 37
  38. 38. ready() 38
  39. 39. ready() 39
  40. 40. Events 40
  41. 41. click()/click(fn) 41
  42. 42. hover(over, out) 42
  43. 43. toggle(fn, fn2[, fn3, ...]) 43
  44. 44. bind(type[, data], fn) / trigger(event) 44
  45. 45. Effects 45
  46. 46. hide() / hide(speed[, callback]) 46
  47. 47. Effects - Basic 47
  48. 48. Effects - Sliding 48
  49. 49. Effects - Fading 49
  50. 50. Ajax 50
  51. 51. Ajax - 傳統寫法 51
  52. 52. Ajax - jQuery 寫法 52
  53. 53. GET vs POST ● GET ● POST – 用來取得 server 端的 – 用來變更 server 端的 資料。 狀態。 – 如:資料庫的 read – 如:資料庫的 create, update, delete 53
  54. 54. get(url[, data][, callback][, type]) 54
  55. 55. post(url[, data][, callback][, type]) 55
  56. 56. getJSON(url[, data][, callback][, type]) 56
  57. 57. UI 57
  58. 58. UI ● Draggable ● Accordion ● Blind ● Bounce ● Droppable ● Datepicker ● Clip ● Resizable ● Dialog ● Drop ● Selectable ● Progressbar ● Explode ● Sortable ● Slider ● Fold ● Tabs ● Highlight ● Pulsate ● Scale ● Shake ● Slide 58 ● Transfer
  59. 59. Accordion 59
  60. 60. Datepicker 60
  61. 61. Dialog 61
  62. 62. Progressbar 62
  63. 63. Slider 63
  64. 64. Tabs 64
  65. 65. 10 tips 65
  66. 66. Be lazy 66
  67. 67. Use shortcut 67
  68. 68. Chain 68
  69. 69. Group queries 69
  70. 70. Select siblings like a pro 70
  71. 71. Use each and map 71
  72. 72. Use namespaces 72
  73. 73. triggerHandler is great 73
  74. 74. Custom events 74
  75. 75. Test 75
  76. 76. 兩天的魔鬼訓練總 算結束啦!!! 76

×