1 Web APIs

1.1 APIs 和JS基础关联性

1.1.1 JS 的组成

在这里插入图片描述

1.1.2 JS 基础阶段以及 Web APIs 阶段

JS基础阶段

  • 学习的是ECMAscript标准规定的基本语法
  • 要求掌握Js 基础语法
  • 只学习基本语法,做不了常用的网页交互效果
  • 目的是为了Js 后面的课程打基础、做铺垫

Web APIs阶段

  • web APIs 是w3c组织的标准
  • web APIs 我们主要学习DOM和 BOM
  • web APIs 是Js 所独有的部分
  • 主要学习页面交互功能
  • 需要使用Js 基础的课程内容做基础

Js基础学习ECMAScript 基础语法为后面作铺垫，web APIs 是 Js 的应用，大量使用 as 基础语法做交互效果

1.2 API 和 Web API

1.2.1 API

官方定义：API (Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解︰API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

1.2.2 Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的APl( BOM和DOM)。
现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框，直接使用alert(‘弹出’)
MDN详细API: https://developer.mozilla.org/zh-CN/docs/Web/API
因为Web API很多，所以我们将这个阶段称为Web APls

1.2.3 API和Web API总结

1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现2.Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3. Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数)
4.学习Web API可以结合前面学习内置对象方法的思路学习

2.DOM

2.1 DOM简介

2.1.1 什么是DOM

文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言（HTML或者XML)的标准编程接口。
w3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

2.1.2 DOM 树

对于HTML，DOM使得HTML形成一棵 DOM 树，包含文档、元素、节点。
在这里插入图片描述

  • 文档：一个页面就是一个文档，DOM中使用document表示。
  • 元素：页面中的所有标签都是元素，DOM中使用element表示
  • 节点︰网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。

获取的DOM元素是一个对象，故称为 文档对象模型

2.2 获取元素

DOM在我们实际开发中主要用来操作元素。
获取页面中的元素的方式：

  • 根据ID获取
  • 根据标签名获取
  • 通过HTML5新增的方法获取
  • 特殊元素获取

2.2.1 根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象。
语法：

var element = document.getElementById(id);

参数：

  • element是一个Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
  • id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

返回值：
返回一个匹配到ID的DOM Element对象。若在当前 Document下没有找到，则返回null.

<body>
<div id="time">2019-9-9</div>
<script>
	// 1．因为我们文档页面从上往下加载，所以先得有标签。所以我们script写到标签的下面（有解决方案，以后再说）
	// 2. get获得element元素by 通过驼峰命名法
	// 3．参数id是大小写敏感的字符串
	// 4.返回的是一个元素对象
	var timer = document.getElementById('time'); 
	console.log(timer);
	console.log(typeof timer);
	//5.console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
	console.dir(timer);
< /script>
</body>

2.2.2 根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

获取方式1：
把页面中所有该标签名的元素都获取过来
document.getElementsByTagName('标签名');

注意:

  1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
  2. 得到元素对象是动态的
  3. 如果页面中只有一个li，返回的还是伪数组的形式
  4. 如果页面中没有这个元素，返回的空的伪数组的形式
<body>
	<ul>
		<li>知否知否，应是等你好久1</li>
		<li>知否知否，应是等你好久2</li>
		<li>知否知否，应是等你好久3</li>
		<li>知否知否，应是等你好久4</li>
		<li>知否知否，应是等你好久5</li>
	</ul>
	<script>
	 	// 返回的是，获取过来元素对象的集合，以伪数组的形式存储的
		var lis = document.getElementsByTagName('li');
		console.log(lis);
	</ script>
</ body>

获取方式2：
获取某个元素(父元素)内部所有指定标签名的子元素
element.getElementsByTagName ('标签名');

注意∶父元素必须是单个对象(必须指明是哪一个元素对象)。获取的时候不包括父元素自己，只是把子元素获取过来。

2.2.3 HTML5 新增的方法

注： ie9版本以上才能使用

2.2.3.1 根据类名返回元素对象集合

document.getElementsByClassName('类名');

2.2.3.2 根据指定选择器返回第一个元素对象，里面的选择器需要加符号

document.querySelector('选择器');

不同选择器的填写格式示例：

// 类选择器
document.querySelector('.box');
// id 选择器
document.querySelector('#box');
// 返回页面中的第一个li标签
document.querySelector('li');
2.2.3.3 根据指定选择器返回所有元素集合

document.querySelectorAll('选择器");

2.2.4 获取特殊元素（body、html）

1.获取 body 元素，返回body元素对象
document.body

2.获取 html 元素，返回html元素对象
document.documentElement我觉得这里不对劲

DOM 重点核心

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

2.3 创建

  1. document.write
  2. innerHTML
  3. createElement

2.4 增
1.appendChild
2.insertBefore

6.3删
1.removeChild

6.4改
主要修改dom的元素属性，dom元素的内容、属性,表单的值等
1．修改元素属性: src、href、title等
2．修改普通元素内容:innerHTML、innerText
3. 修改表单元素: value、type、disabled等
4．修改元素样式: style、className

6.5查
主要获取查询dom的元素

  1. DOM提供的API方法: getElementByld、getElementsByTagName 古老用法不太推荐
  2. H5提供的新方法: querySelector、querySelectorAll提倡
    3．利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling,
    nextElementSibling)提倡

2.3 事件基础

2.3.1 事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解∶触发—响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

<body>
	<button id="btn">唐伯虎</button>
	<script>
	// 点击一个按钮，弹出对话框
	// 1．事件是有三部分组成：事件源、事件类型、事件处理程序―我们也称为事件三要素
	// (1）事件源事件被触发的对象  谁 按钮
	var btn = document.getElementById( ' btn');
	// (2）事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
	// (3）事件处理程序  通过一个函数赋值的方式完成
	btn.onclick = function() {
		alert('点秋香');
	}
	</script>
</ body>

2.3.2 执行事件的步骤

1.获取事件源
2.注册事件（绑定事件)
3.添加事件处理程序（采取函数赋值形式)

<body>
	<div>123</div>
	<script>
		// 执行事件步骤
		// 点击div控制台输出我被选中了
		// 1．获取事件源
		var div = document.queryselector( 'div ');
		// 2.绑定事件注册事件
		// div.onclick 
		// 3.添加事件处理程序
		div.onclick = function() {
			console.log('我被选中了');
		}
	</script>
</body>

2.3.3 常见的鼠标事件

在这里插入图片描述

2.3.4 分析事件三要素

下拉菜单三要素：

  • 事件源：下拉菜单按钮；
  • 事件：鼠标点击
  • 事件处理程序：下拉菜单的显示

关闭广告三要素：

  • 事件源：关闭按钮；
  • 事件：鼠标点击
  • 事件处理程序：广告盒子的隐藏

2.4 操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

2.4.1改变元素内容

innerText 和 innerHTML 方法

区别在于：

  • innerText 不识别htm1标签，非标准
  • innerHTML 识别htm1标签，W3C标准
<body>
	<div></div>
	<script>
		// innerText 和innerHTML的区别
		var div = document.querySelector('div');
		// 1. innerText 不识别htm1标签，非标准
		// 会原样输出单引号内的内容
		div.innerText = '<strong>今天是:</strong> 2019'; 
		// 2. innerHTML 识别htm1标签，W3C标准
		// “今天是”会被html标签<strong></strong>加粗
		div.innerHTML = '<strong>今天是:</strong> 2019';
	</script>
</body>

这两个属性是可读写的，可以获取元素里面的内容。
1.从起始位置到终止位置的内容,但它去除 html 标签，同时空格和换行也会去掉

element.innerText

2.起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

element.innerHTML

代码如下：

<body>
    <p>
        我是文字
        <span>123</span>
    </p>
	<script>
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

运行结果如下：
在这里插入图片描述

2.4.2 常用元素的属性操作

  1. innerText、 innerHTML，改变元素内容
  2. src、 href
  3. id、alt、title

案例：点击按钮，修改图片的url

<body>
    <div>
        <button class="btn1">丽娘</button>
        <button class="btn2">镜玄</button>
    </div>
    <img src="" alt="">
    <script>
    	// 获取元素
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var img = document.querySelector('img');
        // 注册事件 处理程序
        btn1.onclick = function() {
            img.src = 'images/liniang.jpg';
            img.title = '丽娘';
        }
        btn2.onclick = function() {
            img.src = 'images/jingxuan.jfif';
            img.title = '镜玄';
        }
    </script>
</body>

案例:分时显示不同图片,显示不同问候语 --206集
根据不同时间，页面显示不同图片，同时显示不同的问候语。
如果上午时间打开页面，显示上午好，显示上午的图片。
如果下午时间打开页面，显示下午好，显示下午的图片。
如果晚上时间打开页面，显示晚上好，显示晚上的图片。

在这里插入代码片

1 事件高级

在这里插入图片描述
在这里插入图片描述

1.1 注册事件（绑定事件）

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式:传统方式和方法监听注册方式

传统注册方式

  • 利用on开头的事件onclick
  • <button οnclick= “alert('hi~)” ></button:
  • btn.onclick = function(){}
  • 特点：注册事件的唯一性
  • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

  • w3c标准推荐方式
  • addEventListener()，它是一个方法
  • IE9之前的IE不支持此方法，可使用attachEvent()代替
  • 特点:同一个元素同一个事件可以注册多个监听器
  • 按注册顺序依次执行

1.1.1 传统注册方式

btn.onclick = function(){}

1.1.2 addEventListener 事件监听方式

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时,就会执行事件处理函数。

eventTarget .addEventListener(type, listener[,usecapture])

该方法接收三个参数︰

  • type：事件类型字符串，比如click、mouseover，注意这里不要带on；
  • listener：事件处理函数，事件发生时，会调用该监听函数；
  • useCapture：可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们再进一步学习。
<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1.传统方式注册事件
        // 同一个元素，同一个事件，可以添加多个监听器。只执行最后注册的处理函数
        btns[0].onclick = function() {
            alert("传统注册事件-1！")
        }
        btns[0].onclick = function() {
            alert("传统注册事件-2！")
        }
        // 2.方法监听注册事件
        // 同一个元素，同一个事件，可以添加多个监听器。按注册顺序依次执行
        btns[1].addEventListener('click',function(){
                alert("方法监听注册事件-1");
            })
        btns[1].addEventListener('click',function(){
                alert("方法监听注册事件-2");
            })
    </script>
</body>

1.1.3 attachEvent 事件监听方式

☆ 该特性是非标准的,请尽量不要在生产环境中使用它!

eventTarget.attachEvent (eventNameWithOn,callback)

eventTarget.attachEvent ()方法将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接收两个参数︰

  • eventNameWithOn：事件类型字符串，比如onclick、onmouseover ，这里要带on
  • callback：事件处理函数，当目标触发事件时回调函数被调用

1.1.4 注册事件兼容性解决方案

function addEventListener (element, eventName, fn){
	//判断当前浏览器是否支持addEventListener方法
	if (element.addEventListener){
		element.addEventListener(eventName, fn);//第三个参数默认是false
	} else if (element.attachEvent) {
		element.attachEvent ( 'on'+ eventName,fn);
		} else {
		// 相当于element.onclick = fn;
		element["on" + eventName] = fn;
}

兼容性处理的原则∶首先照顾大多数浏览器，再处理特殊浏览器

1.2 删除事件（解绑事件)

2.1删除事件的方式

1.传统注册方式

eventTarget.onclick = null;

⒉.方法监听注册方式

eventTarget.removeEventListener(type，listener [，usecapture]) ;

1.3 DOM 事件流

1.4 事件对象

1.4.1 什么是事件对象：

  • 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。
  • 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event ，它有很多属性和方法。比如鼠标点击里面就包含了鼠标的相关信息（鼠标坐标等），如果是键盘事件里面就包含的键盘事件的信息（比如判断用户按下了哪个键）

1.4.2 使用语法

eventTarget.onciick = function (event) { }
eventTarget.addEventListener ( 'click ', function(event){}
// 这个event就是事件对象，我们还喜欢的写成e 或者evt

  • 这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参。
  • 当我们注册事件时，event 对象就会被系统自动创建，并以此传递给事件监听器（事件处理函数）
//传统注册事件的事件对象
var div = document.querySelector('div');
var div = document.querySelector( 'div' );
	div.onclick = function(event){
		console.log(event);
	}

// 方法监听注册对向的事件对象
var div.addEventListener('click', function(e) {
	console.log(e);
	}

1.4.3 事件对象的兼容性方案

事件对象本身的获取存在兼容问题:
1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
⒉.在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。

var div = document.queryselector( 'div ');
div.onclick = function(e){
//console.log(e); // ie678 中是 undefined
//console.loe(window.event);// ie678 中可以返回事件对象
e =e || window.e
console.log(e);
}

实际开发里放心使用e，不用 e =e || window.e。

1.4.4 事件对象的常见属性和方法

在这里插入图片描述

1.5 阻止事件冒泡

1.5.1阻止事件冒泡的两种方式

事件冒泡:开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

标准写法:利用事件对象里面的stopPropagation ()方法

e.stopPropagation()

非标准写法： IE 6~8 利用事件对象 cancelBubble 属性

e.cancelBubble = true;

<div class="father">
	<div class="son">son儿子</div>
</div>
<script>
// 常见事件对象的属性和方法
// 阻止冒泡 dom 推荐的标准 stopPropagation()
var son = document.queryselector( '.son ');
son.addEventListener( 'click ' , function(e){
	alert( ' son ' );
	e.stopPropagation();// 停止传播
}, false);
var father = document.queryselector( '.father');
father.addEventListener('click' , function() {
	alert( 'father ' );
}, false);
document.addEventListener('click', function() {
	alert( 'document ' );
}
</script>

1.5.2 阻止事件默哀跑的兼容性解决方案

if(e && e.stopPropagation){
	e.stopPropagation();
} else{
	window .event.cancelBubble = true;
)

1.6 事件委托（代理、委派）

事件冒泡本身的特性，会带来的坏处，也会带来好处，需要我们灵活掌握。

生活中有如下场景∶
咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如?
解决方案︰快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即呵。
优势︰快递员省事，委托给班主任就可以走了。同学们领取也方便，因为相信班主任。

案例：点击每个li，弹出对话框

<ul>
	<li>知否知否，应该有弹框在手</l>
	<li>知否知否，应该有弹框在手</li>
	<li>知否知否，应该有单框在手</li>
	<li>知否知否，应该有单框在手</li>
	<li>知否知否，应该有弹框在手</li>
</ul>

以前需要给每个li注册事件，是非常辛苦的，而且访问DOM的次数越多，这就会延长整个页面的交互就绪时间。

事件委托
事件委托也称为事件代理，在jQuery里面称为事件委派。

事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例∶给ul注册点击事件，然后利用事件对象的target 来找到当前点击的li，因为点击 lü，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

事件委托的作用
我们只操作了一次DOM，提高了程序的性能。

<script>
//事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点

var ul = document.querySelector( 'ul ');
ul.addEventListener( 'click ' , function(e){
	alert'知否知否，点我应有弹框在手!'); // 点击li，也会弹框提示
	// e.target 可以获取点击的对象
	// 给点击的 li 设置背景颜色
	e.taget.style.backgroundColor = 'pink';
})
</script>

1.7 常用的鼠标事件在这里插入图片描述

1.禁止鼠标右键菜单
contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。

document.addEventListener ('contextmenu', function(e){ 		
	e.preventDefault () ; 
})

2.禁止鼠标选中（selectstart 开始选中）

document.addEventListener ('selectstart', function(e){ 		
	e.preventDefault () ; 
})

1.6 常用的键盘事件

BOM 浏览器对象模型

在这里插入图片描述
在这里插入图片描述

3.BOM 概述

3.1什么是BOM

BOM (Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
在这里插入图片描述

3.2 BOM的构成

BOM比 DOM更大，它包含DOM。
在这里插入图片描述
window对象是浏览器的顶级对象，它具有双重角色。

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

在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert)、prompt()等。

注意：window下的一个特殊属性window.name

3.2 window 对象的常见事件

3.2.1窗口加载事件

window.onload = function () {}
或者
window.addEventListener( “load”, function(){});

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

<script>
window.onload = function() {
	var btn = document.queryselector('button');
	btn.addEventListener( 'click', function() {
		alert( '点击我');
	})
}
</script>
<button></button>

注意︰

  1. 有了window.onload就可以把JS代码写到页面元素的上方（甚至是文件外），因为onload是等页面内容全部加载完毕，再去执行处理函数。
  2. window.onload是传统注册事件方式，只能写一次，如果有多个，会以最后一个window.onload为准。
  3. 如果使用 addEventListener 则没有限制
window.addEventListener('load', function() {
	var btn = document.queryselectorK('button');
	btn.addEventListener('click',function() {
		alert('点击我');
	})
})

document . addEventListener(‘DOMContentLoaded’,function(){})

  • DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片 、flash等等。
  • le9以上才支持.
  • 如果页面的图片很多的话,从用户访问到 onload 触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。

3.2.2 调整窗口大小事件

window.onresize = function (){ }
window . addEventListener ( “resize” , function(){};

window .onresize 是调整窗口大小加载事件，当触发时就调用的处理函数。
注意︰
1.只要窗口大小发生像素变化，就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度.

<body>
	<script>
		window.addEventListener('load', function() {
			var div = document.queryselector( 'div ' );
			window.addEventListener('resize', function() {
				console.log(window.innerwidth);
				console.log('变化了');
				if (window.innerwidth <= 800{
					div.style.display = 'none';
				} else {
					div.style.display = 'bIock;
				}
			})
		})
	</script>
	<div></div>
</body>

3.3 定时器

window对象给我们提供了2个非常好用的方法-定时器。

  • setTimeout()
  • setInterval()

3.3.1 setTimeout() 定时器

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

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

注意：

  • 这个window在调用的时候可以省略
  • 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式，其中第三种不推荐
  • 这个延时时间单位是毫秒，如果省略默认的是0。
  • 2000ms = 2s
  • 因为页面中定时器可能有很多，所以我们经常给定时器赋值一个标识符(名字)。

1.这个调用函数可以直接写函数，代码如下：

<script>
	// 语法规范: window.setTimeout(调用函数，延时时间);
	
	setTimeout(function() {
		console.log('时间到了');
	}, 2000);
</script>

2.这个调用函数也可以写函数名，代码如下：

<script>
	// 这个调用函数可以直接写函数，也可以写函数名
	function callback(){
		console.log('哈哈！')
	}
	setTimeout(callback, 2000);
	
	// 还有一种写法，可以写 '函数名()'，不提倡
	setTimeout('callback()', 2000);
</script>

3.页面中可能有很多的定时器，我们经常给定时器加标识符(名字)

<script>
	var timer1 = setTimeout(callback, 3000);
	var timer2 = setTimeout(callback,5000);
</script>

☆ 回调函数
setTimeout(这个调用函数我们也称为回调函数callback。
普通函数是按照代码顺序直接调用的。
而这个函数需要等待时间，时间到了才会调用这个函数，因此成为回调函数。
简单理解︰回调，就是回头调用的意思。上一件事干完，再回头调用这个函数。
以前我们讲的 element.οnclick= function() {} 或者element.addEventListener(click" ,fn); 里面的函数也是 回调函数。

3.3.2 停止 setTimeout() 定时器

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

window.clearTimeout (timeoutID)

注意：

  • window可以省略
  • 里面的参数 timeoutID 是定时器的标识符

使用代码如下：

<body>
	<button>点击停止定时器</button>
	<script>
		var btn = document.querySelector('button');
		var timer = setTimeout(function() {
			console.log('爆炸了');
		}, 5000);
		btn.addEventListener('click' , function() {
			clearTimeout(timer);
		})
	</script>
</body>

3.3.3 setInterval() 定时器

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

window . setInterval(回调函数，[间隔的毫秒数]);

3.3.5 this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候，才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。
现阶段，我们先了解一下几个this指向
1.全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window )

4 PC端网页特效

在这里插入图片描述
在这里插入图片描述

4.1 元素偏移量 offset 系列

4.1.1 offset 概述

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小(宽度高度)
  • 注意:返回的数值都不带单位
    在这里插入图片描述
// 1.可以得到元素的偏移位置返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
//它以带有定位的父亲为准﹑如果么有父亲或者父亲没有定位则以 body为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小宽度和高度是包含padding + border + width
console.log(w.offsetwidth);
console.log(w.offsetHeight);
// 3．返回带有定位的父亲否则返回的是body
console.log(son.offsetParent);
console.log(son.parentNode);//返回父亲是最近一级的父亲亲爸爸不管父亲有没有定位

4.1.2 offset 与 style 区别

在这里插入图片描述
案例：获取鼠标在盒子内的坐标

# javascript # node.js
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区