1.Bom（浏览器对象模型）简介

Bom包含Dom。

2.定时器-延时函数

setTimeout（回调函数体，延迟时间）这个函数只能执行1次

清楚延时 clearTimeout 用法和间歇函数雷同。返回的还是ID

对比间歇函数

<script>let timer =setTimeout(function(){console.log('你爹来喽')document.write('你爹来喽');},2000)//清楚clearTimeout(timer)</script>

案例五秒后广告小时

  <img src="./images/ad.png" alt=""><script>const img=document.querySelector('img')setTimeout(function(){img.style.display='none'},5000)
</script>

JS执行机制

案例1 经典面试题1

console.log(1111);
setTimeout(function(){console.log(2222);
},1000)
console.log(3333)
//输出结果 1111 3333 2222

案例2 经典面试题2

console.log(1111)
setTimeout(function(){console.log(2222)
},0)
console.log(3333)//输出1111 3333 2222

异步同步

同步任务异步任务

对上方两个经典面试题解释

事件循环执行过程流程图

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

案例 3

console.log(1)
document.addEventListener('click',function(){console.log(4)})
console.log(2)setTimeout(function(){console.log(3)
},3000)//输出 1 2 3 //4输出的时候需要检测是否已经点击

location 对象管的地址栏的东西

location.href 也可以读取也可以设置

console.log(window.location)
setTimout(function(){
//跳转页面地址  location.href也可以读取也可以设置window.location.href='http://www.baidu.cn'},1000)

案例2

 <a href="http://www.itcast.cn">支付成功<span>5</span>秒钟之后跳转到首页</a>// // 1. 获取元素// const a = document.querySelector('a')// // 2.开启定时器// // 3. 声明倒计时变量// let num = 5// let timerId = setInterval(function () {//   num--//   a.innerHTML = `支付成功<span>${num}</span>秒钟之后跳转到首页`//   // 如果num === 0 则停止定时器，并且完成跳转功能//   if (num === 0) {//     clearInterval(timerId)//     // 4. 跳转  location.href//     location.href = 'http://www.itcast.cn'//   }// }, 1000)

location.search属性

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

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

location.hash属性

获取符号 # 后面的部分

案例 1

 <a href="#/my">我的</a><a href="#/friend">关注</a><a href="#/download">下载</a>
//获取的就是 #后面的内容包含#

location.reload 方法

用于强制刷新网页

<a href="#/my">我的</a><a href="#/friend">关注</a><a href="#/download">下载</a><button class="reload">刷新</button><script>const reload = document.querySelector('.reload')reload.addEventListener('click', function () {// f5 刷新页面// location.reload()// 强制刷新  ctrl+f5location.reload(true)})</script>

navigator对象

常用来检测是否是移动端

  <script>// 检测 userAgent（浏览器信息）!(function () {const userAgent = navigator.userAgent// 验证是否为Android或iPhoneconst android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)// 如果是Android或iPhone，则跳转至移动站点if (android || iphone) {location.href = 'http://m.itcast.cn'}})();
</script>

histroy对象

histroy的数据类型是对象是用来管理历史记录的。

在实际开发中比较少用，但是会在一些OA系统中见到

<button>后退</button>
<button>前进</button>const back = document.quertSelector('button:first-child')
const forward = back.nextElementSibling
back.addEventListener()

jsWeb Apis 05相关推荐

43个热门Flex和ActionScript 3.0 APIs,技巧和工具
Sean Moore Bio 说道:秋天又一次来临了,是时候回顾一下2008年最热门的Flex和ActionScript 3.0 APIs,技巧和工具了,下面是我的总结,收集的比较全,Flex开发必备 ...
FD.io VPP 20.05 官方文档总目录：用户文档+开发文档+命令行
https://docs.fd.io/vpp/20.05/index.html Vector Packet Processing FD.io VPP ▼Vector Packet Processing ...
(转载)构建public APIs与CORS
from: https://segmentfault.com/a/1190000000709909 理由:在操作层面详细的讲解了跨域的操作.尤其是对于option请求的详解.收藏. 在构建Public ...
Top 50 Most Popular APIs on RapidAPI (2018)
You may be asking yourself: "What are the most popular and used APIs out there?" Ready to ...
05黑马QT笔记之自定义槽函数
05黑马QT笔记之自定义槽函数 1 自定义槽函数其实不难,没什么好说的,注意以下几点便可. 自定义参函数注意事项(Qt5): * 1)自定义槽函数可以是类成员函数(用得最多).全局普通函数.静态函数. ...
SkyDrive APIs——搭建环境(1)
引读: 相信不少人应该使用过微软官方出的SkyDrive网盘 APP,它能够轻松访问你的 SkyDrive 中的所有内容,包括他人与你共享的文件:对个人SkyDrive网盘的存储空间里的文件实现增删 ...
Web APIs 正则表达式综合案例丨小兔仙儿登录页面
目录综合案例:小兔鲜登录页面案例代码:CSS丨common 案例代码:CSS丨index 案例代码:CSS丨login 案例代码:CSS丨register 案例代码:HTML丨index 案例代码 ...
【JavaScript】Web APIs基础
文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来.通常是指 JavaScript,但将 HTML.SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分.DO ...
小白JavaScript学习笔记----web APIs
目录 web API 操作DOM BOM,比如控制网页元素交互等各种网页交互效果一.web APIs第一天(DOM-获取元素) 1.1变量声明 1.2Web API 基本认知 1.2.1作用和分类 ...

jsWeb Apis 05

location 对象管的地址栏的东西

navigator对象

jsWeb Apis 05相关推荐

最新文章

热门文章

jsWeb Apis 05

location 对象 管的地址栏的东西

navigator对象

jsWeb Apis 05相关推荐

最新文章

热门文章

location 对象管的地址栏的东西