哪有时间学JavaScript51~77

14 数组的常用方法

• 数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了

• 比如我们想改变一个数组

  // 创建一个数组
  var arr = [1, 2, 3]
  
  // 我们想把数组变成只有 1 和 2
  arr = [1, 2]
  

  • 这样肯定是不合理，因为这样不是在改变之前的数组
  • 相当于心弄了一个数组给到 arr 这个变量了
  • 相当于把 arr 里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改
  • 所以我们就需要借助一些方法，在不改变存储空间的情况下，把存储空间里面的数据改变了

数组常用方法之 push

• push 是用来在数组的末尾追加一个元素

  var arr = [1, 2, 3]
  
  // 使用 push 方法追加一个元素在末尾
  arr.push(4)
  
  console.log(arr) // [1, 2, 3, 4]
  

数组常用方法之 pop

• pop 是用来删除数组末尾的一个元素

  var arr = [1, 2, 3]
  
  // 使用 pop 方法删除末尾的一个元素
  arr.pop()
  
  console.log(arr) // [1, 2]
  

数组常用方法之 unshift

• unshift 是在数组的最前面添加一个元素

  var arr = [1, 2, 3]
  
  // 使用 unshift 方法想数组的最前面添加一个元素
  arr.unshift(4)
  
  console.log(arr) // [4, 1, 2, 3]
  

数组常用方法之 shift

• shift 是删除数组最前面的一个元素

  var arr = [1, 2, 3]
  
  // 使用 shift 方法删除数组最前面的一个元素
  arr.shift()
  
  console.log(arr) // [2, 3]
  

数组常用方法之 splice

• splice 是截取数组中的某些内容，按照数组的索引来截取

• 语法： splice(从哪一个索引位置开始，截取多少个，替换的新元素) （第三个参数可以不写）

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 splice 方法截取数组
  arr.splice(1, 2)
  
  console.log(arr) // [1, 4, 5]
  

  • arr.splice(1, 2) 表示从索引 1 开始截取 2 个内容
  • 第三个参数没有写，就是没有新内容替换掉截取位置

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 splice 方法截取数组
  arr.splice(1, 2, '我是新内容')
  
  console.log(arr) // [1, '我是新内容', 4, 5]
  

  • arr.splice(1, 2, '我是新内容') 表示从索引 1 开始截取 2 个内容
  • 然后用第三个参数把截取完空出来的位置填充

数组常用方法之 reverse

• reverse 是用来反转数组使用的

  var arr = [1, 2, 3]
  
  // 使用 reverse 方法来反转数组
  arr.reverse()
  
  console.log(arr) // [3, 2, 1]
  

数组常用方法之 sort

• sort 是用来给数组排序的

  var arr = [2, 3, 1]
  
  // 使用 sort 方法给数组排序
  arr.sort()
  
  console.log(arr) // [1, 2, 3]
  

  • 这个只是一个基本的简单用法

数组常用方法之 concat

• concat 是把多个数组进行拼接

• 和之前的方法有一些不一样的地方，就是 concat 不会改变原始数组，而是返回一个新的数组

  var arr = [1, 2, 3]
  
  // 使用 concat 方法拼接数组
  var newArr = arr.concat([4, 5, 6])
  
  console.log(arr) // [1, 2, 3]
  console.log(newArr) // [1, 2, 3, 4, 5, 6]
  

  • 注意： concat 方法不会改变原始数组

数组常用方法之 join

• join 是把数组里面的每一项内容链接起来，变成一个字符串

• 可以自己定义每一项之间链接的内容 join(要以什么内容链接)

• 不会改变原始数组，而是把链接好的字符串返回

  var arr = [1, 2, 3]
  
  // 使用 join 链接数组
  var str = arr.join('-')
  
  console.log(arr) // [1, 2, 3]
  console.log(str) // 1-2-3
  

  • 注意： join 方法不会改变原始数组，而是返回链接好的字符串

数组常用方法之 indexOf

• indexOf 用来找到数组中某一项的索引

• 语法： indexOf(你要找的数组中的项)

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 indexOf 超找数组中的某一项
  var index = arr.indexOf(3)
  
  console.log(index) // 2
  

  • 我们要找的是数组中值为 3 的那一项
  • 返回的就是值为 3 的那一项在该数组中的索引

• 如果你要找的内容在数组中没有，那么就会返回 -1

  var arr = [1, 2, 3, 4, 5]
  
  // 使用 indexOf 超找数组中的某一项
  var index = arr.indexOf(10)
  
  console.log(index) // -1
  

  • 你要找的值在数组中不存在，那么就会返回 -1

数组常用方法之 forEach

• 和 for 循环一个作用，就是用来遍历数组的

• 语法：arr.forEach(function (item, index, arr) {})

  var arr = [1, 2, 3]
  
  // 使用 forEach 遍历数组
  arr.forEach(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
  })
  

  • forEach() 的时候传递的那个函数，会根据数组的长度执行
  • 数组的长度是多少，这个函数就会执行多少回

数组常用方法之 map

• 和 forEach 类似，只不过可以对数组中的每一项进行操作，返回一个新的数组

  var arr = [1, 2, 3]
  
  // 使用 map 遍历数组
  var newArr = arr.map(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    return item + 10
  })
  
  console.log(newArr) // [11, 12, 13]
  

数组常用方法之 filter

• 和 map 的使用方式类似，按照我们的条件来筛选数组

• 把原始数组中满足条件的筛选出来，组成一个新的数组返回

  var arr = [1, 2, 3]
  
  // 使用 filter 过滤数组
  var newArr = arr.filter(function (item, index, arr) {
    // item 就是数组中的每一项
    // index 就是数组的索引
    // arr 就是原始数组
    return item > 1
  })
  
  console.log(newArr) // [2, 3]
  

  • 我们设置的条件就是 > 1
  • 返回的新数组就会是原始数组中所有 > 1 的项

15 字符串

15-1 创建字符串

• 我们创建字符串也分为两种方法 字面量 和 构造函数

• 字面量：

  var str = 'hello'
  

• 构造函数创建

  var str = new String('hello')
  

15-2 字符集

ASCII 字符集

• 我们都知道，计算机只能存储 0101010 这样的二进制数字
• 那么我们的 a ~ z / A ~ Z / $ / @ /… 之类的内容也有由二进制数字组成的
• 我们可以简单的理解为， a ~ z / A ~ Z / $ / @ /… 之类的内容都有一个自己的编号，然后在计算机存储的时候，是存储的这些编号，我们看的时候，也是通过这些编号在解析成我们要看到的内容给我们看到
• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CAfyXFJb-1673443390145)(%E7%AC%94%E8%AE%B0.assets/ASCII%E6%8E%A7%E5%88%B6%E5%AD%97%E7%AC%A6.png)]
• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8SdIy8vi-1673443390152)(%E7%AC%94%E8%AE%B0.assets/ASCII%E6%98%BE%E7%A4%BA%E5%AD%97%E7%AC%A6.png)]
• 上面的就是 ASCII 对照表，我们只需要知道他是这么存储的就好

unicode 编码

• 我们看到了，ASCII 只有这 128 个字符的编码结构
• 但是因为 ASCII 出现的比较早，而且是美国发明的，早先时候这些内容就够用了
• 因为存储一些英文的内容，传递一些英文的文章什么的都够用了
• 那么对于这个世界来说肯定是不够用的
• 因为我们的汉字没有办法存储，包括一些其他国家的语言也没有办法存储
• 所以就出现了 unicode 编码，也叫（万国码，统一码）
• unicode 对照表就是一个和 ASCII 一样的对照表，只不过变得很大很大，因为存储的内容特别的多
• 而且包含了世界上大部分国家的文字，所以我们的文字和字符现在在存储的时候，都是按照 unicode 编码转换成数字进行存储
• 我们的 UTF-8 就是一种 8 位的 unicode 字符集

15-3 字符串的常用方法

• 我们操作字符串，也有一堆的方法来帮助我们操作
• 字符串和数组有一个一样的地方，也是按照索引来排列的

charAt

• charAt(索引) 是找到字符串中指定索引位置的内容返回

  var str = 'Jack'
  
  // 使用 charAt 找到字符串中的某一个内容
  var index = str.charAt(2)
  
  console.log(index) // c
  

  • 因为字符串也是按照索引进行排列的，也是同样从 0 开始
  • 所以索引 2 的位置就是 c

• 如果没有对应的索引，那么就会返回 空字符串

  var str = 'Jack'
  
  // 使用 charAt 找到字符串中的某一个内容
  var index = str.charAt(10)
  
  console.log(index) // ''
  

  • 这个字符串根本没有索引 10 的位置
  • 所以就会返回一个空字符串 ''

charCodeAt

• charCodeAt(索引) 就是返回对应索引位置的 unicode 编码

  var str = 'Jack'
  
  // 使用 charAt 找到字符串中的某一个内容
  var index = str.charCodeAt(0)
  
  console.log(index) // 74
  

  • 因为 J 在 unicode 对照表里面存储的是 74，所以就会返回 74

indexOf

• indexOf 就是按照字符找到对应的索引

  var str = 'Jack'
  
  // 使用 indexOf 找到对应的索引
  var index = str.indexOf('J')
  
  console.log(index) // 0
  

  • 因为字符 J 在字符串 Jack 中的索引位置是 0
  • 所以会返回 0

substring

• substring 是用来截取字符串使用的

• 语法： substring(从哪个索引开始，到哪个索引截止)，包含开始索引，不包含结束索引

  var str = 'hello'
  //         01234
  
  // 使用 substring 截取字符串
  var newStr = str.substring(1, 3)
  
  console.log(newStr) // el
  

  • 从索引 1 开始，到索引 3 截止，包含前面的索引不包含后面的索引
  • 所以返回的是 el

substr

• substr 也是用来截取字符串的

• 语法：substr(从哪个索引开始，截取多少个)

  var str = 'hello'
  //         01234
  
  // 使用 substr 截取字符串
  var newStr = str.substr(1, 3)
  
  console.log(newStr) // ell
  

  • 这个方法和 substring 不一样的是，第二个参数是截取多少个
  • 从索引 1 开始，截取 3 个，所以得到的是 ell

toLowerCase 和 toUpperCase

• 这两个方法分别使用用来给字符串转成 小写字母 和 大写字母 的

  var str = hello
  
  // 使用 toUpperCase 转换成大写
  var upper = str.toUpperCase()
  
  console.log(upper) // HELLO
  
  // 使用 toLowerCase 转换成小写
  var lower = upper.toLowerCase()
  
  console.log(lower) // hello
  

16 Math

• Math 是 js 的一个内置对象，提供了一堆的方法帮助我们操作 数字

16-1 random

• Math.random() 这个方法是用来生成一个 0 ~ 1 之间的随机数

• 每次执行生成的数字都不一样，但是一定是 0 ~ 1 之间的

• 生成的数字包含 0 ，但是不包含 1

  var num = Math.random()
  console.log(num) // 得到一个随机数
  

16-2 round

• Math.round() 是将一个小数 四舍五入 变成一个整数

  var num = 10.1
  console.log(Math.round(num)) // 10
  
  var num2 = 10.6
  console.log(Math.round(num2)) // 11
  

16-3 abs

• Math.abs() 是返回一个数字的 绝对值

  var num = -10
  console.log(math.abs(num)) // 10
  

16-4 ceil

• Math.ceil() 是将一个小数 向上取整 得到的整数

  var num = 10.1
  console.log(Math.ceil(num)) // 11
  
  var num2 = 10.9
  console.log(Math.ceil(num2)) // 11
  

16-5 floor

• Math.floor() 是将一个小数 向下取整 的到的整数

  var num = 10.1
  console.log(Math.floor(num)) // 10
  
  var num2 = 10.9
  console.log(Math.floor(num2)) // 10
  

16-6 max

• Math.max() 得到的是你传入的几个数字之中 最大 的那个数字

  console.log(Math.max(1, 2, 3, 4, 5)) // 5
  

16-7 min

• Math.min() 得到的是你传入的几个数字之中 最小 的那个数字

  console.log(Math.min(1, 2, 3, 4, 5)) // 1
  

16-8 PI

• Math.PI 得到的是 π 的值，也就是 3.1415936...

  console.log(Math.PI) // 3.141592653589793
  

  • 因为计算机的计算精度问题，只能得到小数点后 15 位
  • 使用 Math.PI 的时候，是不需要加 () 的

17 Date

• js 提供的内置构造函数，专门用来获取时间的

17-1 new Date()

• new Date() 在不传递参数的情况下是默认返回当前时间

  var time = new Date()
  console.log(time) // 当前时间 Fri Mar 01 2019 13:11:23 GMT+0800 (中国标准时间)
  

• new Date() 在传入参数的时候，可以获取到一个你传递进去的时间

  var time = new Date('2019-03-03 13:11:11')
  console.log(time) // Sun Mar 03 2019 13:11:11 GMT+0800 (中国标准时间)
  

• new Date() 传递的参数有多种情况

  1. 传递两个数字，第一个表示年，第二个表示月份

     var time = new Date(2019, 00) // 月份从 0 开始计数，0 表示 1月，11 表示 12月
     console.log(time) // Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)
     

  2. 传递三个数字，前两个不变，第三个表示该月份的第几天，从 1 到 31

     var time = new Date(2019, 00, 05) 
     console.log(time) // Sat Jan 05 2019 00:00:00 GMT+0800 (中国标准时间)
     

  3. 传递四个数字，前三个不变，第四个表示当天的几点，从 0 到 23

     var time = new Date(2019, 00, 05, 22) 
     console.log(time) // Sat Jan 05 2019 22:00:00 GMT+0800 (中国标准时间)
     

  4. 传递五个数字，前四个不变，第五个表示的是该小时的多少分钟，从 0 到 59

     var time = new Date(2019, 00, 05, 22, 33) 
     console.log(time) // Sat Jan 05 2019 22:33:00 GMT+0800 (中国标准时间)
     

  5. 传递六个数字，前五个不变，第六个表示该分钟的多少秒，从 0 到 59

     var time = new Date(2019, 00, 05, 22, 33, 55) 
     console.log(time) // Sat Jan 05 2019 22:33:55 GMT+0800 (中国标准时间)
     

  6. 传入字符串的形式

     console.log(new Date('2019')) 
     // Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)
     console.log(new Date('2019-02')) 
     // Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)
     console.log(new Date('2019-02-03')) 
     // Sun Feb 03 2019 08:00:00 GMT+0800 (中国标准时间)
     console.log(new Date('2019-02-03 13:')) 
     // Sun Feb 03 2019 13:00:00 GMT+0800 (中国标准时间)
     console.log(new Date('2019-02-03 13:13:')) 
     // Sun Feb 03 2019 13:13:00 GMT+0800 (中国标准时间)
     console.log(new Date('2019-02-03 13:13:13')) 
     // Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)
     

17-2 将日期字符串格式化成指定内容

• 比如我们得到的时间字符串是 Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)
• 我指向得到这个日期中是那一年，我们就要靠截取字符串的形式得到
• 但是现在 js 为我们提供了一系列的方法来得到里面的指定内容

getFullYear

• getFullYear() 方式是得到指定字符串中的哪一年

  var time = new Date(2019, 03, 03, 08, 00, 22)
  console.log(time.getFullYear()) // 2019
  

getMonth

• getMonth() 方法是得到指定字符串中的哪一个月份

  var time = new Date(2019, 03, 03, 08, 00, 22)
  console.log(time.getMonth()) // 3
  

  • 这里要有一个注意的地方
  • 月份是从 0 开始数的
  • 0 表示 1月，1 表示 2月，依此类推

getDate

• getDate() 方法是得到指定字符串中的哪一天

  var time = new Date(2019, 03, 03, 08, 00, 22)
  console.log(time.getDate()) // 3
  

getHours

• getHours() 方法是得到指定字符串中的哪小时

  var time = new Date(2019, 03, 03, 08, 00, 22)
  console.log(time.getHours()) // 8
  

getMinutes

• getMinutes() 方法是得到指定字符串中的哪分钟

  var time = new Date(2019, 03, 03, 08, 00, 22)
  console.log(time.getMinutes()) // 0
  

getSeconds

• getSeconds() 方法是得到指定字符串中的哪秒钟

  var time = new Date(2019, 03, 03, 08, 00, 22)
  console.log(time.getSeconds()) // 22
  

getDay

• getDay() 方法是得到指定字符串当前日期是一周中的第几天（周日是 0，周六是 6）

  var time = new Date(2019, 03, 08, 08, 00, 22)
  console.log(time.getDay()) // 1
  

getTime

• getTime() 方法是得到执行时间到 格林威治时间 的毫秒数

  var time = new Date(2019, 03, 08, 08, 00, 22)
  console.log(time.getTime()) // 1554681622000
  

获取时间差

• 是指获取两个时间点之间相差的时间
• 在 js 中是不能用时间直接做 减法 的
• 我们需要一些特殊的操作
• 在编程的世界里面，有一个特殊的时间，是 1970年01月01日00时00分00秒
• 这个时间我们叫做 格林威治时间
• 所有的编程世界里面，这个时间都是一样的，而且 格林威治时间 的数字是 0
• 从 格林威治时间 开始，每经过1毫秒，数字就会 + 1
• 所以我们可以获取到任意一个时间节点到 格林威治时间 的毫秒数
• 然后在用两个毫秒数相减，就能得到两个时间点之间相差的毫秒数
• 我们在通过这个毫秒数得到准确的时间

18 定时器

• 在 js 里面，有两种定时器，倒计时定时器 和 间隔定时器

18-1 倒计时定时器

• 倒计时多少时间以后执行函数

• 语法： setTimeout(要执行的函数，多长时间以后执行)

• 会在你设定的时间以后，执行函数

  var timerId = setTimeout(function () {
    console.log('我执行了')
  }, 1000)
  console.log(timerId) // 1
  

  • 时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟
  • 所以会在页面打开 1 秒钟以后执行函数
  • 只执行一次，就不在执行了
  • 返回值是，当前这个定时器是页面中的第几个定时器

18-2 间隔定时器

• 每间隔多少时间就执行一次函数

• 语法： setInterval(要执行的函数，间隔多少时间)

  var timerId = setInterval(function () {
    console.log('我执行了')
  }, 1000)
  

  • 时间和刚才一样，是按照毫秒进行计算的
  • 每间隔 1 秒钟执行一次函数
  • 只要不关闭，会一直执行
  • 返回值是，当前这个定时器是页面中的第几个定时器

18-3 定时器的返回值

• 设置定时器的时候，他的返回值是部分 setTimeout 和 setInterval 的

• 只要有一个定时器，那么就是一个数字

  var timerId = setTimeout(function () {
    console.log('倒计时定时器')
  }, 1000)
  
  var timerId2 = setInterval(function () {
    console.log('间隔定时器')
  }, 1000)
  
  console.log(timerId) // 1
  console.log(timerId2) // 2
  

18-4 关闭定时器

• 我们刚才提到过一个 timerId，是表示这个定时器是页面上的第几个定时器

• 这个 timerId 就是用来关闭定时器的数字

• 我们有两个方法来关闭定时器 clearTimeout 和 clearInterval

  var timerId = setTimeout(function () {
    console.log('倒计时定时器')
  }, 1000)
  clearTimeout(timerId)
  

  • 关闭以后，定时器就不会在执行了

  var timerId2 = setInterval(function () {
    console.log('间隔定时器')
  }, 1000)
  coearInterval(timerId2)
  

  • 关闭以后定时器就不会在执行了

• 原则上是

  • clearTimeout 关闭 setTimeout
  • clearInterval 关闭 setInterval

• 但是其实是可以通用的，他们可以混着使用

  var timerId = setTimeout(function () {
    console.log('倒计时定时器')
  }, 1000)
  // 关闭倒计时定时器
  clearInterval(timerId)
  
  var timerId2 = setInterval(function () {
    console.log('间隔定时器')
  }, 1000)
  // 关闭间隔定时器
  clearTimeout(timerId2)
  

二 BOM

• BOM（Browser Object Model）： 浏览器对象模型
• 其实就是操作浏览器的一些能力
• 我们可以操作哪些内容
  • 获取一些浏览器的相关信息（窗口的大小）
  • 操作浏览器进行页面跳转
  • 获取当前浏览器地址栏的信息
  • 操作浏览器的滚动条
  • 浏览器的信息（浏览器的版本）
  • 让浏览器出现一个弹出框（alert / confirm / prompt）
  • …
• BOM 的核心就是 window 对象
• window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

1. 获取浏览器窗口的尺寸

• innerHeight 和 innerWidth

• 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

  var windowHeight = window.innerHeight
  console.log(windowHeight)
  
  var windowWidth = window.innerWidth
  console.log(windowWidth)
  

2. 浏览器的弹出层

• alert 是在浏览器弹出一个提示框

  window.alert('我是一个提示框')
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lv9bEBPs-1673443390155)(%E7%AC%94%E8%AE%B0.assets/alert.png)]

  • 这个弹出层知识一个提示内容，只有一个确定按钮
  • 点击确定按钮以后，这个提示框就消失了

• confirm 是在浏览器弹出一个询问框

  var boo = window.confirm('我是一个询问框')
  console.log(boo)
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pCNAvLxQ-1673443390156)(%E7%AC%94%E8%AE%B0.assets/confirm.png)]

  • 这个弹出层有一个询问信息和两个按钮
  • 当你点击确定的时候，就会得到 true
  • 当你点击取消的时候，就会得到 false

• prompt 是在浏览器弹出一个输入框

  var str = window.prompt('请输入内容')
  console.log(str)
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H7vMWkfO-1673443390157)(%E7%AC%94%E8%AE%B0.assets/prompt.png)]

  • 这个弹出层有一个输入框和两个按钮
  • 当你点击取消的时候，得到的是 null
  • 当你点击确定的时候得到的就是你输入的内容

3. 浏览器的地址信息

• 在 window 中有一个对象叫做 location
• 就是专门用来存储浏览器的地址栏内的信息的

location.href

• location.href 这个属性存储的是浏览器地址栏内 url 地址的信息

  console.log(window.location.href)
  

  • 会把中文变成 url 编码的格式

• location.href 这个属性也可以给他赋值

  window.location.href = './index.html'
  // 这个就会跳转页面到后面你给的那个地址
  

location.reload

• location.reload() 这个方法会重新加载一遍页面，就相当于刷新是一个道理

  window.location.reload()
  

  • 注意： 不要写在全局，不然浏览器就会一直处在刷新状态

4. 浏览器的历史记录

• window 中有一个对象叫做 history
• 是专门用来存储历史记录信息的

history.back

• history.back 是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮

  window.history.back()
  

  • 前提是你要有上一条记录，不然就是一直在这个页面，也不会回退

history.forword

• history.forword 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮

  window.history.forward()
  

  • 前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个

5. 浏览器的 onload 事件

• 这个不在是对象了，而是一个事件

• 是在页面所有资源加载完毕后执行的

  window.onload = function () {
    console.log('页面已经加载完毕')
  }
  

5-1 在 html 页面中把 js 写在 head 里面

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
    	// 这个代码执行的时候，body 还没有加载
      // 这个时候我们就获取不到 body 中的那个 div

      // 就需要使用 window.onload 事件
      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

5-2 在 html 页面中把 js 写在 body 最后面

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>

    <script>
    	// 这个代码执行的时候，body 已经加载完毕了
      // 在这里就可以获取到 div，写不写 window.onload 就无所谓了

      window.onload = function () {
        // 这个函数会在页面加载完毕以后在执行
        // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
      }
    </script>
  </body>
</html>

6. 浏览器的 onscroll 事件

• 这个 onscroll 事件是当浏览器的滚动条滚动的时候触发

• 或者鼠标滚轮滚动的时候出发

  window.onscroll = function () {
    console.log('浏览器滚动了')
  }
  

  • 注意：前提是页面的高度要超过浏览器的可是窗口才可以

7. 浏览器滚动的距离

• 浏览器内的内容即然可以滚动，那么我们就可以获取到浏览器滚动的距离
• 思考一个问题？
  • 浏览器真的滚动了吗？
  • 其实我们的浏览器是没有滚动的，是一直在那里
  • 滚动的是什么？是我们的页面
  • 所以说，其实浏览器没有动，只不过是页面向上走了
• 所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容
• 所以不是在用 window 对象了，而是使用 document 对象

scrollTop

• 获取的是页面向上滚动的距离

• 一共有两个获取方式

  • document.body.scrollTop
  • document.documentElement.scrollTop

  window.onscroll = function () {
    console.log(document.body.scrollTop)
    console.log(document.documentElement.scrollTop)
  }
  

  • 两个都是获取页面向上滚动的距离
  • 区别：
    • IE 浏览器
      • 没有 DOCTYPE 声明的时候，用这两个都行
      • 有 DOCTYPE 声明的时候，只能用 document.documentElement.scrollTop
    • Chrome 和 FireFox
      • 没有 DOCTYPE 声明的时候，用 document.body.scrollTop
      • 有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop
    • Safari
      • 两个都不用，使用一个单独的方法 window.pageYOffset

scrollLeft

• 获取页面向左滚动的距离

• 也是两个方法

  • document.body.scrollLeft

  • document.documentElementLeft

    window.onscroll = function () {
      console.log(document.body.scrollLeft)
      console.log(document.documentElement.scrollLeft)
    }
    

  • 两个之间的区别和之前的 scrollTop 一样

8. 本地存储

8-1 localStorage

//增
localStorage.setItem("name","kerwin")
//取
localStorage.getItem("name")
//删
localStorage.removeItem("name")
//清空
localStorage.clear()

8-2 sessionStorage

//增
sessionStorage.setItem("name","kerwin")
//取
sessionStorage.getItem("name")
//删
sessionStorage.removeItem("name")
//清空
sessionStorage.clear()