webAPI 第五天 --- 延时器,定时器,offset系列

这节知识中最重要的是我们的延时器和定时器,但是还有我们的一些细小的知识点需要了解

BOM : 浏览器对象模型,提供了一套操作浏览器的工具

  BOM包含的内容很多,但是东西都不太常用,定时器是最重要的

一.window对象

window是个全局对象   顶端对象  全局变量或者函数都是window的属性     window一般都会省略

1.window.onload

窗体加载完成会执行

窗体加载  --- html  图片  文件等这些资源加载

以后想要获取图片的宽高  => 在onload里面获取

2.open和close

open : 新开一个窗口  --window.open()

    1. 窗口的ur地址i

    2. 窗口名称或者target属性 _blank

    3.窗口的属性

     返回值 : 新窗口的名称

var newWin = window.open("http://www.baidu.com","_blank", "width=300,height=300");

close 关闭窗口

    1. window.close( ) 关闭当前窗口

    2. newWin.close( )  关闭新开的窗口

二.延时器和定时器

1.延时器setTimeOut()

    1.  结构: setTimeOut(参数1,参数2) , 

             参数1 :回调函数,延迟一段时间后要执行的函数

             参数2 : 间隔的事件    毫秒单位

    2.  作用 : 延迟一段时间执行代码

    3.  返回值 :timerId 

            作用:清除延时器     clearTimeOut()                        

2.定时器

    1.  结构: setInterval(参数1,参数2) , 

             参数1 :回调函数,间隔一段时间后要执行的函数

             参数2 : 间隔的事件    毫秒单位

    2.  作用 : 间隔一段时间执行代码

    3.  返回值 :timerId 

            作用:清除延时器     clearterval()     

三.其他对象

1.location对象 --- 控制浏览器的地址栏

location.href = 地址栏的ur地址   改变URL地址

location.reload() 加载刷新

2.history -- 历史网页

history.back( ) 后退

history.forward( ) 前进

histroy.go( ) :  go(1) 前进    go(0) 后退

四.screen系列

width            宽度
height           高度
availWidth    有效宽度
availHeight   有效高度

五.offset系列

offsetWidth     获取元素真实的宽度
offsetHeight    获取元素真实的高度
offsetParent    最近的定位元素(父元素)
offsetLeft         获取 自身左侧到offsetparent左侧的距离
offsetTop         获取 自身顶部到offsetParent顶部的距离
总结
    1. offset系列获取的数值类型,, 计算方便
    2. 大总结
        获取宽度/位置    offset系列    数值类型
        设置宽度/位置    tyle系列        字符串类型

 切记: 别忘了定位

发布了64 篇原创文章 · 获赞 19 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44114310/article/details/88781932