WebAPI 之 BOM

BOM(Browser Object Model):浏览器对象模型,核心对象window。


API(Application Programming Interface):应用程序编程,提供函数库。
Web API:是浏览器提供的一套浏览器功能(BOM)和页面元素(DOM)的API。

window包含下列对象:document,location,navagation,screen,history

1、window对象


window是JS访问浏览器窗口的一个接口,并且是一个全局对象,定义在全局作用域中的变量和函数都会变成window对象的属性和方法。

1.1window.onload

窗口加载事件,文档内容全部完成加载后触发

1.2DOMContentLoad

DOM加载完成后触发,不包括CSS样式,图片,flash等(IE9+)

1.3window.onresize

调整窗口大小时触发

1.4window.innerWidth

当前屏幕的宽度

1.5TimeOut(定时器)

1)设定:window.setTimeOut('调用函数',延迟时间);

2)清除:window.clearTimeOut('定时器ID')

1.6Interval(间隔器)

1)设置:window.setInterval('回调函数',间隔时间);

2)清楚:window.clearInterval('间隔器ID');

2、location对象

获取或设置窗体的URL,并可以用于解释URL。

2.1location.href:获取或设置整个URL

2.2location.host:主机(域名)

2.3location.port:端口号

2.4location.pathname:路径

2.5location.search:参数

2.6location.hash:片段,#后面内容,常用于链接和描点

2.7location.assign():与href一样,可以跳转页面,也称为重定向,能后退 ※

2.8location.replace():替换当前页面,无历史记录,不能后退页面

2.9location.reload():重新加载页面(F5),true:强制刷新页面(ctrl+F5),去缓存 ※

3、navigation对象

包含浏览器信息,最为常用的是userAgent属性,该属性可以返回有客户端发送服务器的user-agent头部值,浏览器类型,版本号,操作系统等信息。

(可区分移动端,PC端)※

4、history对象

与浏览器历史纪录进行交互,该对象包含用户访问过的URL。

4.1back():后退功能

4.2forward:前进功能

4.3go(参数):前进或后退功能,1:前进一个页面,-1后退一个页面。

5、offset

偏移量,可以动态的获取元素距离有定位的父元素的位置(偏移)及自身的大小等。(只读)

5.1element.offsetParent;

获取元素有定位的父元素,没有父元素则返回body元素(获取没有定位的父元素用parentNode)

5.2element.offsetTop;

距离有定位的父元素的上方偏移

5.3element.offsetLef;

距离有定位的父元素的左侧偏移

5.4element.offseWit;

自身的宽度,包括:padding、border、内容区的宽度

5.5element.offsetHeight;

自身的高度,包括:padding、border、内容区的高度

注意:获取用offset,设定用style!

6、Client

获取元素可视区的相关信息,动态获取该元素的边框大小、元素大小。

6.1element.clientTop;

元素上边框大小

6.2element.clientLeft;

左边框大小

6.3element.clientWidth;

自身的宽度,包括:padding、内容区宽度,不包括border

6.4element.clientHeight

自身的高度,包括:padding、内容区高度,不包括border

7、Scroll

动态获取该元素的大小,滚动距离等

7.1element.scrollTop;

被卷去的上侧距离(滚动条向下滚动时,顶部被遮盖住的距离)

7.2element.scrollLeft;

被卷去的左侧距离(滚动条向右滚动时,左侧被遮盖住的距离)

7.3element.scrollWidth;

自身的宽度,包含:padding、内容区宽度,不包含border

7.4element.scrollHeight;

自身的高度,包含:padding、内容区高度,不包含border

注意:元素被卷去用scroll.Top,页面被卷去用window.pageYOffset

8、补充内容

8.1立即执行函数

不需要调用,能够自己执行的函数。

语法:(function(){  })();  或  (function(){}())

作用:创建一个独立的作用域,可以避免命名冲突等问题。

8.2mouseover和mouseenter区别

1)mouseenter:

鼠标经过自身盒子会触发,经过子盒子还会触发。(冒泡)

2)mouseenter:

只在经过自身盒子时才会触发。(不冒泡)

你可能感兴趣的:(JS系列)