JavaScript 基础第十天

学习总结

1定时器

①．setTimeout() // 间隔多长时间执行一次（会返回一个数字型的标识）

②．setInterval() // 间隔多长时间执行，是不断地执行。

③．clearTimeout() // 清除定时器，括号里面放的是定时器的名称timeId

 

2 window.onload()

是window中的事件作用是等待页面加载结束后触发当前事件。

3 变量的作用域

在JS当中没有块级作用域，只有两个作用域。一个是全局作用域，另一个是局部作用域。

4 JS预解析机制

JS在代码执行之前，会进行预解析。把变量的声明，函数的声明，参数等提到作用域的最前面。（匿名函数的形式是类似于赋值表达式的所以不会提前）

5 offset系列

5.1 offset系列和demo.style系列的区别

①．Offset系列是用来得到对象的大小，相对于offset系列。demo.style只能获取元素的行内式样式，而offset可以获取元素的内嵌式样式。

②．demo.style是字符而offset是字符串。

③．demo.style用于设置行内样式而offset是只读属性不能设置样式。一般用offset获取二用demo.style设置

④．Offsetheight=padding+border+with而style.height则是设置width

⑤．offsetleft 是到达最近定位的父盒子的左侧或者顶部的距离，（外边到内边的距离即自身border到父元素padding 的距离）。如果父元素没有定位则以body为主。

 

offsetleft是以border的左上角为基准，而demo.style.left是以margin为基准的。

⑥．Offsetparent 返回当前对象最近带有定位的父元素，如果当前的父元素都没有定位则返回的是body

6 匀速动画

6.1 动画的原理

leader =  leader +step

Step 是根据自身需求所定义的，leader是动画开始是元素的位置，即初始位置。让定时器不断的执行某个函数修改盒子的位置属性最后就形成了动画的效果。

7  scrollHeight和scrollTop

7.1 srollHeight

获取被撑开的之后的大小width+padding

7.2 scrollTop

滚动出的距离，超出盒子上面的部分

7.3 获取页面滚动出去的距离

  ||之前是支持chrome，foxfire。后面则是兼容ie的。

ScrollTop =

document.body.scrollTop||document.documentElement.scrollTop

scrollLeft =

document.body.scrollLeft||document.documentElement.scrollLeft

8 缓动动画

缓动动画的内容就是在匀速动画的基础上不断改变每次的step的值让动画可以产生类似的一个动画效果。

9获取任意样式的值

Function getstyle(){

If(window.getComputerStyle){

return window.getComputerStyle(element,null)[attr];

}else{

Return element.currentStyle[attr];

}

}

10 事件参数e

当事件发生的时候，系统就会自动给事件处理函数传递一个参数，这个参数就是e。它会提供事件相关的一些数据。

11 e.clientX和e.pageX

e.clientX是获取鼠标在可视区域的位置。

e.pageX 是获取鼠标在页面中的位置。（在IE8中不支持e这个事件参数一般是使用window.event）

12 注册事件

12.1 行内式注册

12.2 匿名函数注册

12.3 addEventListener

btn.addEventListener("click",handle,false);