Your SlideShare is downloading. ×
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
用jQuery玩弄你的網頁2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

用jQuery玩弄你的網頁2

2,500

Published on

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

No Downloads
Views
Total Views
2,500
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
53
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×