一、Web APls 和JS基础的关联性
1.1 JS的组成
1.2 JS基础阶段以及 Web APls阶段
JS基础阶段
- 我们学习的是 ECMAScript标准规定的基本语法
- 要求同学们掌握JS基础语法
- 只学习基本语法，做好了常用的网页交互效果
- 目的是为了JS后面的课程打基础、做铺垫
Web APls阶段
- Web apls是W3c组织的标准
- Web apls我们主要学习poM和BoM
- Web apls是我们Js所独有的部分
- 我们主要学习页面交互功能
- 需要使用Js基础的课程内容做基础
JS基础学习 ECMAScript基础语法为后面作铺垫， Web APls是JS的应用，大量使用js基础语法做交互效果
APl和Web APl的区别
2.1、APl
APl（ Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访可组例程的能力，而又无需访源码，或理解内部工作机制的细节。
简单理解:APl是给程序员提供的一种工具，以便能更轻经松的实现想要完成的功能。
比如手机充电的接口：
我们要实现充电这个功能
- 我们不关心手机内部变压器，内部怎么存储电等
- 我们不关心这个充电线怎么制作的
- 我们只知道，我们拿看充电线插进充电接口就可以充电
- 这个充电接口就是一个APl
2.2 Web APl
**Web Apl是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM)
- 我们主要针对于浏览器讲解常用的APl，主要针对浏览器做交互效果比如我们想要浏览器弹出一个警示框，直接使用 alert（弹出‘）**
- MDN详细Api:https://developer.mozilla.org/zh-CN/docs/Web/API
- 因为 Web APl很多，所以我们将这个阶段称为 Web Apls
2.3APl和Web APl总结
- 1.APl是为我们程序员提供的—个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
- 2.Web ap主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果
- 3. Web ap|般都有输入和输出（函数的传参和返回值）， Web APl很多都是方法（函数）
- 4.学习 Web apl可以结合前面学习内置对象方法的思路学习
三、DOM简介
3.1、什么是DOM
文档对象模型（ Document object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者ⅩML）的标准编程接口。
W3C巳经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
3.2、DOM树
- 文档:一个页面就是一个文档，DOM中使用 document表示
- 元素:页面中的所有标签都是元素，DOM中使用 element表示
- 节点:网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
- DOM把以上内容都看做是对象
四、获取元素
4.1、如何获取页面元素
DOM在我们实际开发中主要用来操作元素。我们如何来获取页面中的元素呢？获取页面中的元素可以使用以下几种方式
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
4.1、根据ID获取
使用getElementById()方法可以获取带有ID的元素对象
//1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
//2.get 获取Element元素 by通过 驼峰命名法
//3.参数 id是大小写敏感的字符串
//4.返回的一个元素对象
var times = document.getElementById('time');
console.log(time);
console.log(typeof time);
//5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(time);
4.2 根据标签名获取
使用 getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
<ul>
<li>豆沙包是干饭王1</li>
<li>豆沙包是干饭王2</li>
</ul>
<script>
//返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);//豆沙包是干饭王1
</script>
注意：
- 1、因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
- 2、得到元素对象是动态的
4.3 通过HTML5新增的方法获取
<script>
//1.getElementsByClassName根据类名获得某些元素集合
var boxs = document.getElementsByClassName('.box');
console.log(boxs);
//2.querySelector 返回指定元素选择器的第一个元素对象 切记里面需要加符号 .box #nav
var firstBox =document.querySelector('.box')
console.log(firstBox);
var nav = document.querySelector('#nav');
var li = document.querySelector('li');
//3.querySelectorAll() 返回指定选择器的谁有元素对象集合
var lis = document.querySelectorAll('li');
</script>
4.4 获取特殊元素（body,html）
获取body元素
获取html元素
<script>
//1.获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
//2.获取HTML元素
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>
4.5、事件基础
<button>唐伯虎</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function () {
alert('点秋香');
}
</script>
4.6、执行事件步骤
- 1、获取事件源
- 2、注册事件（绑定事件）
- 3、添加事件处理程序（采取函数赋值形式）
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1.获取事件源
var divEle = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
divEle.onclick = function () {
console.log('我被选中了');
}
</script>
4.7、常见的鼠标事件
4.8、操作元素
Javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。
4.8.1、改变元素内容
element. innerText
- 从起始位置到终止位置的内容但它去除htm标签，同时空格和换行也会去掉
element.innerHTML
- 起始位置到终止位置的全部内容，包括htm标签，同时保留空格和换行
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
//innerText和innerHTML的区别
//1.innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
//2.innerHTML 识别HTML标签 W3C标准 保留空格和换行
div.innerHTML = '<strong>今天是：</strong>2021';
//这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
4.8.2、操作属性之表单元素
<button>按钮</button>
<input type="text">
<script>
var btn = document.querySelector('button');
var inputEle = document.querySelector('input');
btn.onclick = function () {
inputEle.value = '我被点击了';
//this 指向的是 事件函数的调用者
this.disabled = true; //禁用这个按钮
}
</script>
4.8.3、样式属性操作
我们可以通过JS修改元素的大小、颜色、位置等样式。
行内样式操作
- element.style
类名样式操作 - element.className
<script>
// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// 让我们当前元素的类名改为了 change
// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
// this.className = 'change';
this.className = 'first change';
}
</script>
注意
-
1、JS里面的样式采取驼峰命名法比如 fontSize、 backgroundColor
-
2、JS修改style样式操作，产生的是行内样式，css权重比较高
使用className注意
-
1、如果样式修改较多，可以采取操作类名方式更改元素样式。
-
2、className因为是个保留字，因此使用 className来操作元素类名属性
-
3、className会直接更改元素的类名，会覆盖原先的类名
<script>
var div = document.querySelector('div');
div.onclick = function () {
div.style.backgroundColor = 'pink';
div.style.width = '500px';
}
</script>
4.8.4、获得焦点 onfocus 失去焦点onblur
<script>
var ipt = document.querySelector('input');
ipt.onfocus = function () {
console.log('获得了焦点');
this.value = '';
this.style.color = '#333';
}
ipt.onblur = function () {
console.log('失去了焦点');
ipt.value = '手机';
this.style.color = '#999';
}
</script>
4.8.5、操作元素总结
操作元素是DOM核心内容
4.9、自定义属性的操作
1、获取属性值
- element.属性 获取属性值。
- ement. getAttribute（属性！）
** 区别**
-
element.属性 获取内置属性值（元素本身自带的属性）
-
element. getAttribute（‘属性’）;主要获得自定义的属性（标准）我们程序员自定义的属性
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
//1. 获取元素的属性值
//1 element属性
console.log(div.id);
//2 element.getAttribute('属性') get得到获取attribute 属性的意思 我们程序员自己添加的属性我们称为
// 自定义属性
console.log(div.getAttribute('id')); //demo
console.log(div.getAttribute('index')); //1
</script>
2、设置属性值
- element.属性= ‘值’ 设置内置属性值。
- ement. setAttribute（‘属性’，‘值’）
区别
-
element.属性 设置内置属性值
-
ement. setAttribute（‘属性’）;主要设置自定义的属性（标准）
<script>
var li = document.getElementsByTagName('li');
var items = document.querySelectorAll('.item');
console.log(item);
for (var i = 0; i < li.length; i++) {
li[i].setAttribute('index', i);
li[i].onclick = function () {
for (var i = 0; i < li.length; i++) {
li[i].className = '';
items[i].style.display = 'none';
}
this.className = 'current';
var index = this.getAttribute('index');
console.log(index);
items[index].style.display = 'block';
}
}
</script>
3、移除属性值 removeAttribute
4.9.1、H5自定义属性
-
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
-
自定义属性获取是通过getAttribute（‘属性‘）获取。
-
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
1.设置H5自定义属性
H5规定自定义属性data开头做为属性名并且赋值。
- 比如
<div data-index="1"></div>
或者使用JS设置
- element.setAttribute（‘data-index‘，2）
2.获取H5自定义属性
1.兼容性获取element.getAttribute（‘data-index‘);
2.H5新增element.dataset.index或者element.dataset【‘index‘】ie11才开始支持
五、节点操作
5.1 为什么学习节点操作
5.2 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用nod来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点nodeType为1
- 属性节点nodeType为2
- 文本节点nodeType为3（文本节点包含文字、空格、换行等）
- 我们在实际开发中，节点操作主要操作的是元素节点
5.3 节点概述
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
5.3.1、父级节点
- node.parentNode
- parentNode属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回null
5.3.2、子级节点
- 2.parentNode.children（非标准）
- parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。
- 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
- 3.parentNode.firstChild
- firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
- 4.parentNode.lastChild
- lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
- 5.parentNode.firstElementChildfirstElementChild返回第一个子元素节点，找不到则返回null。
- 6.parentNode.lastElementChild firstElementChild返回第一个子元素节点，找不到则返回null。
- 注意：这两个方法有兼容性问题，IE9以上才支持。
//实际开发中常用做法
console.log(ul.children[0]);
console.log(ul.children[ul.children.length - 1]);
5.3.3、兄弟节点
- 1.node.nextsibling
- nextsibling返回当前元素的下一个兄弟节点，找不到则返回nul1。同样，也是包含所有的节点。
- 2.node.previoussibling
- previoussibling返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
- 3.node.nextElementsibling
- nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null。
- 4.node.previousElementsibling
- previousElementsibling返回当前元素上一个兄弟节点，找不到则返回null。
- 注意：这两个方法有兼容性问题，E9以上才支持。
5.4、删除节点
- node.removechild（child）
- node.removeChild（）方法从DoM中删除一个子节点，返回删除的节点。
<script>
//1.获取元素
btn = document.querySelector('button');
ul = document.querySelector('ul');
//2.删除元素 node.removeChild(child)
btn.onclick = function () {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
5.5、复制节点(克隆节点)
node.cloneNode（）方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意：
- 1.如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
- 2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。
5.6、创建节点
- 1.document.createElement（‘tagName‘）
document.createElement（）方法创建由tagName指定的HrML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。 - 2.node.appendchild（child）
- node.appendchild（）方法将一个节点添加到指定父节点的子节点列耒末尾。类似于css里面的 after伪元素。
- 3.node.insertBefore（child，指定元素）
- node.insert<Before（）方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before 伪元素。
5.7、三种动态创建元素的区别
- document.write()
- element.innerHTML()
- document.createElement()
区别
-
1.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
-
2.innerHTML是将内容写入某个DoM节点，不会导致页面全部重绘
-
3.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
-
4.createElement（）创建多个元素效率稍低一点点，但是结构更清晰
-
**总结：不同浏览器下，innerHTML效率要比creatElement高 **
5.8、DOM重点核心
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
- 1.对于JavaScript，为了能够使avaScript操HTML，JavaScripti就有了一套自己的dom编程接口。
- 2.对于HTML，dom使得HTML形成一棵dom树.包含文档、元素、节点
- 我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型
- 关于DOM操作，我们主要针对于元素的操作。主要有创健、增、删、改、查、属性操作、事件操作。
5.8.1、创建
- 1.document.write
- 2.innerHTML
- 3.createElement
5.8.2、增
- 1.appendChild
- 2.insertBefore
5.8.3、删
- 1.removeChild
5.8.4、改
主要修改dom的光素属性，dom元素的内容、属性，表单的值等
- 1.修改元素属性：src、href、title等
- 2.修改普通元素内容：innerHTML、innerText
- 3.修改表单元素：value、type、disabled等
- 4.修改元素样式：style、.className
5.8.5、查
主要获取查询dom的元素
- 1.DOM提供的API方法：getElementByld、getElementsByTagName古老用法不太推荐
- 2.H5提供的新方法：querySelector、querySelectorAll提倡
- 3.利用节点操作获取元素：父（parentNode）、子children）、兄（previousElementSibling、.nextElementSibling）提倡
5.8.6、属性操作
主要针对于自定义属性。
- 1.setAttribute:设置dom的属性值
- 2.getAttribute:得到dom的属性值
- 3.removeAttribute移除属性
5.8.7、事件操作
给元素注册事件，采取事件源事件类型=事件处理程序
六、事件
6.1、注册事件(帮定事件)
1.1、注册事件概述
- 给元素添加事件，称为注册事件或者绑定事件。
- 注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
-
利用on开头的事件onclick
-
button οnclick=“alert（‘hi~）“>
-
btn.onclick function(){}
-
特点：注册事件的唯一性
-
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
-
w3c标准推荐方式
-
addEventListener()它是一个方法
-
IE9之前的IE不支持此方法，可使用attachEvent()代替
-
特点：同一个元素同一个事件可以注册多个监听器
-
按注册顺序依次执行
6.1.2、addEventListener事件监听方式
eventTarget.addEventListener（type，listener【，useCapture】）
eventTarget.addEventListener（）方法将指定的监听器注到eventTarget（目标对像）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
- type:事件类型字符串，比如click、mouseover，注意这里不要带on
- listener:事件处理函数，事件发生时，会调用该监听函数
- useCapture:可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们再进步学习
6.1.3、attachEvent事件监听方式(ie9以前的版本支持)
eventTarget.attachEvent（eventNamewithon，callback）
eventTarget.attachEvent（）方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接收两个参数：
- eventNameWithOn:事件类型字符串，比如onclick、onmouseover，这里要带on
- callback：事件处理函数，当目标触发事件时回调函数被调用
6.2、删除事件(解绑事件)
1.传统注册方式
eventTarget.onclick null;
2.方法监听注册方式
- ①eventTarget.removeEventListener（type，listener【，usecapture】）;
- ②eventTarget.detachEvent （eventNamewithon，callback）;(ie8)
6.3、DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
比如我们给一个div注册了点击事件：
DOM事件流分为3个阶段：
- 1.捕获阶段
- 2.当前目标阶段
- 3.冒泡阶段
- 事件冒泡：E最早提出，事件开始时由最具体的元素接牧，然后逐级向上传播到倒DOM最顶层节点的过程。
- 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
注意 - 1.Js代码中只能执行捕获或者冒泡其中的一个阶段。
- 2.onclick和attachEvent只能得到冒泡阶段。
- 3.addEventListener（type，listener【，useCapture】）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是fa1se（不写默认就是fa1se），表示在事件冒泡阶段调用事件牧处理程序。
- 4.实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
- 5.有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
- 6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。
6.4、事件对象的常见属性和方法
6.5、组织事件冒泡的两种方式
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。
阻止事件冒泡
- 标准写法：利用事件对象里面的stopPropagation（）方法
- e.stopPropagation（）
- 非标准写法：IE6-8利用事件对象cancelBubble属性
6.6、事件委托(代理、委派)
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景：
咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？
解决方案：快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。
公
优势：快递员省事，委托给班主任就可以走了。同学们领取也方便，因为相信班主任。
事件委托
事件委托也称为事件代理，在jQuery里面称为事件委派。
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的i，因为点击Ii，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
事件委托的作用
我们只操作了一次DOM，提高了程序的性能。
6.7、常见的鼠标事件
1、禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener（‘contextmenu‘，function（e）{
e.preventDefault（）;
}）
2、禁止鼠标选中（selectstart开始选中）
document.addEventListener（‘selectstart‘，function（e）{
e.preventDefault （）
}）
6.8、鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。
6.9、常用的键盘事件
事件除了使用鼠标触发，还可以使用键盘触发。
注意：
- 1.如果使用addEventListener不需要加on
- 2.onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift等。
- 3.三个事件的执行顺序是：keydown-keypress-keyup
6.9.1、键盘事件对象
| 键盘事件对象属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCll值 |
注意：onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键)
Keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCIM值
七、DOM概述
7.1、什么是DOM
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对像，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
7.1.1、DOM
- 文档对象模型
- 浏览器对象模型
- DOM就是把「文档」当做一个「对象」来看待
- DOM的顶级对象是document
- DOM主要学习的是操作页面元素
- DOM是W3C标准规范
7.1.2、BOM
- 浏览器对象模型
- 把「浏览器」当做一个「对象」来看待
- BOM的顶级对象是window
- BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
7.1.3、BOM的构成
BOM比DOM更大，它包含DOM。
- window对象是浏览器的顶级对象，它具有双重角色。
- 1.它是S访问浏览器窗口的一个接口。
- 2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
- 在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。
- 注意：window下的一个特殊属性window.name
7.2、window 对象的常见事件
7.2.1、窗口加载事件
window.onload是窗口页面）加载事件当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。
注意
-
1.有了window.onload就可以把S代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
-
2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
-
3.如果使用addEventListener则没有限制
DOMContentLoaded
DOMContentLoaded事件角触发时，仅当DOM加载完成，不包括样式表，图片，flash等等le9以上才支持
如果页面的图片很多的话，从用户访问到onload角触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时DOMContentLoaded事件比较合适。
7.2.2、调整窗口大小事件
window.onresize function（）{}
window.addEventListener（“resize“，function （）{}）
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
注意：
-
1.只要窗口大小发生像素变化，就会触发这个事件。
-
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
7.3、定时器
window对象给我们提供了2个非常好用的方法-定时器。
-
setTimeout()
-
setInterval()
7.3.1、setTimeout（定时器)
window.setTimeout（调用函数，【延迟的毫秒数】）；
setTimeout（0方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
注意：
-
1.window可以省略。
-
2.这个调用函数可以直接写函数，或者写函数名或者采取字符串‘‘函数名()‘三种形式。第三种不推荐
-
3.延迟的毫秒数省略默认是0，如果写，必须是毫秒。
-
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
-
5.setTimeout0这个调用函数我们也称为回调函数callback
-
普通函数是按照代码顺序直接调用。
-
而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
-
简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
-
以前我们讲的element.οnclick=function（）}或者element.addEventListener （“click‘“，fn);里面的函数也是回调 函数。
7.3.2、停止 setTimeout（定时器)
window.clearTimeout （timeoutID）
clearTimeout（）方法取消了先前通过调用setTimeout（）建立的定时器。
注意：
- 1.window可以省略。
- 2.里面的参数就是定时器的标识符。
7.3.3、setInterval（重复定时器)
window.setInterval（回调函数，【间隔的毫秒数】）；
setInterval()方法重复调用一个函数，每隔这个时j间，就去调用一次回调函数。
注意：
- 1.window可以省略。
- 2.这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()‘三种形式。
- 3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
- 4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
7.3.4、停止 setInterval（定时器)
window.clearInterval（intervalID）;
clearInterval()方法取消了先前通过调用setInterval（）建立的定时器。
注意：
- 1.window可以省略。
- 2.里面的参数就是定时器的标识符。
7.4、JS执行机制
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致一」JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
7.4.1、同步和异步
为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
他们的本质区别：这条流水线上各个流程的执行顺序不同。
同步任务
同步任务都在主线程上执行，形成一个执行栈。
异步任务
JS的异步是通过回调函数实现的，一般而言，异步任务有以下三种类型
- 1、普通事件，如click、resize等
- 2、资源加载，如load、error等
- 3、定时器，包括setInterval、setTimeout等 异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。
7.4.4 执行机制
- 1.先执行执行栈中的同步任务。
- 2.异步任务（回调函数）放入任务队列中。
- 3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（eventloop）。
八、 location、navigator、history对象
8.1、什么是location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
8.1.1、location对象的属性
重点记住：href和search
8.1.2、location对象的方法
8.2、URL
统一资源定位符（Uniform Resource Locator，，URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为：
protocol://host 【port】/path/【？query】＃fragment
http://www.itcast.cn/index.html？name=andysage=18＃link
8.3、navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转
<script>
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 = "../H5/index.html"; //手机
}
</script>
8.4、history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
