jsWeb Apis 05

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+f5
      location.reload(true)
    })
  </script>

navigator对象

常用来检测是否是移动端

  <script>
    // 检测 userAgent（浏览器信息）
    !(function () {
      const userAgent = navigator.userAgent
      // 验证是否为Android或iPhone
      const 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()