js——BOM

BOM的构成

window 对象是浏览器的顶级对象

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

窗口加载事件

load

//1. 传统注册方式只能写一次,如有多个,会以最后一个window.onload 为准
window.onload = function() {
    
    }
//2. 
window.addEventListener('load', function() {
    
    });

document.addEventListener('DOMContentLoaded', function() {
    
    });

load 等页面内容全部加载完毕, 包含页面dom 元素,图片,flash,css等

DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等,加载速度比 load 更快.

调整窗口大小事件

window.onresize = function() {
    
    }
// 只要窗口大小发生像素变化, 就会触发这个事件
window.addEventListener('resize', function() {
    
    
    window.innerWidth //当前屏幕的宽度
});

定时器

1. window.setTimeout(调用函数, [延迟时间]);
定时器到期后(延迟时间到了)执行调用函数
eg:
setTimeout(function() {
    
    },1000);
2. window.setInterval(调用函数, 间隔的毫秒数);
重复调用一个函数,每隔这个时间,就去调用一次回调函数
eg:
setInterval(function() {
    
    }, 1000);
//1. window 可以省略
//2. 延时时间的单位是毫秒,如果省略不写默认为0
//3. 调用函数可以直接写 函数 也可以写函数名(注意!!是函数名没有括号),也可以写成 '函数名()'
//4. 页面中可能有很多的定时器,我们经常给定时器加标识符

//停止定时器
window.clearTimeout(timeID)
window.clearInterval(timeID)
// window 可以省略
// 参数是定时器的标识符
//eg: 有begin 和 stop 两个按钮,控制定时器的开关
var timer = null; //全局变量, null是一个空对象
begin.addEventListener('click', function() {
    timer = setInterval(function() {}, 1000);
});
stop.addEventListener('click', function() {
    clearInterval(timer);
});

JS执行机制

同步任务

同步任务都在主线程上执行,形成一个执行栈.

异步任务

JS的异步是通过回调函数实现的.一般来说,有这三种类型:

普通事件,如 click, resize
资源加载,如 load, error
定时器, setInterval, setTimeout

先执行 执行栈中的同步任务.
异步任务(回调函数)放入任务队列中
一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务, 被读取的异步任务结束等待状态, 进入执行栈,开始执行.

扫描二维码关注公众号，回复： 15950281 查看本文章

location对象

URL

protocol://host[:port]/path/[?query]#fragment

属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机(域名)
location.port	返回端口号如果未写返回空字符串
location.pathnam	返回路径
location.search	返回参数
location.hash	返回片段 #后谜案内容常见于链接锚点

跳转页面

location.href = '链接地址'

<form action="url地址"> //规定当提交表单时，向何处发送表单数据
用户名: <input type="text" value="输入内容" name="uname">
<button></button>
</form>
//页面跳转后,会传递 ?uname="value" 这个参数
var params = location.search.substr(1); //uname="value"
var arr = params.split("="); //["uname","value"]
arr[1]  //即可获取上个页面的参数

常见方法

location对象	返回值
location.assign(‘地址’)	跟 href 一样,可以跳转页面,记录浏览历史,可以后退
location.replace()	替换当前页面,不记录浏览历史,不能后退
location.reload()	重新加载页面,相当于刷新按钮或者 f5 ,如果参数为true 强制刷新 ctrl+f5

navigator.user-agent(了解)

history
history.forward()	前进功能
history.back()	后退功能
history.go(参数)	前进后退功能参数是 1 前进一个页面

offset

获得元素距离带有定位父元素的位置
获得元素自身的大小

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素,如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding,边框,内容区的宽度,返回值不带单位
element.offsetHeight	返回自身包括padding,边框,内容区的高度,返回值不带单位

offset 与 style 的区别

offset 可以得到任意样式表中的样式值	style只能得到行内样式表中的样式值
offset 系列获得的数值是没有单位的	style.width 获得的是带有单位的字符串
offsetWidth 包含padding+border+width	style.width 获得不包含padding和border 的值
offsetWidth等属性是只读属性,只能获取不能赋值	style.width是可读写属性,可以获取可以赋值

client

element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括的padding,内容的宽度,不含边框,返回值不带单位
element.clientHeight	返回自身包括的padding,内容的高度,不含边框,返回值不带单位

立即执行函数

(function() {
    
    })()  或者  (function(){
    
    }())
//第二个小括号可以看做是调用函数,可以传递参数
//多个立即执行函数用 ; 隔开

不需要调用,立即执行

创建了一个独立的作用域,避免了命名冲突问题

scroll

element.scrollTop	返回被卷去的上侧距离,返回值不带单位
element.scrollLeft	返回被卷去的左侧距离,返回值不带单位
element.scrollWidth	返回自身实际的高度,不含边框,返回值不带单位
element.scrollHeight	返回自身实际的高度,不含边框,返回值不带单位

div.addEventListener('scroll', function() {
    
    
    this.scrollTop
    ...
    window.pageYOffset // 页面被卷去的距离 
})

mouseover 与 mouseenter

区别:

mouseover 鼠标经过自身盒子会触发, 经过子盒子还会触发
mouseenter 只会经过自身盒子触发
因为 mouseenter 不会冒泡
与 mouseenter 相配的鼠标事件类型为 mouseleave 同样不会冒泡

动画函数封装

//obj 目标对象 target 目标操作
// obj 必须是 绝对定位!!!
//给不同元素指定不同计时器

function animate(obj, target, callback) {
    clearInterval(obj.timer);//防止多个定时器同时进行
    obj.timer = setInterval(function() {
         //缓动效果 (目标值 - 现在的位置) / 10
        // 除法会出现小数,不准确,正数将小数向上(大)取整,负数将小数向下(小)取整
        var step = (target - obj.offsetLeft) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if(callback) {
                callback(); //回调函数
            }
   callback && callback();//也可以写成这样
        } else {
            obj.style.left = obj.offsetLeft + step + 'px';
        }
    }, 15);
}
btn.addEventListener('click', function() {
    animate(div, 200, function() {});
});

手动调用点击事件

直接 element.click();

节流阀

var flag = true;
if(flag) {
    
    
    flag = false;
    //事件开始
}
{
    
    	//回调函数
    //事件结束
    flag = true;
}
//-------------------------------------------

返回顶部

window.scroll(x,y)
//直接写数值即可,较快

本地存储

存储在浏览器
设置,读取方便,甚至页面刷新不丢失数据
容量较大
只能存储字符串 ,可以将对象JSON.stringify()编译后存储

sessionStorage

生命周期为关闭窗口
在同一窗口下数据可以共享
以键值对的形式存储使用

//存储数据
sessionStorage.setItem(key, value)
//获取数据
sessionStorage.getItem(key)
//删除数据
sessionStorage.removeItem(key)
//清楚所有数据
sessionStorage.clear()

localStorage

生命周期永久生效,除非手动删除
可以多窗口共享(同一浏览器可以共享)
以键值对的形式存储使用

//存储数据
localStorage.setItem(key,value)
//获取数据
localStorage.getItem(key)
//删除数据
localStorage.removeItem(key)
//清楚所有数据
localStorage.clear()

文章目录