用 jQuery 玩弄你的網頁 (2)
kewang

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

JavaScript
Library
3

讓工作更快速！
4

跨瀏覽器更簡單！
5

寫的少做的多！
6

JavaScript Library
●
jQuery
●
Prototype
●
YUI

什麼是 jQuery ?
8

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

什麼是 jQuery ?
10

$() function
11

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

用傳統方式存取 DOM 元素
13

用 jQuery 存取 DOM 元素
14

jQuery Core
15

size() / length
16

each(fn)
17

get()
18

Attributes
19

attr(name)
20

attr(key, value)
21

attr(properties)
22

attr(key, fn)
23

addClass(class)
24

hasClass(class)
25

removeClass(class)
26

toggleClass(class)
27

Set/Get html
28

Set/Get text
29

Set/Get value
30

empty()
31

CSS
32

css(name)
33

css(name, value)
34

css(properties)
35

Set/Get Height & Width
36

Events - ready()
37

ready()
38

ready()
39

Events
40

click()/click(fn)
41

hover(over, out)
42

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

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

Effects
45

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

Effects - Basic
47

Effects - Sliding
48

Effects - Fading
49

Ajax
50

Ajax - 傳統寫法
51

Ajax - jQuery 寫法
52

GET vs POST
●
GET ●
POST
– 用來取得 server 端的 – 用來變更 server 端的
資料。 狀態。
– 如：資料庫的 read – 如：資料庫的 create,
update, delete
53

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

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

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

UI
57

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

Accordion
59

Datepicker
60

Dialog
61

Progressbar
62

Slider
63

Tabs
64

10 tips
65

Be lazy
66

Use shortcut
67

Chain
68

Group queries
69

Select siblings like a pro
70

Use each and map
71

Use namespaces
72

triggerHandler is great
73

Custom events
74

Test
75

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