目录

| Bom概述

| window 、Bom、Dom 的关系

| window的load事件：把JS写进head里

如何把 JS 代码写到head里（页面加载事件 onload）

比onload更高效的加载事件 DOMContentLoaded

| window的resize事件（窗口大小改变的时候触发）

| 定时器

1-1 setTimeout() 定时器

1-2 回调函数的概念

1-3 清除setTimeOut定时器

2-1 setInterval() 定时器

2-2 清除setInterval定时器

2-2 案例：倒计时

2-4 案例：点击”发送“按钮后 60s不能再点击

| this

| JS 同步与异步

现在的 JS 支持异步执行了

JS 中的同步任务和异步任务

JS 同步任务、异步任务 的执行机制

JS 异步任务（回调函数）放入任务队列的顺序

| location 对象

1-1 概述

1-2 url 复习

2-1 location 对象的相关属性

2-2 location.href 获取或修改URL

2-3 location.search 获取参数

3-1 location 对象的相关方法

| navigater对象：根据设备不同跳转页面

| history对象：在页面中实现前进页面、后退页面

| Bom概述

• Bom比Dom的范围更大。Bom包含Dom

• Bom的标准由不同浏览器厂商自己制定，没有统一标准，因此兼容性有些不确定性

| window 、Bom、Dom 的关系

• Bom是浏览器对象模型

• Bom的最高级对象是window

• Bom的其它对象还有 location navigation history

• 实际上，document也是一个 window的对象，即它也是Bom（浏览器对象模型）的一部分。但是在Dom（文档对象模型）中，它是最高级别的对象

  即：Bom包含Dom

• 一切window的对象都可以通过【window.对象】调用 如window.document ，但是也可以省略

• window是浏览器的顶级祖先对象。相当于Java万物源于Object

• window下有一个特殊属性name，默认打印出来是空的。建议命名的时候不要用name

alert() 等价于 window.alert()

| window的load事件：把JS写进head里

如何把 JS 代码写到head里（页面加载事件 onload）

window.onload = function(){}
或者监听事件：
window.addEventListener("load",function(){});

• 
  window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

• 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数

• window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。 如果使用 addEventListener 则没有限制

代码示例

点我

比onload更高效的加载事件 DOMContentLoaded

• onload会等页面所有的元素加载完，才会执行onload内的JS函数

• DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等（IE9+才支持）

• 如果页面的图片很多的话, 从用户访问到onload触发需要较长的时间, 交互效果就不能实现，必然影响用 户的体验，此时用 DOMContentLoaded 事件比较合

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

| window的resize事件（窗口大小改变的时候触发）

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

• 只要窗口大小发生像素变化，就会触发这个事件。

• 在没有CSS3之前，我们经常利用这个事件完成响应式布局。搭配 window.innerWidth 获取当前屏幕尺寸

window.onresize = function(){}
或者监听事件：
window.addEventListener("resize",function(){});

| 定时器

1-1 setTimeout() 定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

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

• window 可以省略

• 

• 延迟的毫秒数省略默认是 0，如果写，必须是毫秒

• 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

代码示例

1-2 回调函数的概念

1-3 清除setTimeOut定时器

• 应用场景：肥皂剧中，女主被捆绑了炸弹，然后男主奋不顾身让炸弹停止。

• 语法

window.clearTimeout(定时器的名字变量)

2-1 setInterval() 定时器

• setTimeout( ) 至始至终只会执行一次！（亲测，即使放进while循环也不会在每次循环的时候重新执行）

• setInterval 和 setInterval 的使用方法完全相同，不同之处在于 setInterval( ) 定时器会间隔某个时间段一直反复执行

2-2 清除setInterval定时器

window.clearInterval(interval定时器的变量名);

2-2 案例：倒计时

123

手机号码：  发送

            console.log(1);window.setTimeout(function(){console.log('休眠2s');},2000);window.setTimeout(function(){console.log('休眠3s');},3000);console.log(4);

window.location.属性名

location.属性名

var url = location.href;  //获取url
location.href = 'url';  //修改当前页面url

location.search;  //获取的是一个从 ? 开头的字符串

var parameter = decodeURIComponent(window.location.search);

//登录页代码




manwomen

//跳转页代码

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 = ""; //电脑
}

当前页面：2上一级下一级