Javascript-BOM‘和动画

最新推荐文章于 2022-10-19 16:09:55 发布

头发又掉了一根

最新推荐文章于 2022-10-19 16:09:55 发布

阅读量155

点赞数

分类专栏： Web 全栈开发（前端） VS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47766667/article/details/115538996

版权

Web 全栈开发（前端）同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

————————————
JavaScript··[API]

「BOM」「动画」
————————————

BOM

DOM

文档对象模型
DOM将文档当做一个对象来处理
DOM的顶级对象是document
主要学习的是对页面元素的操作
DOM是W3C标准规范

BOM

浏览器对象模型
将浏览器当做一个对象来处理
BOM的顶级对象是window
学习的是浏览器窗口交互的一些对象
是浏览器厂家在格子浏览器上定义的规范

BOM的构成

BOM是比DOM更大的盒子对象

window对象：document、location、navigation、screen、history

顶级对象window

window对象是浏览器的顶级对象，具有双重角色

JS访问浏览器窗口的一个接口
是一个全局对象，声明的所有的全局变量，全局方法函数最终都是window对象的属性或者方法

注意：理解为全局的变量和方法函数在调用的时候其实是省略了window.操作

Window对象的常见事件

窗口加载事件

window.οnlοad=function(){}

window.addEventListener(“load”,function(){});

onload事件是页面的加载事件，当文档内容(包含图像、脚本文件、css文件等)全部加载完成会触发的事件

文档加载事件

window.addEventListener("DOMContentLoaded",function(){
            console.log(document.querySelector("h1"));
        })

DOMContentLoaded也是一个加载事件，文档加载事件，只需要考虑DOM元素(不包含图片、css、flash等)加载完成，IE9以上

窗口大小改变事件

window.οnresize=function(){}

如果调整窗口大小则时间被触发，这个事件经常被用作处理响应式布局

定时器事件(两种)

setTimeout();

serInterval();

setTimeout()定时炸弹

使用时指定一个时间段，只要时间到了直接执行绑定函数

window.setTimeout(function(){
            alert("hello");
        },3000)

第一个参数：事件所执行的函数；

第二个参数：时间间隔以毫秒为单位

注意：

绑定函数，回调函数callback，这个函数可以直接写在方法参数所在位置，还可以采取字符串"函数名()"，还可以直接写函数名，三种调用方式，不推荐使用字符串方式
延迟的毫秒数可以省略，默认为0，如果写必须是毫秒
如果定时器比较多的话，可以给每个定时器一个标识符

停止定时器

window.clearTimeout(second);

方法取消了先前通过调用setTimeout建立的定时器，参数就是要停止的定时器的标识符

serInterval()闹钟定时器

使用时指定一个时间段，然后每隔这个时间段都会调用一次回调函数

        var i=0;
        window.setInterval(function(){
            console.log(i);
            i++;
        },1000);

哪怕是第一次执行回调函数也是在时间到了之后执行的

停止定时器

window.clearInterval(id)

location对象

window对象给我们提供了一个location属性，这个对象主要用于获取或设置窗体的url地址，并且可以用于解析url。

URL

同一资源定位符(Uniform Resource Location)是互联网上的标准资源地址，网络所有的数据都以文件形式保存，每个文件在网络世界中都有一个唯一的URL，它包含的信息指出文件的所在位置及浏览器的处理方式

url语法：

protocol://host[:port]/path/…

http://www.yltedu.com/…

protocol:协议类型，通信协议http、ftp、mailto等

host:主机名称(域名)

port：端口号可选，如果省略使用的是默认的端口，http默认的端口号是 80

path：路径由0个或多个"/"+文件地址等组成，表示主机上的文件地址目录

属性

href：获取或设置一个url
host：返回主机(域名)
port：返回端口号，如果未写返回空字符串
pathname：返回路径
search：返回参数，URL参数是指URL地址中网址之后的?以后
hash：返回片段，URL中#后面的内容

方法

assign()：和href一样，可以跳转页面，重定向跳转
replace()：替换当前页面，不记录入历史中，所以不能后退页面
reload()：重新载入页面，相当于刷新按钮，如果参数为true相当于强制刷新

navigation对象

navigation对象主要是记录有关浏览器的信息，常用的属性userAgent，这个属性可以返回由客户端发送至服务器的user-agent头部的值

history对象

window对象为提供的一个history对象来进行与浏览器的历史记录进行交互，

常见用法

back()：实现浏览器后退功能
forward()：实现浏览器的前进功能
go(参数)：前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面，如果是N则前进或后退N个页面

元素偏移量offset系列

offset概述

offset相关的属性可以动态的得到元素的位置(偏移)、大小等

获得元素距离带有定位的父元素的位置
获得元素自身的大小(高度和宽度)
注意：返回的数据都是不带单位的数字类型

offset系列属性

offsetParent：返回作为该元素带有定位的父元素，如果父元素无定位返回的是body
offsetTop：返回元素相对于带有定位的父元素的上方的偏移量
offsetLeft：返回元素相对于带有定位的父元素的左方的偏移量
offsetWidth：返回元素自身包括padding、边框、内容区域的宽度
offsetHeight：返回元素自身包括padding、边框、内容区域的宽度

offset和style区别

offset：

可以得到任意样式表中的样式值
获得的数值没有单位
offsetWidth包含：padding+border+width
offsetWidth等属性是只读属性，无法设置数据

读取元素的位置大小等使用offset读取

style：

只能得到行内样式表的样式值
style.width获得的是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读可写属性，可以取值也可以设置值

给元素设置或更改值，使用style设置

元素可视区client系列

client概述

client是客户端。使用client系列的相关属性用来获取元素可视区的相关信息，通过client系列属性可以动态的获得该元素的边框大小、元素大小

clientTop：获取元素的上边框的大小
clientLeft：获取元素的左边框的大小
clientWidth：返回自身的padding，内容区宽度，不含边框，返回数据不带单位
clientHeight：返回自身的padding，内容区高度，不含边框，返回数据不带单位

元素滚动scroll系列

scroll概述

是控制页面滚动，使用scroll系列属性可以动态的获取该元素的大小，滚动距离等

scrollTop：返回被卷到上侧的距离

scrollLeft：返回被卷到左侧的距离

scrollWidth：返回自身的实际宽度，不含边框

scrollHeight：返回自身的实际高度，不含边框

页面被卷去的部分

如果浏览器的高或者宽不足以显示整个页面时，会自动出现滚动条，当滚动条向下滚动时，页面上部会被逐渐隐藏，隐藏的页面高度就是卷上去的部分，称为页面被卷去的头部，滚动条在滚动的时候会触发onscroll事件

scroll兼容性解决方案

页面被卷上去的属性有兼容性问题，pageYOffset属性在IE9之后才有的

        function Scroll(){
            this.left=(window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0);
            this.top=(window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0);
        }

三个系列总结

offsetWidth：返回自身的包括padding、border、内容宽度，返回数值不带单位

clientWidth：返回自身的包括padding、内容宽度，不包括边框

scrollWidth：返回自身实际的宽度，不包含边框，实际宽度包括被卷走的

三大系列注意点

offset系列经常用于获得元素的位置
client系列经常用于获取元素的大小
scroll系列经常用于获取滚动距离

mouseenter和mouseover区别

mouseenter：鼠标经过自身盒子触发【不会导致冒泡】
mouseover：鼠标经过元素自身会触发，经过子盒子也会触发【会导致冒泡】

JS的执行机制

        console.log(1);
        setTimeout(function(){
            console.log(3);
        },1000);
        console.log(2);
		//结果为 1，2，3
        
        console.log(1);
        setTimeout(function(){
            console.log(3);
        },0);
        console.log(2);
		//结果为 1，2，3