Upload
mu-chun-wang
View
2.044
Download
2
Embed Size (px)
Citation preview
用 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