第八章 Selector 與 Selectors API

關於選擇器

CSS3 較特別的是以 : (冒號)起始的虛擬類別語法

querySelector

只取得符合的第一個元素 , 像下方的 MVC經典範例便不會顯示

                            var d = document.querySelector('div#first-div');

HTML5完美風暴

呂高旭

$500

MVC經典範例

面試的200道題目

querySelectorAll

'#book_price>tbody>tr>td:nth-of-type(1)'

                            var d = document.querySelectorAll('p.title');
                                var str = '';
                                for (var i = 0; i < d.length; i++) {
                                    str += d[i].innerHTML;
                                }

選擇器語法

*
E
E.class
E#id

屬性選擇器

E[foo]	E元素中包含 foo屬性的元素
E[foo='bar']
E[foo~='bar text tool']	屬性值以空白分隔的清單
E[foo^='bar']	屬性值以bar開始
E[foo$='bar']	屬性值以bar結束
E[foo*='bar']	屬性值中包含bar
E[foo\|='en']	屬性值以連線字元分隔的清單, 以en開始

                            input[type='text'] {
                                background: black;
                            }

                            input[type='submit'] {
                                background: black;
                            }

結構虛擬類別
structural pseudo-classes

E:root	文件根元素E
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty

其他虛擬類別

E:link E:visited
E:active E:hover E:focus
E:target
E:lang
E:enabled E:disabled
E:checked
E:not(s)

結合器 (combinator)

E F	後代選擇器 (Descendant combinator) 元素E所包含的子元素 F
E > F	子選擇器 (Child combinator) 元素E的直接子元素F
E + F	相鄰選擇器 (Ajacent sibling combinator) E元素以後出現的F元素
E ~ F	(General sibling combinator) E元素之前出現的F元素

轉換
(Transform)

translate(x,y)
translateX(x)
translateY(y)

2D位置轉移效果

scale(x,y)
scaleX(x)
scaleY(y)

縮放

rotate(angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)

旋轉

skew(x-angle, y-angle)
skewX(angle)
skewY(angle)

斜切

none

matrix(n,n,n,n,n,n)

定義一個2D矩陣轉換

動畫 (Animations)

@keyframes
animation
animation-name
animation-duration	動畫執行時間長度
animation-timing-function
animation-delay
animation-iteration-count	重覆執行次數
animation-direction	動畫執行方向 normal (一般) reverse (反向) alternate (來回操作) alternate-reverse
animation-play-state

動畫事件

animationstart	開始
animationend	結束
animationiteration	動畫重覆時 , 每一次動畫重新開始會觸發