js 流程控制 和 DOM操作

解构赋值

<script>
      // 将用户名,邮箱,保存到独立 变量中
      const user = ["小明", "xm@qq.com"];
      let userName = user[0];
      let userEmail = user[1];
      // es6, 用解构完成以上功能  将多值/引用,解析到单值变量中
      // 主要针对 数组, 对象
      // 1. 数组解构
      // 左边模板 = 右边具体的值
      let [name, email] = ["小明", "xm@qq.com"];
      //更新
      [name, email] = ["灭绝", "mj@qq.com"];
      // 参数不足: 可以添加默认参数
      [name, email, age = 18] = ["灭绝", "mj@qq.com"];
      // 参数过多: 归并参数
      let [a, b, c, d, ...e] = [1, 2, 3, 4, 5, 6, 7];
      console.log(a, b, c, d, e);
      // 交换二个数 用传统思维
      let x = 10,
        y = 20;
      console.log("x = %d, y = %d", x, y);
      // let t = 0;
      // t = x;
      // x = y;
      // y = t;
      // 使用解构一行搞定
      [y, x] = [x, y];
      console.log("x = %d, y = %d", x, y);
      // 2. 对象解构
      let { id, course, score } = { id: 1, course: "JS", score: 88 };
      // 属性与变量同名
      console.log(id, course, score);
      // 无声明赋值
      // 等号左边的数据,左值,禁止出现大括号 , 使用括号包住将它转为表达式进行求值
      ({ id, course, score } = { id: 2, course: "PHP", score: 99 });
      console.log(id, course, score);
      // 使用别名,防止命名冲突
      let { name: myName, email: myEmail } = {name: "灭绝",email: "mj@qq.com",};
      console.log(myName, myEmail);
      // 对象的复制
      let { ...r } = { a: 1, b: 2, c: 3 };
      console.log(r);
      // 3. 解构用在函数参数
      // function getUser(user) {
      //   console.log(user.id, user.name, user.email);
      // }
      // 作用解构来简化传参与使用
      function getUser({ id, name, email }) {
        console.log(id, name, email);
      }
      getUser({ id: 156, name: "李四", email: "ls@a.com" });
    </script>

流程控制

分支 ( if 与 switch )

<script>
      //   代码块, 无条件执行
      {
        //   var , let 区别在于是否支持块级的作用域
        // var a = 123; // 外面可以访问  这叫变量泄露
        // let a = 123; // 外面不能访问到
        console.log("Hi, 晚上好");
      }
      //   console.log(a);
      // 代码块: 有条件
      let status = false;
      //   单分支
      if (status) {
        console.log("Hi, 晚上好");
      }
      // 双分支
      if (status) {
        console.log("Hi, 晚上好");
      } else {
        console.log("Hi , 上午好");
      }
      // 多分支
      status = 88;
      // === 恒等,二个数据不仅值要相等, 而且类型也要相等,不会触发类型的自动转换
      if (status === 1) {
        console.log("Hi, 晚上好");
      } else if (status === 2) {
        console.log("Hi , 中午好");
      } else if (status === 3) {
        console.log("Hi , 下午好");
      } else {
        // 当所有条件都不满足,就走到这: 默认分支
        console.log("参数错误");
      }
      // switch来简化多分支
      status = 1;
      switch (status) {
        case 1:
          console.log("Hi, 晚上好");
          break;
        case 2:
          console.log("Hi , 中午好");
          break;
        case 3:
          console.log("Hi , 下午好");
          break;
        default:
          // 当所有条件都不满足,就走到这: 默认分支
          console.log("参数错误");
      }
      // 简化方案
      // 1. 如果只有一条语句,可以不写大括号
      if (true) console.log("Hello world");
      // 2. 双分支可以用"三元运算符"进行简化
      //   条件 ? 为true 时 : 为false时
      10 < 5 ? console.log(true) : console.log(false);
      // 多条语句也可以用三元来简化,但是要与IIFE(立即执行函数配合)
      10 > 5
        ? (function () {
            console.log("true时结果:");
            console.log(true);
          })()
        : (function () {
            console.log("false时结果:");
            console.log(false);
          })();
    </script>

循环 ( while 与 for )

<script>
      // 循环有三个要素: 1. 循环变量  2. 循环条件  3. 更新循环条件
      const lang = ["html", "css", "js"];
      // 1. while():入口循环, 进入循环前必须判断一次循环条件
      let i = 0;
      while (i < lang.length) {
        console.log(lang[i]);
        i = i + 1;
      }
      // do-while(): 出口判断型, 所以条件不论是否满足, 都会执行一次循环体
      i = 0;
      do {
        console.log(lang[i]);
        i = i + 1;
      } while (i > lang.length);
      console.log("----------");
      // 2. for
      // for ( 循环变量初始化; 循环条件; 更新循环条件)
      for (let i = 0; i < lang.length; i++) {
        console.log(lang[i]);
      }
      // 简写 只有一条语句,可以不写大括号
      for (let i = 0; i < lang.length; i++) console.log(lang[i]);
      console.log("========");
</script>

遍历

<script>
      // for - of 遍历数组
      const lang = ["html", "css", "js"];
      // for (item of arr) {}
      // item 代表数组中的每一个成员
      for(item of lang){
        console.log(item);
      }
      // for (item of lang) console.log(item);
      // forEach()遍历数组
      // 函数是一个对象, 对象是一个值,是值就可以传递或保存,所以函数可以当成参数,传给另一个函数
      // 当函数做为参数是,称为"回调函数"
      lang.forEach(function (item, index, array) {
        console.log(item, index, array);
      });
      // 只有第一个参数:数组成员才是必须的
      lang.forEach(function (item) {
        console.log(item);
      });
      //   箭头函数
      lang.forEach((item) => console.log(item));
      // 5. for - in : 遍历对象
      let user = { id: 1, "my name": "zhu", age: 18 };
      //   for (属性/键名 in 对象) {}
      for (let key in user) {
        console.log(user[key]);
      }
    </script>

访问器属性

<script>
      let user = {
        data: { name: "猪老师", age: 18 },
        getage() {
          return user.data.age;
        },
        setage(age) {
          return user.data.age = age;
        },
      };
      //默认访问方式 console.log(user.data.name);
      console.log(user.getage());
      user.setage(30);
      console.log(user.getage());
      // 根据用户的访问习惯 用户更愿意用下面的方式进行访问
      // 读 console.log(user.age);
      // 写 user.age = 60;
      // 使用"访问器属性"将方法伪装成"属性"
      user = {
        data: { name: "猪老师", age: 18 },
        // 在以属性名命名的方法前,添加上get,set将该方法伪装成一个属性
        get age() {
          return user.data.age;
        },
        set age(age) {
          return user.data.age = age;
        },
      };
      // 读
      console.log(user.age);
      // 写
      user.age = 60;
      console.log(user.age);
    </script>

DOM　操作

• document 代表当前 html 文档对象
• document.querySelectorAll: 返回满足条件的元素集合
• document.querySelector: 返回满足条件的元素集合中的第一个,通常用来获取某一个元素

    <form action="" name="login" id="mylogin">
      <!-- 使用对象属性的点语法(name属性)来访问表单中的每个数据 -->
      <input type="email" name="email" value="admin@php.cn" />
      <button>提交</button>
    </form>
    <script>
      // 怎么获取form元素
      //   let form = document.querySelector("form");
      //   form = document.forms[0];
      //   form = document.forms.item(0);
      //   form = document.forms.login;
      //   form = document.forms.mylogin;
      //   form中id,name功能相同,推荐使用id
      // email控件中, name属性,即是后端的变量名,也可以当成id使用
      //   email 是 name="email",它是name属性的值
      //   console.log(form.email);
      //   console.log(form.email.value);
      //  let value = document.forms.login.email.value;
      let value = document.forms.mylogin.email.value;
    </script>

dom树的遍历

• firstElementChild 返回对象的第一个子 元素
• lastElementChild 返回对象的最后一个子 元素
• nextElementSibling 返回对象的下一个兄弟 元素
• previousElementSibling 返回对象的前一个兄弟 元素
• children 属性返回元素的子元素的集合 是一个 HTMLCollection 对象。
• childNodes 属性返回包含被选节点的子节点的 NodeList。

   <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      // dom: 你看到的所有内容都是"节点"  节点类型: 元素,文本,文档
      let ul = document.querySelector(".list");
      // 查看所有节点(不区分类型)
      console.log(ul.childNodes); // 返回 NodeList 节点集合
      console.log(ul.children); // 返回 HTMLCollection 元素集合
      //   ul.children是类数组,需要转为真正的数组才可使用数组方法来遍历
      // 转为真数组的二种方式
      console.log(Array.from(ul.children));
      console.log([...ul.children]);
      // [...ul.children].forEach(item => (item.style.color = "red"));
      // [...ul.children][0].style.color = "blue";
      // ul.firstElementChild.style.background = "yellow";
      // ul.firstElementChild.nextElementSibling.style.background = "green";
      // ul.lastElementChild.style.background = "yellow";
      // ul.lastElementChild.previousElementSibling.style.background = "violet";
    </script>

dom元素的创建

• createElement 方法可创建元素节点。
• textContent 属性设置或者返回指定节点的文本内容。
• insertAdjacentElement(‘插入位置’, 元素)
  

<script>
      // 创建元素
      // 内存中,页面中不可见
      let div = document.createElement("div");
      let p = document.createElement("p");
      p.textContent = "hello world";
      // 添加到页面中
      p.append("大家好");
      div.append(p);
      document.body.append(div);
      const li = document.createElement("li");
      li.textContent = "第一个";
      div.append(li);
      // insertAdjacentElement('插入位置', 元素)
      // 插入位置有四个
      // afterBegin: 开始标签之后,第一个子元素
      // beforeBegin: 开始标签之前,是它的前一个兄弟元素
      // afterEnd: 结束标签之后,它的下一个兄弟元素
      // beforeEnd: 结束标签之前,它的最后一个子元素
      const item = document.createElement("li");
      item.textContent = "大家再坚持一会";
      div.insertAdjacentElement("beforeBegin", item);
      const h3 = document.createElement("h3");
      h3.textContent = "我有点饿了";
      div.insertAdjacentElement("beforeEnd", h3);
    </script>

自定义属性: dataset对象

<!-- id,class: 内置/预定义
      email, index: 自定义/ 数据属性 -->
    <div id="user" class="active" data-email="admin@php.cn" data-index="5">
      <h2>Hello world</h2>
    </div>
    <script>
      const div = document.querySelector("#user");
      //   console.log(div["data-email"]);
      console.log(div.dataset.email);
      console.log(div.dataset.index);
      //   dataset对象: 用于获取用户的自定义属性
      //   自定义必须使用data-为前缀, 访问时前缀不要写
    </script>

css对象 classList

    <h2>Hello world</h2>
    <style>
      .red {color: red;}
      .bgc {background-color: yellow;}
      .blue {color: blue;}
      h2 {border: 5px solid #000;}
    </style>
    <script>
      // 以前添加类
      //   document.querySelector("h2").className = "red bgc";
      const h2 = document.querySelector("h2");
      h2.classList.add("red");
      h2.classList.add("bgc");
      h2.classList.remove("bgc");
      h2.classList.replace("red", "blue");
    </script>