search

博客列表 >js 流程控制 和 DOM操作

js 流程控制 和 DOM操作

至诚网络的博客
至诚网络的博客原创
2021年10月05日 22:11:05567浏览

解构赋值

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

流程控制

分支 ( if 与 switch )

  1. <script>
  2.       //   代码块, 无条件执行
  3.       {
  4.         //   var , let 区别在于是否支持块级的作用域
  5.         // var a = 123; // 外面可以访问  这叫变量泄露
  6.         // let a = 123; // 外面不能访问到
  7.         console.log("Hi, 晚上好");
  8.       }
  10.       //   console.log(a);
  12.       // 代码块: 有条件
  13.       let status = false;
  14.       //   单分支
  15.       if (status) {
  16.         console.log("Hi, 晚上好");
  17.       }
  18.       // 双分支
  19.       if (status) {
  20.         console.log("Hi, 晚上好");
  21.       } else {
  22.         console.log("Hi , 上午好");
  23.       }
  24.       // 多分支
  25.       status = 88;
  26.       // === 恒等,二个数据不仅值要相等, 而且类型也要相等,不会触发类型的自动转换
  27.       if (status === 1) {
  28.         console.log("Hi, 晚上好");
  29.       } else if (status === 2) {
  30.         console.log("Hi , 中午好");
  31.       } else if (status === 3) {
  32.         console.log("Hi , 下午好");
  33.       } else {
  34.         // 当所有条件都不满足,就走到这: 默认分支
  35.         console.log("参数错误");
  36.       }
  38.       // switch来简化多分支
  40.       status = 1;
  41.       switch (status) {
  42.         case 1:
  43.           console.log("Hi, 晚上好");
  44.           break;
  45.         case 2:
  46.           console.log("Hi , 中午好");
  47.           break;
  48.         case 3:
  49.           console.log("Hi , 下午好");
  50.           break;
  51.         default:
  52.           // 当所有条件都不满足,就走到这: 默认分支
  53.           console.log("参数错误");
  54.       }
  56.       // 简化方案
  57.       // 1. 如果只有一条语句,可以不写大括号
  58.       if (true) console.log("Hello world");
  60.       // 2. 双分支可以用"三元运算符"进行简化
  61.       //   条件 ? 为true 时 : 为false时
  63.       10 < 5 ? console.log(true) : console.log(false);
  65.       // 多条语句也可以用三元来简化,但是要与IIFE(立即执行函数配合)
  66.       10 > 5
  67.         ? (function () {
  68.             console.log("true时结果:");
  69.             console.log(true);
  70.           })()
  71.         : (function () {
  72.             console.log("false时结果:");
  73.             console.log(false);
  74.           })();
  75.     </script>

循环 ( while 与 for )

  1. <script>
  2.       // 循环有三个要素: 1. 循环变量  2. 循环条件  3. 更新循环条件
  3.       const lang = ["html", "css", "js"];
  5.       // 1. while():入口循环, 进入循环前必须判断一次循环条件
  6.       let i = 0;
  7.       while (i < lang.length) {
  8.         console.log(lang[i]);
  9.         i = i + 1;
  10.       }
  12.       // do-while(): 出口判断型, 所以条件不论是否满足, 都会执行一次循环体
  13.       i = 0;
  14.       do {
  15.         console.log(lang[i]);
  16.         i = i + 1;
  17.       } while (i > lang.length);
  18.       console.log("----------");
  20.       // 2. for
  21.       // for ( 循环变量初始化; 循环条件; 更新循环条件)
  22.       for (let i = 0; i < lang.length; i++) {
  23.         console.log(lang[i]);
  24.       }
  25.       // 简写 只有一条语句,可以不写大括号
  26.       for (let i = 0; i < lang.length; i++) console.log(lang[i]);
  27.       console.log("========");
  28. </script>

遍历

  1. <script>
  2.       // for - of 遍历数组
  3.       const lang = ["html", "css", "js"];
  4.       // for (item of arr) {}
  5.       // item 代表数组中的每一个成员
  6.       for(item of lang){
  7.         console.log(item);
  8.       }
  9.       // for (item of lang) console.log(item);
  12.       // forEach()遍历数组
  13.       // 函数是一个对象, 对象是一个值,是值就可以传递或保存,所以函数可以当成参数,传给另一个函数
  14.       // 当函数做为参数是,称为"回调函数"
  15.       lang.forEach(function (item, index, array) {
  16.         console.log(item, index, array);
  17.       });
  18.       // 只有第一个参数:数组成员才是必须的
  19.       lang.forEach(function (item) {
  20.         console.log(item);
  21.       });
  22.       //   箭头函数
  23.       lang.forEach((item) => console.log(item));
  25.       // 5. for - in : 遍历对象
  26.       let user = { id: 1, "my name": "zhu", age: 18 };
  27.       //   for (属性/键名 in 对象) {}
  28.       for (let key in user) {
  29.         console.log(user[key]);
  30.       }
  32.     </script>

访问器属性

  1. <script>
  2.       let user = {
  3.         data: { name: "猪老师", age: 18 },
  4.         getage() {
  5.           return user.data.age;
  6.         },
  7.         setage(age) {
  8.           return user.data.age = age;
  9.         },
  10.       };
  11.       //默认访问方式 console.log(user.data.name);
  13.       console.log(user.getage());
  14.       user.setage(30);
  15.       console.log(user.getage());
  17.       // 根据用户的访问习惯 用户更愿意用下面的方式进行访问
  18.       // 读 console.log(user.age);
  19.       // 写 user.age = 60;
  22.       // 使用"访问器属性"将方法伪装成"属性"
  23.       user = {
  24.         data: { name: "猪老师", age: 18 },
  25.         // 在以属性名命名的方法前,添加上get,set将该方法伪装成一个属性
  26.         get age() {
  27.           return user.data.age;
  28.         },
  29.         set age(age) {
  30.           return user.data.age = age;
  31.         },
  32.       };
  33.       // 读
  34.       console.log(user.age);
  35.       // 写
  36.       user.age = 60;
  38.       console.log(user.age);
  39.     </script>

DOM　操作

  • document 代表当前 html 文档对象
  • document.querySelectorAll: 返回满足条件的元素集合
  • document.querySelector: 返回满足条件的元素集合中的第一个,通常用来获取某一个元素
  1.     <form action="" name="login" id="mylogin">
  2.       <!-- 使用对象属性的点语法(name属性)来访问表单中的每个数据 -->
  3.       <input type="email" name="email" value="admin@php.cn" />
  4.       <button>提交</button>
  5.     </form>
  7.     <script>
  8.       // 怎么获取form元素
  9.       //   let form = document.querySelector("form");
  10.       //   form = document.forms[0];
  11.       //   form = document.forms.item(0);
  12.       //   form = document.forms.login;
  13.       //   form = document.forms.mylogin;
  14.       //   form中id,name功能相同,推荐使用id
  17.       // email控件中, name属性,即是后端的变量名,也可以当成id使用
  18.       //   email 是 name="email",它是name属性的值
  19.       //   console.log(form.email);
  20.       //   console.log(form.email.value);
  22.       //  let value = document.forms.login.email.value;
  23.       let value = document.forms.mylogin.email.value;
  24.     </script>

dom树的遍历

  • firstElementChild 返回对象的第一个子 元素
  • lastElementChild 返回对象的最后一个子 元素
  • nextElementSibling 返回对象的下一个兄弟 元素
  • previousElementSibling 返回对象的前一个兄弟 元素
  • children 属性返回元素的子元素的集合 是一个 HTMLCollection 对象。
  • childNodes 属性返回包含被选节点的子节点的 NodeList。
  1.    <ul class="list">
  2.       <li class="item">item1</li>
  3.       <li class="item">item2</li>
  4.       <li class="item">item3</li>
  5.       <li class="item">item4</li>
  6.       <li class="item">item5</li>
  7.     </ul>
  8.     <script>
  9.       // dom: 你看到的所有内容都是"节点"  节点类型: 元素,文本,文档
  10.       let ul = document.querySelector(".list");
  12.       // 查看所有节点(不区分类型)
  13.       console.log(ul.childNodes); // 返回 NodeList 节点集合
  15.       console.log(ul.children); // 返回 HTMLCollection 元素集合
  17.       //   ul.children是类数组,需要转为真正的数组才可使用数组方法来遍历
  19.       // 转为真数组的二种方式
  20.       console.log(Array.from(ul.children));
  21.       console.log([...ul.children]);
  23.       // [...ul.children].forEach(item => (item.style.color = "red"));
  24.       // [...ul.children][0].style.color = "blue";
  26.       // ul.firstElementChild.style.background = "yellow";
  28.       // ul.firstElementChild.nextElementSibling.style.background = "green";
  29.       // ul.lastElementChild.style.background = "yellow";
  31.       // ul.lastElementChild.previousElementSibling.style.background = "violet";
  32.     </script>

dom元素的创建

  • createElement 方法可创建元素节点。
  • textContent 属性设置或者返回指定节点的文本内容。
  • insertAdjacentElement(‘插入位置’, 元素)
  1. <script>
  2.       // 创建元素
  3.       // 内存中,页面中不可见
  4.       let div = document.createElement("div");
  5.       let p = document.createElement("p");
  6.       p.textContent = "hello world";
  8.       // 添加到页面中
  9.       p.append("大家好");
  10.       div.append(p);
  11.       document.body.append(div);
  13.       const li = document.createElement("li");
  14.       li.textContent = "第一个";
  15.       div.append(li);
  17.       // insertAdjacentElement('插入位置', 元素)
  18.       // 插入位置有四个
  19.       // afterBegin: 开始标签之后,第一个子元素
  20.       // beforeBegin: 开始标签之前,是它的前一个兄弟元素
  21.       // afterEnd: 结束标签之后,它的下一个兄弟元素
  22.       // beforeEnd: 结束标签之前,它的最后一个子元素
  24.       const item = document.createElement("li");
  25.       item.textContent = "大家再坚持一会";
  26.       div.insertAdjacentElement("beforeBegin", item);
  28.       const h3 = document.createElement("h3");
  29.       h3.textContent = "我有点饿了";
  30.       div.insertAdjacentElement("beforeEnd", h3);
  31.     </script>

自定义属性: dataset对象

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

css对象 classList

  1.     <h2>Hello world</h2>
  2.     <style>
  3.       .red {color: red;}
  4.       .bgc {background-color: yellow;}
  5.       .blue {color: blue;}
  6.       h2 {border: 5px solid #000;}
  7.     </style>
  8.     <script>
  9.       // 以前添加类
  10.       //   document.querySelector("h2").className = "red bgc";
  12.       const h2 = document.querySelector("h2");
  13.       h2.classList.add("red");
  14.       h2.classList.add("bgc");
  15.       h2.classList.remove("bgc");
  16.       h2.classList.replace("red", "blue");
  17.     </script>
上一条：Vue一个通用的组件传递点击事件的两种种简单方法下一条：es6结构赋值+DOM节点的增删改查+自定义属性: dataset对象的用法+classList对象的用法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多