持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

Bom操作

window

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

延时器和定时器

延时器

延迟一段时间之后才执行对应的代码

let timerId = setTimeout(回调函数, 延迟时间)

清除延时器

clearTimeout(timerId)

注意点

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

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

<script>
    //语法
    //setTimeout(回调函数,等待的毫秒数)
    //setTimeout只执行一次
    setTimeout(function () {
      console.log('起飞')
    }, 3000)
    //清除延迟函数
    let timer = setTimeout(function () {
      console.log('起飞')
    }, 2000)
    //需求  用户点击按钮将延迟函数清除
    const btn = document.querySelector('.btn')
    btn.addEventListener('click', function () {
      console.log(timer)
    })
  </script>

3秒后广告自动关闭

  <style>
    img {
      position: fixed;
      left: 0;
      bottom: 0;
    }
  </style>
</head>

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

定时器

区别:执行的次数

延时函数: 执行一次

间歇函数:每隔一段时间就执行一次,除非手动清除

location对象

主要负责网页的地址栏

location.href 跳转页面

location.reload() 刷新

locaction.search ?后面的内容

locaction.hash #后面的内容

<script>
    //href:获取完整路径
    //console.log(location)//对象
    console.log(location.href)
    console.dir(location)
    //1   利用location.href做网页跳转
    location.href = 'http://www.douyu.com'
    //assign()方法
    location.assign = ('http://www.douyu.com')
    //2      search  获取地址栏中携带的参数 符号?后面的参数

    //3      hash  获取地址栏后面的哈希值  符号#后面的部分
    //需要刷新浏览器可以拿到的 hash值
    //后续vue里用到   hash路由
    console.log(location.hash)
    //4   reload  用来刷新当前页面   传入参数true表示强制刷新
    const btn = document.querySelector('.btm')
    btn.addEventListener('click', function () {
      //刷新  相当于点了浏览器的刷新页面
    })
  </script>

navigator对象

主要用来获取浏览器的信息

navigator.userAgent

histroy对象

管理历史记录

history.forward()

history.back()

history.go()

本地存储

作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除

语法

存 localStorage.setItem('键', '值')

取 localStorage.getItem('键')

删 localStorage.removeItem('键')

注意：本地存储只能存储字符串

  <script>
    //1 存数据
    localStorage.setItem('uname', '王德发')
    //2 取数据
    console.log(localStorage.getItem('uname'))
    //3 改数据   原来有就是改没有就是存

    localStorage.setItem('uname', '厚礼蟹')
    localStorage.setItem('username', '厚礼蟹')
    //4 删数据
    // localStorage.removeItem('uname')
    //5 清空数据   删除所有
    localStorage.clear()
    //本地存储数据类型?
    
  </script>

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

转换成JSON字符串的语法

JSON.stringify(复杂数据类型) 将复杂数据转换成JSON字符串

JSON.parse(JSON字符串) 将JSON字符串转换成对象

学生信息表

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <link rel="stylesheet" href="./学生信息表/css/index.css" />
</head>

<body>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
    </tbody>
  </table>
  <script>
    //读取本地存储数据  stu就是本地存储命名
    const data = localStorage.getItem('stu')
    //如果有就返回 没有就声明一个空的数组 arr 渲染时使用
    const arr = data ? JSON.parse(data) : []
    // 当用户点击录入按钮   将数据存到本地存储中

    //获取info
    const info = document.querySelector('.info')
    //1  注册submit事件
    info.addEventListener('submit', function (e) {
      //阻止表单默认行为
      e.preventDefault()
      //获取输入框里的数据
      const uname = document.querySelector('.uname').value.trim()
      const age = document.querySelector('.age').value.trim()
      const gender = document.querySelector('.gender').value.trim()
      const salary = document.querySelector('.salary').value.trim()
      const city = document.querySelector('.city').value.trim()
      //进行数据的非空判断
      if (uname.length === 0 || age.length === 0 || salary.length === 0) {
        return alert('请输入数据')
      }
      //将数组构造成对象
      const obj = {
        id: arr.length + 1,
        uname,
        age,
        gender,
        salary,
        city,
      }
      //追加到数组
      arr.push(obj)
      //将数组转换为json格式的字符串同时存到本地存储
      localStorage.setItem('stu', JSON.stringify(arr))
      console.log(arr)
      this.reset()
      render()
    })

    //渲染函数
    //获取tbody
    const tbody = document.querySelector('tbody')
    function render() {
      //使用 map方法    加工遍历数组
      const newArr = arr.map(function (item, index) {
        console.log(item)//拿到的时对象
        return `
        <tr>
          <td>${item.id}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-id='${index}'>删除</a>
          </td>
          </tr>
      `
      })
      tbody.innerHTML = newArr.join('')
      console.log(newArr)
    }
    render()



    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        if (confirm('确定删除吗?')) {
          const index = e.target.dataset.id
          //console.log(index)
          //arr.splice(索引,删除几个)
          arr.splice(index, 1)
          //删除之后重新写入本地存储
          localStorage.setItem('stu', JSON.stringify(arr))
          render()
        }
      }
    })

    tbody.addEventListener('click', function (e) {
      console.log(e.target.tagName)
      //条件判断
      if (e.target.tagName === 'A') {
        //如何确定用户点击的是哪个a标签
        //得到当前元素自定义属性  data-id
        if (window.confirm('请确认删除')) {
          const id = e.target.dataset.id
          arr.splice(id, 1)
          //点击删除后要重新渲染
          render()
        }
      }
    })
  </script>
</body>

</html>

QQ截图20220608104547.png

操作数组的方法

map() 映射得到一个新的数组

join() 把数组转换为字符串

最后是原图(●'◡'●)

你真的懂Web APIs吗? 05