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