用jQuery玩弄你的網頁1

用 jQuery 玩弄你的網頁 (1)

kewang

2

Agenda

● JavaScript● DOM● CSS Selector

3

JavaScript

4

10 年前 ...

5

網站建置百寶箱

6

網站建置百寶箱

7

工欲善其事，必先利其器

● Firefox 系列– Web Developer + Firebug

● IE 系列– IE Developer Toolbar

● IE6 below– ...... 投降

8

Hello World

9

Hello Maxense

10

Variables

11

Function

12

Confirm

13

Prompt

14

Document Object Model

15

DOM tree

● Document Object Model● 操作所有在網頁上的物件

16

DOM - document

17

DOM - document

18

DOM Level 0 Event Model

19

DOM Level 0 Event Model

20

DOM Level 0 Event Model

21

DOM Level 0 Event Model

22

DOM Level 2 Event Model

23

DOM Level 2 Event Model

24

Internet Explorer Event

Model

25

Internet Explorer Event Model

26

addEvent() by Koch

27

Unobtrusive JavaScript

28

Unobtrusive JavaScript

29

Unobtrusive JavaScript

Graceful Degradation

30

CSS Selector

31

CSS Selector

● 和 DOM 相輔相成● 利用 CSS 的特性，操作網頁上的所有物件

32

CSS Selector - #id

33

CSS Selector - element

34

CSS Selector - .class

35

CSS Selector - .class.class

36

CSS Selector - *

37

CSS Selector - multi-selector

38

CSS Selector - ancestor descendant

39

CSS Selector - parent > child

40

CSS Selector - prev + next

41

CSS Selector - prev ~ siblings

42

CSS Selector - Basic Filters

43

CSS Selector - :even

44

CSS Selector - :eq

45

CSS Selector - Content Filters

46

CSS Selector - :contains(text)

47

CSS Selector - :has(selector)

48

CSS Selector - Visibility Filters

49

CSS Selector - Attribute Filters

50

CSS Selector - [attribute]

51

CSS Selector - [attribute=value]

52

CSS Selector - [attribute^=value]

53

CSS Selector - multi-attribute

54

CSS Selector - Child Filters

55

CSS Selector - :nth-child

56

CSS Selector - :only-child

57

CSS Selector - Forms

58

CSS Selector - :text

59

CSS Selector - :radio

60

CSS Selector - Form Filters

61

CSS Selector - :enabled

62

CSS Selector - :checked