前端入门一之BOM、window对象常见事件、定时器、JS执行机制、location对象、navigatior对象、history对象

前言

JS是前端三件套之一，也是核心，本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点，这篇是BOM;
这篇文章是本人大一学习前端的笔记；
欢迎点赞 + 收藏 + 关注，本人将会持续更新。

文章目录

- BOM
- - 1、BOM概述
  - 2、window对象的常见事件
  - 3、定时器
  - - 3.1、setTimeout()定时器
    - 3.2、clearTimeout()停止定时器
    - [3.3、setInterval() 定时器](#3.3、setInterval() 定时器)
    - 3.4、clearInterval()停止定时器
    - 3.5、this指向
    - 发送信息案例
  - 4、JS执行机制
  - 5、location对象
  - 6、navigation对象
  - 7、history对象

BOM

1、BOM概述

BOM ：是浏览器对象模型
对象核心是window

DOM	BOM
文档对象模型	浏览器对象模型
DOM就是把文档当中一个对象	把浏览器当作一个对象
DOM的顶级对象是document	BOM的顶级对象是 window
DOM主要学习的是操作页面的元素	BOM学习的是浏览器交互的一些对象
兼容性好	兼容性较差

BOM包含DOM
window对象是浏览器的顶级对象，它具有双重角色

2、window对象的常见事件

2.1、窗口加载事件

window.onload 是窗口页面加载事件，把文档内容完全加载完全会出阿飞该事件（包括图像，脚本文件，css文件等），就调用函数

js 复制代码

//1.
window.onload = function() {
    
};

//2.
window.addEventListener("load",function() {});

有了window.onload 就可以把js代码写到元素的上方
如果由多个window.onload，就以第一个为准
如果使用addEventListener则没有限制

js 复制代码

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

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等
如果页面图片多的话，访问到onload触发可能较长时间

2.1.1、区别

load等页面内容全部加载完毕后，包括页面dom元素，图片，flash，css等
DOMContentLoaded 是DOM加载图片，不包括页面dom元素，图片，flash，css等，加载速度比load快一点

js 复制代码

window.addEventListener('load',function() {
    alert(22);
})
document.addEventListener('DOMContentLoaded',function() {
    alert(33);
})

2.2、调整窗口大小事件

window.onresize是调整窗口大小加载事件，当触发时就调用的函数

js 复制代码

window.onresize = function() {
    
}
window.addEventListener('resize',function() {
    
})

只要窗口大小发送像素变化，就会触发这个事件
经常用这个事件完成响应布局。window.innerWidth 当前屏幕的速度

html 复制代码

<body>
    <script>
        window.addEventListener('load',function() {
            var div = document.querySelector('div');
            window.addEventListener('resize',function() {
                if(window.innerWidth <= 800){
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div>
    box
	</div>
</body>

3、定时器

window 对象提供了两个定时器

setTimeout( )
setInterval( )

3.1、setTimeout()定时器

**setTimeout()**方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

js 复制代码

window.setTimeout(调用函数,延迟毫秒数)

注意：

window可以省略
调用这个函数
- 可以直接写函数名
延迟的毫秒数省略默认的是0，如果写，必须是毫秒
因为定时器很多，说以经常给定时器赋值一个标识符
setTimeout()这个调用函数也称为回调函数 callback

js 复制代码

function callback() {
    console.log('爆炸了');
}
var time1 = setTimeout(callback,3000);
var time2 = steTimeout(callback,5000);

3.2、clearTimeout()停止定时器

clearTimeout方法取消了先前通过调用setTimeout()建立的定时器

js 复制代码

window.clearTimeout(timeoutID)
//timeoutID 是定时器的标识符

注意：

window可以省略

3.3、setInterval() 定时器

setInterval方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

js3 复制代码

window.setaInterval(回调函数,间隔的毫秒数);

window 可以省略
注意：第一次执行也是间隔毫秒数之后

3.4、clearInterval()停止定时器

claerInterval( )方法取消了先前通过调用setInterval()建立的定时器

注意：

window可以省略
里面参数就是标识符

3.5、this指向

this的指向在函数定义的时候确定不了的，只有函数执行的时候才能确定this指向谁
全局变量或者普通函数中this指向全局对象window

发送信息案例

html 复制代码

<body>
    <input type = 'number'> <button>发送</button>
    
    <script>
        var btn = document.querySetector('button');
		var time = 60;
        btn.addEventListener('click',function() {
            this.disabled = 'true';
            var timer = setInterval(function() {
                if(time == 0) {
                    clearInterval(timer);
                    this.disabled = 'flase';
                    this.innerHTML = '发送';
                } else {
                    this.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            },1000);
        })
    </script>
</body>

4、JS执行机制

4.1、JS是单线程

简单理解，同一时间只能做一件事情。

4.2、一个问题

js 复制代码

//1.
console.log(1);
setTimeout(function(){
    console.log(3);
} ,1000);
console.log(2);

//2.
console.log(1);
setTimeout(function() {
    console.log(3);
},0);
console.log(2);

结果：1 2 3

4.3、同步与异步

同步：
- 前一个任务结束在执行下一个
异步：
- 在做这件事的同时，你还可以去处理其他事情

JS中的异步是通过回调函数实现的
异步任务类型：
- 普通事件，如：click,resize等
- 资源加载，如：load,error等
- 定时器，包括setTnterval,setTimeout等

5、location对象

window提供了location属性**用于获取或者设置窗体的url，并且解析url。

5.1、url

统一资源定位符

url语法一般为：

js 复制代码

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

http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议，常用的http,ftp,maito等
host	主机（域名）www.itheima.com
port	端口号，可选
path	路径由零或者多个'/'符号隔开的字符串
query	参数以键值的形式，通过`&`符号分开
fragment	片段`#`后面内容，常用于描点链接

5.2、location对象属性

location对象属性	返回值
location.href	获取或者设置整个url
location.host	返回主机（域名）www.baidu.com
location.port	返回端口号，如果未写就返回空字符串
location.pathname	返回路径
location.search	返回参数
loacation.hash	返回片段，#后面内容常见于链接

重点记住：href和search

5.3、location对象方法

location对象方法	返回值
location.assign()	和href一样，可以跳转页面（也称为页面重启向页）
location.replace()	替换当前页面
location.reload()	重新加载页面

navigator对象包含有关浏览器，他有很多属性
我们常用的是userAgent

js 复制代码

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

7、history对象

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

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是1 前进1 ，

html 复制代码

<body>
    <a href = "list.hrml">列表</a>
    <button>
        前进
    </button>
    <script>
    	var btn = document.querySelector('button');
        btn.addEventListener('click',function() {
            history.go(1);
        })
    </script>
</body>

前端入门一之BOM、window对象常见事件、定时器、JS执行机制、location对象、navigatior对象、history对象

文章目录

BOM

1、BOM概述

2、window对象的常见事件

2.1、窗口加载事件

2.1.1、区别

2.2、调整窗口大小事件

3、定时器

3.1、setTimeout()定时器

3.2、clearTimeout()停止定时器

3.3、setInterval() 定时器

3.4、clearInterval()停止定时器

3.5、this指向

发送信息案例

4、JS执行机制

4.1、JS是单线程

4.2、一个问题

4.3、同步与异步

5、location对象

5.1、url

5.2、location对象属性

5.3、location对象方法

6、navigation对象

7、history对象