前端学习 js-api（3）日期对象，节点，M端事件，插件，BOM，location，navigator，history，js执行机制，延时函数

方法	作用	说明
getFullYear（）	获得年份	获取四位数年份
getMonth（）	或得月份	取值为0-11
getDate（）	获取月份中的每一天	不同月份取值也不相同
getDay（）	获取星期	取值为0-6
getHours（）	获取小时	取值为0-23
getMinutes（）	获取分钟	取值为0-59
getSeconds（）	获取秒	取值为0-59

new Date().toLocaleString() 可以或得时间对象

1.3 时间戳

使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

什么是时间戳：

是指1970年01月01日00分00秒起至现在的毫秒数，它是一种特殊的计量事件的方式

算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数

剩余时间毫秒数转换为剩余时间的脸月日时分秒就是倒计时时间

比如将来时间戳 2000ms - 现在时间戳1000ms = 1000ms

1000ms转换为就是 0小时0分1秒

获取时间戳的三种方法

1.getTime（）方法

2.简写 +new Date（）

3. 使用Date.now（）

第三种方法只能得到当前时间的时间戳，前两种可以返回指定时间的时间戳

倒计时效果

1.通过时间戳得到毫秒，需要转为为秒在计算

2.转换公式

d=parseInt（总秒数/60/60/24）;计算天数

h=parseInt（总秒数/60/60%24）;计算小时

m=parseInt（总秒数/60%60）;计算分钟

s=parseInt（总秒数%60）;计算当前秒数

2. 节点

1.1 DOM节点

DOM树里面每一个内容都称之为节点

节点类型：

元素节点：

所有的标签比如body ， div

html是根节点

属性节点

所有的属性比如href

文本节点

所有的文本

其他

1.2 查找节点

父节点查找

parentNode属性

返回最近一级的父节点找不到返回null

子元素.parentNode

子节点查找

childNodes

获得所以子节点，包括文本节点（空格，换行），注释节点等

children属性（重点）

仅获得所有元素节点

返回的还是一个伪数组

父元素.children

兄弟关系查找：

下一个兄弟节点

nextElementSibling属性

上一个兄弟节点

previousElementSibling属性

1.3 增加节点

1.创建节点

即创造出一个新的网页元素，在添加到网页内，一般先创建节点，然后插入节点

创建节点方法：

document.createElement（'标签名'）

2.追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素

父元素.appendChild（要插入的元素）

插入到父元素中某个子元素

父元素.insertBefore（要插入的元素，在哪个元素前面）

3. 克隆节点

特殊情况下，我们新增节点，按照如下操作

复制一个原有节点

把复制的节点放入指定的元素的内部

元素.cloneNode（布尔值）

x小括号为false为浅克隆，为true时是深克隆

浅克隆只克隆标签不克隆内容

深克隆克隆全部内容

4.删除节点

若一个节点在页面中已不需要时，可以删除它

在js原生DOM操作中，要删除元素必须通过父元素删除

语法：

父元素.removeChild(要删除的元素)

注：

如不存在父子关系则删除不成功

删除节点和隐藏节点（display：none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

3. M端事件（移动端）

移动端也有自己独特的地方，比如触屏事件touch（也称触摸事件），android和ios都有

touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触碰事件可响应用户手指（或触控笔）对屏幕或者触控板操作

常见的触屏事件如下：

触屏事件touch	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DON元素上滑动时触发
touchend	手指从一个DOM元素上移动时触发

4. 使用第三方插件

插件：就是别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果

学习插件的基本过程：

熟悉官网，了解插件可以完成什么需求 https://www.swiper.com.cn/

看在线演示，找到符合自己需求的demo

查看基本使用流程

查看api文档，去配置自己的插件

注意：多个swiper同时使用的时候，类名需要注意区分

5. BOM

BOM（Browser Object Model）是浏览器对象模型

window对象是一个全局对象，也可以说是js中的顶级对象
向document ， alert（），console.log（）这些都是window的属性，基本BOM的属性和方法都是window的
所有通过var定义在全局作用域中的变量，函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

6. 定时器-延时函数

js内置的一个用来让代码延迟执行的函数，叫setTimeout

语法：

setTimeout（回调函数，等待的毫秒数）

setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

清除延时函数

let timer = setTimeout（回调函数，等待的毫秒数）

clearTimeout（timer）

注意点

延时需要等待，所以后面的代码先执行

每一次调用延时器都会产生一个新的延时器

两种定时器对比：执行的次数

延时函数：执行一次

间隙函数：每隔一段时间就执行一次，除非手动清除

7. js执行机制

js语言的一大特定就是单线程，也就是说，同一时间只能做一件事

这是因为js这门语言诞生的使命所致----js是为了处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样导致的问题是：如果js执行的时间过长，这样就会造成页面渲染不连贯，导致页面渲染加载阻塞的感觉

为了解决这个问题，利用多核CPU的计算能力，HTML5提出了Web Worker标准，允许js脚本中创建多个线程。于是，js中出现了同步和异步

同步：

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了，再去切菜，炒菜

异步：

你在做一件事情时，因为这件事情会花费很长时间，在做这件事情的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜

他们的本质区别：这条流水线上各个流程的执行顺序不同

同步任务

同步任务都在主程序上执行，形成一个执行栈。

异步任务

js的异步任务是通过回调函数实现的。

一般而言，异步任务有以下三种类型：

1.普通事件，如click，resize等

2.资源加载，如load，error等

3.定时器，包括setInterval，setTimeout等

异步任务相关添加到任务队列中（任务队列也称为消息队列）

js执行机制：

1.先执行执行栈中的同步任务

2.异步任务放入任务队列中

3.一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断地重复获得任务，执行任务，在获取任务，在执行，所以这种机制被称为事件循环（event loop）

8. location对象

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

常用属性和方法：

href属性获取完整的URL地址，对其赋值时用于地址的跳转

// 可以得到当前文件的URl地址

console.log(location.href)

//可以通过js方式跳转到目标地址

location.href = 'http://www.itcast.com'

search属性获取地址中携带的参数，符号？后面部分

console.log(location.search)

hash属性获取地址中的哈希值，符号#后面部分

console.log(location.hash)

reload方法用来刷新当前页面，传入参数true时表示强制刷新

<button>点击刷新</button>

<script>

let btn = document.querySelector('button')

btn.addEventListener('click',function(){

location.reload(true)

//参数为true时是强制刷新

})

</script>

9. navigator对象

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

通过userAgent检测浏览器的版本及平台

//检测userAgent（浏览器信息）

！（function（））{

const userAgent = navigator.userAgent

// 验证是否为Anroid或iPhone

const android = userAgent.math(/(Android);?[￥s￥/]+([￥d.]+)?/)

const iphone = userAgent.math(/(iPhone￥sOS)￥s([￥d_]+)/)

// 如果是Android 或iPhone，则跳转至移动站点

if(android || iphone) {

location.href='http://m.itcast.cn'

}

}

10 history 对象

history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进，后退，历史记录等

常用属性和方法：

history对象方法	作用
back（）	可以后退功能
forward（）	前进功能
go（参数）	前进和后退功能，参数如果是1前进一个页面，如果是-1后退一个页面