js进阶 03

1 快捷尺寸

源生

clientWidth clientHeight

offsetWidth offsetHeight

clientLeft clientTop

jquery

width() height()

innerWIdth() innerHeight()

outerWidth() outerHeight()

outerWidth(true) outerHeight(true)

2 定位父元素 offsetParent

3 定位值

offsetLeft offsetTop

jquery中 position（）

jquery中获取元素到页面之间的距离 offset()

4 scroll事件 监听卷动值的变化

页面卷动值 document.documentElement.scrollTop

scrollY

5 获取当前视口的宽高

document.documentElement.clientWidth

document.documentElement.clientHeight

获取当前页面的高度

document.documentElement.offsetHeight

6 鼠标滚轮事件

onmousewheel

通过e.wheelDelta 判断

向下 -120的倍数 向上 120的倍数

火狐不支持

DomMousesScroll事件

通过e.detail来判断

向下 3的倍数 向上 -3的倍数

7 键盘事件

keydown

keyup

keypress

事件对象中的属性 e.key e.keycode

tabindex html中的标准属性

决定了按下tab键 获取元素焦点的顺序

获取元素的其他方式

document.querySelector

document.querySelectorAll