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

Agenda
●
JavaScript
●
DOM
●
CSS Selector
2

JavaScript
3

10 年前 ...
4

網站建置百寶箱
5

網站建置百寶箱
6

工欲善其事，必先利其器
●
Firefox 系列
– Web Developer + Firebug
●
IE 系列
– IE Developer Toolbar
●
IE6 below
– ...... 投降
7

Hello World
8

Hello Maxense
9

Variables
10

Function
11

Confirm
12

Prompt
13

Document
Object Model
14

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

DOM - document
16

DOM - document
17

DOM Level 0
Event Model
18

DOM Level 0 Event Model
19

DOM Level 0 Event Model
20

DOM Level 0 Event Model
21

DOM Level 2
Event Model
22

DOM Level 2 Event Model
23

Internet
Explorer Event
Model
24

Internet Explorer Event Model
25

addEvent() by Koch
26

Unobtrusive
JavaScript
27

Unobtrusive JavaScript
28

Unobtrusive JavaScript
Graceful Degradation
29

CSS Selector
30

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

CSS Selector - #id
32

CSS Selector - element
33

CSS Selector - .class
34

CSS Selector - .class.class
35

CSS Selector - *
36

CSS Selector - multi-selector
37

CSS Selector - ancestor
descendant
38

CSS Selector - parent > child
39

CSS Selector - prev + next
40

CSS Selector - prev ~ siblings
41

CSS Selector - Basic Filters
42

CSS Selector - :even
43

CSS Selector - :eq
44

CSS Selector - Content Filters
45

CSS Selector - :contains(text)
46

CSS Selector - :has(selector)
47

CSS Selector - Visibility Filters
48

CSS Selector - Attribute Filters
49

CSS Selector - [attribute]
50

CSS Selector - [attribute=value]
51

CSS Selector - [attribute^=value]
52

CSS Selector - multi-attribute
53

CSS Selector - Child Filters
54

CSS Selector - :nth-child
55

CSS Selector - :only-child
56

CSS Selector - Forms
57

CSS Selector - :text
58

CSS Selector - :radio
59

CSS Selector - Form Filters
60

CSS Selector - :enabled
61

CSS Selector - :checked
62