用 jQuery 玩弄你的網頁 (1)
       kewang
Agenda
●
    JavaScript
●
    DOM
●
    CSS Selector




                            2
JavaScript

             3
10 年前 ...

            4
網站建置百寶箱




          5
網站建置百寶箱




          6
工欲善其事,必先利其器
●
    Firefox 系列
       –   Web Developer + Firebug
●
    IE 系列
       –   IE Developer Toolbar
●
    IE6 belo...
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
Upcoming SlideShare
Loading in...5
×

用jQuery玩弄你的網頁1

2,086

Published on

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,086
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
52
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

用jQuery玩弄你的網頁1

  1. 1. 用 jQuery 玩弄你的網頁 (1) kewang
  2. 2. Agenda ● JavaScript ● DOM ● CSS Selector 2
  3. 3. JavaScript 3
  4. 4. 10 年前 ... 4
  5. 5. 網站建置百寶箱 5
  6. 6. 網站建置百寶箱 6
  7. 7. 工欲善其事,必先利其器 ● Firefox 系列 – Web Developer + Firebug ● IE 系列 – IE Developer Toolbar ● IE6 below – ...... 投降 7
  8. 8. Hello World 8
  9. 9. Hello Maxense 9
  10. 10. Variables 10
  11. 11. Function 11
  12. 12. Confirm 12
  13. 13. Prompt 13
  14. 14. Document Object Model 14
  15. 15. DOM tree ● Document Object Model ● 操作所有在網頁上的物件 15
  16. 16. DOM - document 16
  17. 17. DOM - document 17
  18. 18. DOM Level 0 Event Model 18
  19. 19. DOM Level 0 Event Model 19
  20. 20. DOM Level 0 Event Model 20
  21. 21. DOM Level 0 Event Model 21
  22. 22. DOM Level 2 Event Model 22
  23. 23. DOM Level 2 Event Model 23
  24. 24. Internet Explorer Event Model 24
  25. 25. Internet Explorer Event Model 25
  26. 26. addEvent() by Koch 26
  27. 27. Unobtrusive JavaScript 27
  28. 28. Unobtrusive JavaScript 28
  29. 29. Unobtrusive JavaScript Graceful Degradation 29
  30. 30. CSS Selector 30
  31. 31. CSS Selector ● 和 DOM 相輔相成 ● 利用 CSS 的特性,操作網頁上的所有物件 31
  32. 32. CSS Selector - #id 32
  33. 33. CSS Selector - element 33
  34. 34. CSS Selector - .class 34
  35. 35. CSS Selector - .class.class 35
  36. 36. CSS Selector - * 36
  37. 37. CSS Selector - multi-selector 37
  38. 38. CSS Selector - ancestor descendant 38
  39. 39. CSS Selector - parent > child 39
  40. 40. CSS Selector - prev + next 40
  41. 41. CSS Selector - prev ~ siblings 41
  42. 42. CSS Selector - Basic Filters 42
  43. 43. CSS Selector - :even 43
  44. 44. CSS Selector - :eq 44
  45. 45. CSS Selector - Content Filters 45
  46. 46. CSS Selector - :contains(text) 46
  47. 47. CSS Selector - :has(selector) 47
  48. 48. CSS Selector - Visibility Filters 48
  49. 49. CSS Selector - Attribute Filters 49
  50. 50. CSS Selector - [attribute] 50
  51. 51. CSS Selector - [attribute=value] 51
  52. 52. CSS Selector - [attribute^=value] 52
  53. 53. CSS Selector - multi-attribute 53
  54. 54. CSS Selector - Child Filters 54
  55. 55. CSS Selector - :nth-child 55
  56. 56. CSS Selector - :only-child 56
  57. 57. CSS Selector - Forms 57
  58. 58. CSS Selector - :text 58
  59. 59. CSS Selector - :radio 59
  60. 60. CSS Selector - Form Filters 60
  61. 61. CSS Selector - :enabled 61
  62. 62. CSS Selector - :checked 62
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×