用 jQuery 玩弄你的網頁 (2)

kewang

Agenda

● JavaScript Library● $() function● Event Handling● Effects

3

JavaScript Library

4

讓工作更快速！

5

跨瀏覽器更簡單！

6

寫的少做的多！

JavaScript Library

● jQuery● Prototype● YUI

8

什麼是 jQuery ?

9

什麼是 jQuery ?

● 開放原始碼的 JavaScript Library● 支援大部分的瀏覽器 ( 包括 IE)● 檔案很小 (15KB)● 擴充容易● 各大網站愛用 ( 包括 MS)● 無縫連結其他 Library

10

什麼是 jQuery ?

11

$() function

12

$() function

● jQuery wrapper (based on CSS Selector)● 公用函式● document.ready● 建立 DOM 元素● 擴展 jQuery

13

用傳統方式存取 DOM 元素

14

用 jQuery 存取 DOM 元素

15

jQuery Core

16

size() / length

17

each(fn)

18

get()

19

Attributes

20

attr(name)

21

attr(key, value)

22

attr(properties)

23

attr(key, fn)

24

addClass(class)

25

hasClass(class)

26

removeClass(class)

27

toggleClass(class)

28

Set/Get html

29

Set/Get text

30

Set/Get value

31

empty()

32

CSS

33

css(name)

34

css(name, value)

35

css(properties)

36

Set/Get Height & Width

37

Events - ready()

38

ready()

39

ready()

40

Events

41

click()/click(fn)

42

hover(over, out)

43

toggle(fn, fn2[, fn3, ...])

44

bind(type[, data], fn) / trigger(event)

45

Effects

46

hide() / hide(speed[, callback])

47

Effects - Basic

48

Effects - Sliding

49

Effects - Fading

50

Ajax

51

Ajax - 傳統寫法

52

Ajax - jQuery 寫法

53

GET vs POST

● GET– 用來取得 server 端的

資料。– 如：資料庫的 read

● POST– 用來變更 server 端的

狀態。– 如：資料庫的 create,

update, delete

54

get(url[, data][, callback][, type])

55

post(url[, data][, callback][, type])

56

getJSON(url[, data][, callback][, type])

57

UI

58

UI

● Draggable● Droppable● Resizable● Selectable● Sortable

● Accordion● Datepicker● Dialog● Progressbar● Slider● Tabs

● Blind

● Bounce

● Clip

● Drop

● Explode

● Fold

● Highlight

● Pulsate

● Scale

● Shake

● Slide

● Transfer

59

Accordion

60

Datepicker

61

Dialog

62

Progressbar

63

Slider

64

Tabs

65

10 tips

66

Be lazy

67

Use shortcut

68

Chain

69

Group queries

70

Select siblings like a pro

71

Use each and map

72

Use namespaces

73

triggerHandler is great

74

Custom events

75

Test

76

兩天的魔鬼訓練總算結束啦！！！