JavaScript DOM篇

1.BOM

1、什么是BOM

浏览器对象模型浏览器滚动条前进后退窗口大小通过window.什么什么的这些都是BOM
他是一个全局对象。定义在全局作用的变量、函数都变成window对象的属性和方法

2、窗口加载事件

有了window.onload=function(){ 代码} 就可以把代码放在任意一个地方是因为window.onload 是等布局和css 图片全部加载完才执行window.onload
window.onload只能声明一个
通过window.addEventListener('load',function(){})可以声明无数个
window.addEventListener('DOMContentLoaded',function () {})这个比前面几个快因为他只要DOM布局加载完毕 不需要等图片这些加载完毕就可以直接加载

window.onresize 窗口改变就会触发

 //全局加载完才生效
window.addEventListener('load',function () {
        var box = document.querySelector('.box')
      //当窗口改变就会触发 resize       
      window.addEventListener('resize',function () {
                console.log(window.innerWidth)
                if (window.innerWidth <= 800){
                    box.style.display = "none";
                }
                if (window.innerWidth >= 800){
                    box.style.display = "block";
                }
            })
        })

3.定时器（重要）

1. setTimeout

	// 第一种
        setTimeout(function() {
          console.log('时间到了')
        },3000)
        // 第二种 因为页面中不只是只有一个定时器 可以给定时器赋值
        var time = setTimeout(f1,2000)
        function f1() {
            console.log("f1执行了")
        }
        //关闭定时器 指定的名字
		clearTimeout(time)

回调函数就是需要回头调用这个函数所以叫回调函数

2.setInterval

// 1. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器 // 2. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

2.this指向

1.在全局调用指向全局

2.在方法调用谁就指向谁

3.在构造函数中this指向构造函数的实例

//第一种
console.log(this)//window

function fn1(){
	console.log(this)
}
fn1()//window

//定时器也是指向window
setInterval(function () {console.log(this)},1000)

//第二种指向调用者 a
var a={
        usern:function() {
            console.log(this)
        }
      }
console.log(a.usern)

//第三种 指向实例
function Fun(){
    console.log(this)
}
var fun = new Fun()

3.js执行机制（重点）

3.1同步和异步（重点）

同步：只有前一个执行完才会执行下一个任务如果上一个要执行十分钟后面全部都要等（只能执行一个任务）

异步：一件事情需要等很久的时候，你可以去做其他的事情（能一起执行多个任务）

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

异步任务：异步任务都放在任务队列

js的异步是通过回调函数进行实现的

一般说异步有以下三种类型

普通事件如click resize等
资源加载如load error等
定时器，包括selnterval、setTimeout等

3.2 js运行机制总结：

首先页面加载，会把所有的同步任务放到主线程（执行栈）中，把所有的异步放到异步api去触发，等触发完毕就会放到异步队列中，等主线程（执行栈）中执行完全部，然后去异步队列中查看是否有异步任务，如果有就拿到主线程去执行，然后又去异步队列查看是否有异步任务，一直循环此动作，改事件叫做事件循环

4.location对象

获取地址栏的属性

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

//对象方法
location.assign() //跟href一样，可以跳转页面 可以后退
location.replace()//替换当前页面 不记录历史 没得后退
location.reload() // 重新加载页面 就是刷新页面

5.history对象

back() 可以后退

forward() 前进功能

go（参数）前进后退功能参数是整数就前进负数就后退

var btn = document.querySelector("button");
        btn.addEventListener("click", function() {
            //前进
            //history.forward();
            //前进
            history.go(1)
           //后退
            // history.go(-1)
        })

5.1 offset

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

获取大小用offset，更改样式用style

6.1client

获取元素的宽高等等不包括padding、边框、内容区的宽度

用法查看mdn

7.1立即执行函数

立即执行不需要调用

写法

//写法1
(function(a,b){})(1,2)
//写法2
(function(){}())

8.fiexible 屏幕适配

屏幕适配了解但是有用

9.scroll 滚动条系列

属性及其作用

element.scrollTop //距离顶部 返回值不带参数
element.scrollLeft //距离右侧 返回值不带参数
element.scrollWidth //实际高度 不含边框 返回值不带参数
element.scrollHeigh //实际宽度 不含边框 返回值不带参数

scroll //滚动事件


//页面被卷去的头部
window.pageYOffset
window.pageXOffset

//一般用法
scrollTop-pageYoffset

三大获取数值的总结

offset 系列经常用于获取的元素位置 offsetleft offsettop
client 经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过window.pagexOffset 获得

10.动画

动画基于定时器

动画属性一定要加定位

缓动效果公式（目标-现在的位置）/10

自学JavaScript第五天