JavaScript学习笔记（二）---变量作用域、数组、JSON对象、字符串、Math、Data、BOM、DOM

11.变量的作用域：变量可以使用的范围

11.1全局变量：

• 定义：在变量定义时，没有被任何括号括起来的变量，作用域为整个文件

• 作用：可以在整个页面传递共享数据

• 缺陷：1.全局变量的生命周期和页面一样长，大量使用会占用内存

  ​ 2.降低函数的独立性

• 使用场景：往往与事件体相关的操作，使用全局变量

11.2 局部变量：

• 定义：在定义变量时，被任意括号括起来的变量，作用域为当前函数体

11.3如何把局部变量传递给其他函数

1. 返回值
2. 当做其他函数的形参

11.4作用域链：

• 定义：当函数嵌套定义函数时，子函数可以使用父函数的内部变量，但是父函数不能使用子函数的内部变量

12.js编译

1. 计算机只能操作二进制数据；js源码会被编译为计算机能够操作的数据，编译的工作由浏览器完成
2. js编译的特点，边解释边执行，翻译一行，执行一行
3. 变量的声明提升，在js变量可以不定义直接使用，使用变量时，如果未定义，则编译器会在该作用域首行对其进行声明，且赋值为underfined
4. （补）：
5. • js引擎运行js分为两步：预解析和代码执行；（1）预解析 ：js引擎会把js里面所有的var和function提升到当前作用域的最前面（2）代码执行L按照代码书写顺序从上往下执行；
   • 预解析分为：变量解析（变量提升）和函数预解析（函数提升）；（1）变量提升：就是把所有的变量声明提升到当前的作用域的最前面，不提升赋值操作（2）函数提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数

13.数组

13.1数组的概念

数组是一个容器，可以批量存储多个数据。数组类似于数学中的集合。

13.2内置基本类型与引用类型在内存中存储方式的异同：

1. 内置基本类型：内置基本类型只有一块栈空间，存储的就是数据
2. 引用类型：有两块空间，一块栈空间，存储的是堆空间的地址，一个堆空间，存储的是数据

13.3数组的定义方式

1. 构造方法

   var arr = new Array(1,2,3,4,5);
   console.log(arr);
   

   定义一个名为arr的数组，该数组中有五个元素（变量），这些元素的数值分别是1,2,3,4,5

   new是一个关键字，其作用是在堆空间按照类型模板创建对象

   Array是数组类型的构造函数，可以理解是一种类型模板，与new结合，表示创建了一个该类型对象。

   new 构造函数( ) 返回的是堆空间的地址

   ==注意事项：==new和构造函数不能单独出现，必须同时使用，代表创建了一个该类型的对象

2. 字面量：看起来是什么就是什么

   var arr = [1,2,3,4,5];
   console.log(arr);
   

13.4数组元素的访问

• 数组名[下标]

• 下标：从0开始的自然数，下标可以是变量，千万不要越界访问，数组下标的取值范围是0~长度-1

• 获取数组长度的属性length

  console.log(arr.length);

• 数组的遍历：对数组所有的元素进行相同的操作，通过循环实现

• 数组的逆序

13.5数组里的API

• API:Application Program Interface应用程序接口

​ 数组API就是数组相关的函数

​ API是JS设计者提供的功能模块

​ 不同的对象有自身相关操作的API

​ 使用方式 对象.属性或者方法

• 学习API的思想

​ 1.功能

​ 2.参数

​ 3.返回值

​ 4.抄案例

• 核心问题：需要有耐心的独立学习API文档
• push

​ 功能:尾插

​ 参数:push(x1,[x2,x3…]);

​ 返回值:新数组的长度

• pop

​ 功能:尾删

​ 参数:无

​ 返回值:被删除的元素

​ var arr = [5,7,8,4,9,3];

• unshift

​ 功能:头插

​ 参数:unshift(x1,[x2,x3…]);

​ 返回值:新数组的长度

• shift

​ 功能:头删

​ 参数:无

​ 返回值:返回被删除的元素

• reverse

​ 功能:逆序

​ 参数:无

​ 返回值:逆序后的数组

• splice

​ 功能:删除并替换

​ 参数:splice(起始位置,偏移量,[替换的元素]);

​ 返回值:被删除的区间

• slice

​ 功能:截取区间

​ 参数:slice(起始位置,结束位置) [2,5) 左闭右开

​ 返回值:被截取的区间

• concat

​ 功能:数组的拼接

​ 参数:concat(新数组)

​ 返回值:新拼接的数组

• join

​ 功能:将数组转换为字符串

​ 参数:join([分隔符]):默认为逗号

​ 返回值:分割后的字符串

13.6多维数组

• 几维数组就是用几个下标访问

  var arr = [
          [1, 2, 3],
          [4, 5],
          [6, 7, 8, 9]
      ]
      console.log(arr);
  

• JS严格来讲是没有多维数组的，所有的多维数组都是通过一堆数组的嵌套实现

14.JSON对象

• 需求：是否可以将多条信息封装为一个整体，从实现更简便的操作
• JSON对象：描述数据的一种结构类型，可以将若干繁杂的属性封装为一个整体，通过简洁的方式操作若干属性

14.1 JSON对象的定义

• json对象有{ }括起来，包含着若干键值对（key:value）,每两个键值对间用逗号隔开

注意事项：建议定义json对象时，所有的key都用双引号括起来

14.2 json对象属性的方法

方法一：json对象.属性名

方法二：json对象[“key”]

14.3 json对象添加自定义属性

• json对象.新属性名 = 属性值；

14.4 对于json对象的遍历（遍历json往往是没有函数的）

for(var key in json对象){

​ 循环体；

}

key代表每次循环遍历的属性

forin中不能用点访问属性

14.5json对象的某个成员函数使用其他的属性，必须加前缀this

// json对象的某个成员函数使用其他的属性
    var stu1 = {
        "name": "张三",
        "age": 18,
        "print": function () {
            console.log(this.name, this.age);
        }
    }

    stu1.print();

15.严格模式

随着js的发展，js在版本更新的过程中，逐渐优化以前不合理的语法

"use strict"

严格模式：不能使用未被声明的变量

除了老项目，一般也不用，它无法保证变量先定义后使用

16.回调函数

实际开发中，很多方法都是第三方写得，也就是说我们无法操作第三方代码的函数体

解决不能在第三方函数体中直接调用自定义函数方案

回调函数，一个被当做参数的函数，将自定义函数作为第三方函数体的参数传给第三方，由第三方自己去调用自定义函数

setInterval

功能：每周期性的执行某个功能模块

参数：setInterval （执行的功能模块回调函数，时间间隔）；

 var fun = function(){
        console.log("heihei");
    }

    setInterval(fun,1000);

17. ES5新增数组方法

ES 1.8.3 ~ 1.8.11

数组新增方法indexOf ES 1.8.5版本创造的

indexOf

功能：查找元素

参数：indexOf（目标元素）

返回值：找到目标元素返回该元素的下标，找不到返回-1

数组元素去重

var arr = [5, 5, 7, 7, 4, 9, 3, 1, 3];
    var arr1 = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr1.indexOf(arr[i]) == -1) {
            arr1.push(arr[i]);
        }
    }

    console.log(arr1);

18. 字符串

18.1 字符串的定义

1. 字面量：内置类型

    var str = "hello";
       console.log(str, typeof str);
   

2. 构造方法：引用类型

   var str1 = new String("hello");
       console.log(str1,typeof str1);
   

18.2 ASCII码表

所有的字符都对应这一个数字，每个字符和数字对应的关系构成了一张表，ASCII码表

字符与ASCII码完全等价

• 97 “a”
• 65 “A”
• 48 “0”
• 32 空格
• 13 回车

charAt

功能：返回索引对应的字符

参数：charAt （索引）

返回值：返回索引对应的字符

charCodeAt

功能：返回索引对应的字符的ASCII码值

参数：charCodeAt （索引）

返回值：返回索引对应的字符的ASCII码值

length

功能：返回字符串的长度

18.3字符串API和属性

1. charAt

   功能：返回索引对应的字符

   参数：charAt （索引）

   返回值：返回值：返回索引对应的字符

2. charCodeAt

   功能：返回索引对应的字符的ASCII码值

   参数：charCodeAt （索引）

   返回值：返回索引对应的字符的ASCII码值

3. length：返回数组的长度

4. String.fromCharCode

   功能：返回ASCII码对应的字符

   参数：fromCharCode(asc1,[asc2…])

   返回值：返回ASCII码对应的字符

   注意事项：该方法直接通过类型名String来调用

5. indexOf(“abc”) 查找字符串第一次出现的位置

6. lastIndexOf(“abc”) 查找字符串最后一次出现的位置，如果没有找到返回 -1

7. replace

   功能：用参数2替换参数1

   参数：replace（参数1，参数2）

   返回值：被替换的字符串

8. slice和substring

   功能：字符串的截取

   参数：（起始位置，结束位置）左闭右开

   返回被截取的字符串

9. split

   功能：将字符串转为数组

   参数：split（“分割字符串”）

   返回值：数组元素

10. 转大写转小写

    //转小写
    console.log("HeiHei".toLowerCase());
    //转大写
    console.log("HeiHei".toUpperCase());
    

19.Math

Math是不可以创建对象的；Math：所有相关的属性和方法都是通过类型名Math调用

• floor（数字）：向下取整
• ceil（数字）：向上取整
• round（数字）：四舍五入取整
• sqrt（数字）：开方
• pow（m,n）：返回m的n次方
• min（参数1，参数2……）：返回最小值
• max（参数1，参数2……）：返回最大值
• abs（参数）：返回绝对值
• random（）：生成随机数函数，0~1 左闭右开，目标：生成指定区间的随机数

案例：彩虹条

步骤：1.颜色的构成----->生成随机颜色，颜色的本质是#000000~#FFFFFF,生成 6个16进制的随机数

​ 2.如何将生成的颜色赋值给每个li；JS对象.属性名 = 属性值 ；

​ 3.如何批量的获取页面中的li？document.getElementsByTagName(“标签名”):批量返回标签名对应的HTML元素,存储在数组中

<body>
    <ul>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
body>

<script src="random.js"></script> 
<script>
    var color = "#";
    var str = "0123456789abcdef";
    var oLi = document.getElementsByTagName("li");

    for (var i = 0; i < oLi.length; i++) {
        for (var j = 0; j < 6; j++) {
            color += str.charAt(rdom(0, 15));
        }
        oLi[i].style.backgroundColor = color;
        color = "#";
    }
</script>

function rdom(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

20.Date

20.1日期对象的定义

1. 创建默认（页面执行时）日期对象

   new Date（无参）

   var date = new Date();
       console.log(date); 
   

2. 创建指定日期对象

   new Date（日期格式字符串）

   日期格式字符串: “YYYY-MM-DD,hh:mm:ss”

   var date = new Date("2022-9-24,20:36:1");
       console.log(date);
   

20.2默认打印日期的格式不符合中国人的习惯，需求：将日期对象按照xxxx年xx月xx日 xx:xx:xx 星期x

<script>
    var date = new Date();
    // xxxx年xx月xx日 xx:xx:xx 星期x

    function myDate(date) {
        var y = date.getFullYear();
        var M = fun(date.getMonth() + 1);
        // var M = date.getMonth() + 1;
        var d = fun(date.getDate());
        var h = fun(date.getHours());
        var m = fun(date.getMinutes());
        var s = fun(date.getSeconds());
        var w = date.getDay();

        var k = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六",]
        w = k[w];

        console.log(y + "年" + M + "月" + d + "日" + " " + h + ":" + m + ":" + s + "  " + w);
    }
    function fun(a) {
        return a >= 10 ? a : "0" + a;
    }
    myDate(date);
</script>

按照本地格式打印日期字符串

console.log(date.toLocaleString());

20.3设置日期对象

<script>
    var date = new Date();

    // setDate   改变Date对象的日期
    // setHours()   改变小时数
    // setMinutes()   改变分钟数
    // setMonth()   改变月份，从0开始
    // setSeconds()   改变秒数
    // setFullYear()   改变年份

    date.setFullYear(2033);
    console.log(date.getFullYear());
    date.setHours(18);

    // 最长修改的日期属性是setDate
    // date.setHours(15);
    console.log(date.getDate());
    date.setDate(date.getDate() + 10);
    console.log(date.getDate());
    console.log(date.getHours());
    date.setHours(date.getHours() + 5);
    console.log(date.getHours());

    // 按照本地格式打印日期字符串
    console.log(date.toLocaleString());
</script>

20.4时间戳

时间戳:指某个时间点距离1970/1/1相差的毫秒数

Date.parse返回时间戳

var str = Date.parse("2022-8-24,21:46:3");
    console.log(str);
    var date = new Date(Date.parse("2022-8-24,21:46:3"));
    // var date = new Date(str);
    console.log(date);

20.5时间差

日期差：两个日期是可以相减的，相减的差值是两个日期对象相差的毫秒数

var date1 = new Date();
    var date2 = new Date("1999-1-8");

    console.log(Math.round(date1 - date2) / 1000 / 60 / 60 / 24);

20.6 循环计时器

setInterval

功能：按照时间间隔，每周期性 的执行回调函数

参数：setInterval （回调函数，时间间隔）;

返回值：关闭定时器的钥匙

<body>
    <input type="text" value="事件" id="time">
</body>
</html>
<script>
    // 循环定时器 
    // setInterval
    //功能:按照时间间隔,每周期性的执行回调函数
    //参数:setInterval(回调函数,时间间隔);
    //返回值:关闭定时器的钥匙

    // var count = 0;
    // var fun = function(){
    //     // console.log("我爱学习");
    //     console.log(++count);
    // }

    // setInterval(fun, 1000);

    // 实际回调函数都是通过匿名函数传递的
    // var count = 0;

    // var time = setInterval(function(){
    //     console.log(++count);
    //     if(count == 5){
    //         // clearInterval:关闭定时器
    //         clearInterval(time);
    //     }
    // },1000);

    //----------------------------------------------------
    var oTime = document.getElementById("time");

    setInterval(function(){
        var date = new Date();
        var str = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
        oTime.value = str;
    },1000);

</script>

21.BOM

21.1BOM相关概念

• 前提：JS—>是用来实现网页动态交互功能；怎么实现网页动态交互功能—>通过操作JS对象
• BOM：broswer object modle 浏览器对象模型
• 作用：将浏览器的每一部分转换成js对象，实现了可以通过js对象的方式，操作浏览器
• 学习对象就是研究该对象打点里相关的方法和属性：window 重点 ；location 次重点 ；document 重点

21.2windom所有bom元素的父元素

例如：window.document.write("hello");

• 问题：属性和方法什么时候必须加前缀，什么时候可以不加前缀

• 所有的属性和方法都一定有前缀，如果父元素为window则可以省略window前缀

• 变量在用的时候也会有前缀

  比如var i = 123;

  ​ console.log(window.i);

21.3window的三个弹出框

弹出框的特点：所有弹出框都有阻塞行为，当弹出框程序没有结束时，后续代码无法执行

1. window.alert (弹出后只有一个确定按钮)

   alert(“弹出内容”);

2. window.prompt

   prompt([提示信息]，默认值)：返回用户输入的字符串

3. window.confirm

   confirm([提示信息]):返回布尔值 确定返回的是true，取消返回的是false

21.4 window的两个计时器

• 循环计时器

  setInterval（回调函数，时间间隔）：返回值为关闭定时器的钥匙

  clearInterval（钥匙）;

• 延时计时器

  setTimeout(回调函数，时间间隔)：返回值为关闭定时器的钥匙

  clearTimeout(钥匙);

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        #box {
            width: 80px;
            height: 80px;
            background-color: pink;
        }
    style>
head>

<body>
    <button>启动button>
    <button>终止button>
    <div id="box">div>
body>

html>
<script>
    // 定时器
    /* setInterval(回调函数, 循环间隔的时间);
    clearInterval(终止条件); */

    // 延时定时器（广告弹框）
    /* setTimeout(回调函数,延时的时间);
    clearTimeout(); */
    var oBut = document.getElementsByTagName("button")
    var oBox = document.getElementById("box")
    var time;
    oBut[0].onclick = function () {
        time = setTimeout(
            function () {
                oBox.style.display = "none";
            }
            , 3000);
    }

    oBut[1].onclick = function () {
        clearTimeout(time);
    }


script>

21.5window的onload事件

问题：当代码执行时是自上而下执行的，所以当在头部中的script标签中将html里的标签元素转换为js中的对象后，代码执行时就会出错。

<script>
        var oP = document.getElementById("test");
        // innerHTML:标签之间的文本内容
        // Cannot read property 'innerHTML' of null
        // 使用innerHTML属性的元素不存在
        console.log(oP.innerHTML);
    </script>

==onload：==延迟加载事件，当执行到该事件时函数体内的代码等页面所有代码执行完后再执行

所以上述问题的解决办法：

    <script>
        //onload:延迟加载事件,当执行到该事件时
        //函数体内的代码等页面其他所有
        //代码执行完后再执行
        window.onload = function(){
            var oP = document.getElementById("test");
            console.log(oP.innerHTML);
        }
    </script>

25.6location：地址对象

herf属性是重点,对于地址的读写

• 读

  console.log(location.href);

• 写

  oBtn.onclick = function () {
          // location.href = "2.window.html";
          // location.href = "http://www.baidu.com";
  
          //页面的替换
          // location.replace("http://www.baidu.com");
          //页面的刷新 F5
          // location.reload();
      }
  

25.7document

1. write：方法是将字符串打印至大白板，凡是打印至大白板的字符串都会进行HTML解析；write方法与事件体连用，会直接覆盖原画面

2. 找对象的六种方法：

   找单个元素：

   1.document.getElementById(“ID”) :返回ID名对应的HTML元素

   2.document.querySelector(选择器) ;获取ID,类,标签对应的单个元素

   找批量元素：

   1.document.getElementsByTagName(“标签名”) :批量返回标签名对应的HTML元素,存在数组中

   2.document.getElementsByClassName(“类名”) :批量返回类名对应的HTML元素,存在数组中

   3.document.getElementsByName(“name名”): 批量返回name名对应的HTML元素,存在数组中

   4.document.querySelectorAll(选择器): 批量返回类名，标签名对应的HTML元素,存在数组中 （建议不使用）

22.DOM

DOM 文档对象模型

概念：HTML元素实现的功能是搭建页面，但是要实现页面和用户的交互必须要通过js对象，这些js对象统称为dom元素

知识点：1.清楚页面是由若干个dom元素构成；2.学会dom元素相互间的访问

22.1 根据层次关系访问节点：（包括文本和元素，所以不常用）

全都是属性

• firstChild 返回节点的第一个子节点
• lastChild 返回节点的最后一个子节点
• nextSibling 下一个节点
• previousSibling 上一个节点

body可以直接通过document.body调用

22.2只访问元素节点，不访问文本节点

• firstElementChild 返回节点的第一个子节点
• lastElementChild 返回节点的最后一个子节点
• nextElementSibling 下一个节点
• previousElementSibling 上一个节

22.3 nodeType:返回当前节点的类型

1：元素节点

3：文本节点

22.4节点的操作：增、删

增

1. 创建元素：document.createElement(“标签名”):创建标签名指定的元素 ；标签的js对象.innerHTML 添加内容
2. 追加：父元素.appendChild(子元素);

删

1. dom元素.remove();

例如：

var oUl = document.querySelector("ul");
    var oBtn = document.querySelector("button");

    oBtn.onclick = function () {
        oUl.lastElementChild.remove();
    }

22.5parentNode

子元素找父元素节点

22.6返回父元素有关的节点

• childNodes：返回父元素的所有子节点，包含元素和文本节点，存放至数组中
• children ：返回所有父元素的子节点，只包含元素节点,存放至数组中

22.7总结节点访问的属性

1. 父找子

   firstElementChild：返回节点的第一个子节点

   lastElementChild：返回节点的最后一个子节点

   childNodes

   children

2. 兄弟

   nextElementSibling 下一个节点

   previousElementSibling 上一个节点

3. 子找父

   parentNode

23.案例动态表格

• 一个事件由事件头和事件体构成，事件体在页面渲染的时候并不执行，只有用户通过该动作触发事件，才会执行该代码
• parentNode：子找父
• 为了解决上述问题：可以用this：是函数体的内置对象，this只能出现在函数体内；当this与事件体连用时，this代表触发事件时的元素。

<script>
    //3*3表格
    //1.造dom元素
    //2.搞清楚元素间关系，进行追加
    var count = 0;
    var oTable = document.createElement("table");
    oTable.border = "1px";

    for(var i=0; i<3; i++){
        var oTr = document.createElement("tr");
        for(var j=0; j<3; j++){
            var oTd = document.createElement("td");
            oTd.innerHTML = ++count;
            oTr.appendChild(oTd);
        }
        oTable.appendChild(oTr);

        var oDelTd = document.createElement("td");
        oTr.appendChild(oDelTd);
        oDelTd.innerHTML = "删除";

        //事件头
        oDelTd.onclick = function(){
            //事件体在页面渲染的时候并不执行,
            //只有用户通过该动作触发事件，才会执行该代码
            // parentNode:子找父
            // oDelTd.parentNode.remove();

            //如何解决该问题
            // this:是函数体的内置对象,this只能出现在函数体内
            // 当this与事件体连用时,this代表触发事件时的元素
            this.parentNode.remove();
        }
    }

    document.body.appendChild(oTable);
    </script>

24.各种文本

• outerHTML:打印包含自身标签的所有内容
• innerText:只打印文本，不打印内容
• innerHTML:打印不包含自身标签的所有内容 ；通过innerHTML字符串拼接页面

25.DOM属性的读写

25.1dom普通属性的读写(除了style和offset 相关属性)

• 打点

      // 读
      // console.log(oBox.id);
      // 写
      // oBox.id = "hohoho";
  

• getAttribute/setAttribute方法

  // 读
      // console.log(oBox.getAttribute("id"));
      // 写
      // oBox.setAttribute("id", "heihie");
  

25.2添加自定义属性

/* oBox.index = "0";
    console.log(oBox.index); */

25.3domStyle属性的读写

特指非行内的style属性

dom对象.style.分属性名

• 样式的写

  // oBox.style.backgroundColor = "red";
      // oBox.style.fontSize = "36px";
  

• 样式的读

  // console.log(oBox.style.fontSize);//错误
      // 必须用以下API
      // getComputedStyle(dom对象, flase)["属性名"]
      console.log(getComputedStyle(oBox, false)["backgroundColor"]);
  

25.4domOffset属性读写

• 读:读出的数据都是数字 ；

  // offsetWidth/offsetHeight/offsetLeft/offsetTop
      console.log(oBox.offsetWidth+5);
      console.log(oBox.offsetHeight);
      console.log(oBox.offsetLeft);
      console.log(oBox.offsetTop);
  
  

• 写:带px的字符串

  oBox.style.width = "200px";
      oBox.style.height = 500 + "px";
      oBox.style.left = "200px";
      oBox.style.top = "600px"; 
  

26.案例：选项卡

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .dv {
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
        }

        ul {
            width: 100%;
            height: 100px;
            border: 1px solid pink;
            display: flex;
            text-align: center;
        }

        li {
            width: 25%;
            height: 100px;
            border: 1px solid red;

        }

        .box {
            width: 100%;
            height: 200px;
        }

        .newStyle {
            background-color: pink;
            color: red;
        }

        .oldStyle {
            background-color: #fff;
            color: #000;
        }
    style>
head>

<body>
    <div class="dv">
        <ul>
            <li>男装li>
            <li>女装li>
            <li>童装li>
            <li>老年装li>
        ul>
        <div class="box">div>
    div>
body>

html>
<script>
    // 先获取将会用到的元素
    var oUl = document.querySelector("ul");
    var oLi = document.getElementsByTagName("li");
    var oBox = document.querySelector(".box");

    // 1.先是当用户点击每个框的时候框的背景颜色和字体会会高亮
    // 因为li不止一个所以用for循环获取
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].index = i;
        oLi[i].onclick = function () {
            // 这里不能用oLi[i]，事件体在页面渲染的时候并不执行，只有用户通过该动作触发事件，才会执行该代码
            // 这里想要的效果是当点击一个框时这个框发生变化
            // 其他框保持原样，所以这里需要用到判断
            /* this.style.backgroundColor = "pink";
            this.style.color = "black"; */
            // 这里判断时需要让所有的li都进行判断所以要用到for循环
            for (var j = 0; j < oLi.length; j++) {
                // 这里是判断一下当前点到的框是哪一个，如果是当前的框执行if
                // 里的语句，如果不是执行else的语句
                // 这里判断时还不能用i，因为这个事件体是当触发后才会执行的
                // 所以此处需要给每一个li添加一个自定义属性，将i的值赋给此属性
                // 就可以将此属性的值作为判断条件
                if (j == this.index) {
                    // 这里进行循环判断后修改的li是以j为索引的
                    // 不能用this，如果用this指的就是最后一个
                    /* oLi[j].style.backgroundColor = "pink";
                    oLi[j].style.color = "red"; */
                    // 这里还可以将代码进行优化
                    oLi[j].className = "newStyle";
                } else {
                    /* oLi[j].style.backgroundColor = "";
                    oLi[j].style.color = ""; */
                    oLi[j].className = "oldStyle";
                }
            }

            // 2.用户点击时下面的div需要让背景颜色也改变
            switch (this.index) {
                case 0:
                    oBox.style.backgroundColor = "red";
                    break;
                case 1:
                    oBox.style.backgroundColor = "blue";
                    break;
                case 2:
                    oBox.style.backgroundColor = "pink";
                    break;
                case 3:
                    oBox.style.backgroundColor = "green";
                    break;
            }
        }
    }
script>