Web APIs BOM

白昼苏打
138 阅读3分钟

1.BOM

 BOM(Browser Object Model ) 是浏览器对象模型
 window对象是一个全局对象，也可以说是JavaScript中的顶级对象

2 定时器-延时函数

 //语法：setTimeout(回调函数,等待的毫秒数)
 //setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
    setTimeout(function () {
    console.log('开始了')
   }, 3000)


//清除延时函数：
//let timer =setTimeout(回调函数,等待的毫秒数)
//clearTimeout(timer)
注意点
延时器需要等待,所以后面的代码先执行
每一次调用延时器都会产生一个新的延时器

案例:3秒钟后广告消失

  <style>
       img {
           position: fixed;
           left: 0;
           bottom: 0;
      }
</style>
 </head>
<body>
       <img src="./images/ad.png" alt="">
 <script>
//获取图片元素
        const img = document.querySelector('img')
         setTimeout(function () {
  //隐藏图片
        img.style.display = 'none'
         }, 3000)
   </script>

3.JS 执行机制

JS 中分为同步和异步
 同步
 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步
 做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
 
 
 异步
 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事
 情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
他们的本质区别： 这条流水线上各个流程的执行顺序不同

image.png

image.png

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

4.location对象

image.png

image.png

案例 : 5秒钟后自动跳转到百度页面

方法一:

<style>
     a {
        text-decoration: none;
        font-size: 20px;
      }

    a span {
          color: red;
        }
  </style>
 </head>
 <body>
       <a href="http://baidu.com">支付页面将在 <span>6</span> 秒后跳转到网页</a>
 <script>
        const a = document.querySelector('a')
        let num = 6
        let times = setInterval(function () {
           num--
        a.innerHTML = `支付页面将在<span>${num}</span>秒后跳转到网页`
     if (num === 1) {
           clearInterval(times)
           location.href = "http://baidu.com"
         }
       }, 1000)
 </script>
</body>

image.png

方法二:

<style>
     a {
        text-decoration: none;
        font-size: 20px;
       }
    a span {
           color: red;
          }
 </style>
</head>
<body>
      <a href="http://baidu.com">支付页面将在 <span>5</span> 秒后跳转到网页</a>
 <script>
          const a = document.querySelector('a')
          let num = 6
          function count() {
          num--
  a.innerHTML = `支付页面将在 <span>${num}</span> 秒后跳转到网页`
  if (num === 1) location.href = "http://baidu.com"
  setTimeout(count, 1000)
}
count()
</script>
</body>

5.location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法：

image.png

image.png

image.png

location对象search案例
 <body>
     <form action="" autocomplete="off">
       用户名：<input type="text" name="user"> <br>
       密&emsp;码：<input type="password" name="pwd"> <br>
       <button>提交</button><br>
     </form>
  <button id="btn">查询子符串</button>
 <script>
document.querySelector('#btn').addEventListener('click', function () {
  console.log(location.search)
})
 </script>
</body>

image.png

<body>
<button class="assign">assign跳转</button>
<button class="replace">replace替换</button>
<button class="reload">reload刷新</button>
<script>
    /* 
    location对象 ： 浏览器地址栏 url
        1.重点掌握： location.href = 'url'
        2.三个方法
            location.assign('url')  : 跳转（可以回退）
            location.replace('url')  : 替换（不可以回退）
            location.reload('url')  : 刷新
    */ 
   
    console.log( window.location )
    console.log( location.hostname )//域名
    //重点 href属性 ： 用于跳转页面
    console.log( location.href )//完整网址
    //修改location.href可以实现页面挑战
    // location.href = 'http://www.baidu.com'


    document.querySelector('.assign').onclick = function(){
        // assign方法作用 和  location.href完全一致
        location.assign('http://www.baidu.com')
    }
    document.querySelector('.replace').onclick = function(){
        //替换 ：无法回退
        location.replace('http://www.baidu.com')
    }
    document.querySelector('.reload').onclick = function(){
        //刷新： 相当于F5
        location.reload()
    }
</script>

image.png

6.history对象

        history对象 ： 历史记录
        history.back() : 返回上一页
        history.forward() : 前进下一页
        history.go(数字) :
            负数： 回退   -1 ：回退一个页面  -2：回退两个页面
            0 : 刷新
            正数： 前进  1：前进一个页面  2：前进两个页面

7.本地存储分类- localStorage

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
  特性：
  可以多窗口（页面）共享（同一浏览器可以共享）
  以键值对的形式存储使用
 <body>
  <button class="setItem">存数据</button>
  <button class="getItem">取数据</button>
  <button class="removeItem">删除数据</button>
  <button class="clear">清空数据</button>
<script>
    /* 
    1.localStorage : 本地存储
        * 经典场景： 免登录
    2.语法 ：   
        存数据 ：  localStorage.setItem('属性名',属性值)
        取数据 ：  localStorage.getItem('属性名')
        删数据 :   localStorage.removeItem('属性名')
        清空数据 : localStorage.clear()
    3.注意点 ：
        3.1 永久存储 ： 数据存在硬盘中
        3.2 只能存储string类型数据, 如果存储其他类型编译器会自动转换string类型存储

    *** localStorage与sessionStorage的区别（异同点）
    */
    //存数据 ：  localStorage.setItem('属性名',属性值)
    document.querySelector('.setItem').onclick = function () {
        localStorage.setItem('username', '张三')
        localStorage.setItem('password', '20220122')
        localStorage.setItem('age', {
            name: '1111'
        })
    }

    //取数据 ：  localStorage.getItem('属性名')
    document.querySelector('.getItem').onclick = function () {
        //读取数据有返回值
        let uname = localStorage.getItem('username')
        console.log(uname)
    }

    // 删数据 :   localStorage.removeItem('属性名')
    document.querySelector('.removeItem').onclick = function () {
        localStorage.removeItem('age')
    }

    //清空数据 : localStorage.clear()
    document.querySelector('.clear').onclick = function () {
        localStorage.clear()
    }
</script>
</body>

image.png

8.临时存储:sessionStorage

 <body>
      <button class="setItem">存数据</button>
      <button class="getItem">取数据</button>
      <button class="removeItem">删除数据</button>
      <button class="clear">清空数据</button>
 <script>
    /* 
    1.sessionStorage : 临时存储
        * 经典场景： 页面间传值
    2.语法 ：   
        存数据 ：  sessionStorage.setItem('属性名',属性值)
        取数据 ：  sessionStorage.getItem('属性名')
        删数据 :   sessionStorage.removeItem('属性名')
        清空数据 : sessionStorage.clear()
    3.注意点 ：
        3.1 临时存储 ： 数据存在内存中, 页面一旦关闭数据自动清空
        3.2 只能存储string类型数据, 如果存储其他类型编译器会自动转换string类型存储

    *** localStorage与sessionStorage区别（异同点）
        * 相同点： 作用一致，都是存储数据
        * 不同点： 存储方式不同
            * localStorage  : 硬盘存储 
            * sessionStorage : 内存存储 

    
    */    
    //存数据 ：  sessionStorage.setItem('属性名',属性值)
    document.querySelector('.setItem').onclick = function(){
        sessionStorage.setItem('username','ikun')
        sessionStorage.setItem('password','20220122')
        sessionStorage.setItem('age',30)
    }

    //取数据 ：  sessionStorage.getItem('属性名')
    document.querySelector('.getItem').onclick = function(){
        //读取数据有返回值
        let uname =  sessionStorage.getItem('username')
        console.log(uname)
    }

    // 删数据 :   sessionStorage.removeItem('属性名')
    document.querySelector('.removeItem').onclick = function(){
        sessionStorage.removeItem('age')
    }

    //清空数据 : sessionStorage.clear()
    document.querySelector('.clear').onclick = function(){
        sessionStorage.clear()
    }
    
</script>
</body>

  <script>
         //存储数据
          localStorage.setItem('uname', '张三')
          localStorage.setItem('age', '18')
        //取出数据
          console.log(localStorage.getItem('age'))
 </script>

9.JSON

 1.JSON是什么: 是一种数据格式，本质字符串
   JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
 2.JSON作用 :  解决数据 跨平台兼容性
 3.JSON语法 : 
        json -> js :  let jsObj = JSON.parse( json格式 )
        js -> json :   let jsonStr = JSON.stringify( js对象 )
  //json : 是一种数据格式，本质是字符串
    let json = '{ "name":"张三","age":"20","hobby":["敲代码","学习"] }'
    console.log( json )

    //js对象 
    let js = {
        name:'ikun',
        age:30,
        hobby:['上课','唱歌']
    }

    //(1)json -> js :   let jsObj =  JSON.parse(json格式)
    let jsObj = JSON.parse( json )
    console.log( jsObj )

    //(2)js -> json :  let jsonStr = JSON.stringify( js对象 )
    let jsonStr = JSON.stringify( js )
    console.log(jsonStr)

10.join解决localString对象存储问题

 <body>
<button class="btn1">存对象</button>
<button class="btn2">取对象</button>
<script>
    /* 
    json -> js :   let jsObj = JSON.parse( json格式 )
    js -> json :   let jsonStr = JSON.stringify( js对象 )
    */  

    let obj = {
        name:'ikun',
        age:30,
        sex:'男'
    }
    
    document.querySelector('.btn1').onclick = function(){
        //存 ： (1)js -> json  (2)存json
        // //(1)js->json
        // let jsonStr = JSON.stringify( obj )
        // //(2)存json
        // localStorage.setItem('user',jsonStr)

        //合写一行
        localStorage.setItem('user',JSON.stringify( obj ))
    }

    document.querySelector('.btn2').onclick = function(){
        //取: (1)取json  (2)json->js
        // //(1)取json
        // let jsonStr = localStorage.getItem('user')
        // //(2)json->js
        // let jsObj = JSON.parse( jsonStr )
        //合写一行
        let jsObj = JSON.parse( localStorage.getItem('user') )
        console.log( jsObj )
    }
</script>

11.存储复杂数据类型

image.png

image.png

image.png

image.png

<script>
const obj = [{
    uname: '张三',
    age: '18'
  },
  {
    uname: '李四',
    age: '20'
  }
]
//转成字符串
localStorage.setItem('obj', JSON.stringify(obj))
const arr = localStorage.getItem('obj')
console.log(arr)
const arr1 = JSON.parse(localStorage.getItem('obj'))
console.log(arr1)
</script>

image.png

avatar
文章
阅读
粉丝