search

博客列表 >js语法：解构赋值、dom元素的增删改、dataset,classList对象的使用

js语法：解构赋值、dom元素的增删改、dataset,classList对象的使用

初见
初见原创
2021年09月29日 13:20:24609浏览

js语法

解构赋值

  • 数组解构
  1. let [name, email] = ["小明", "88@qq.com"];
  3.       [name, email] = ["小光", "99@qq.com"]; //更新
  4.       console.log(name, email);
  5. // 参数不足
  6.       [name, email, age = 18] = ["小光", "99@qq.com"];
  7.       //参数过多
  8.       let [a, b, c, d, ...e] = [2, 2, 5, 25, 2, 52, 52, 52, 52, 52, 2];
  9.       console.log(a, b, c, d, ...e);
  10. let x = 10;
  11.       let y = 20;
  12.       //可以通过中间变量交换
  13.       [y, x] = [x, y];
  14.       console.log("x=%d,y=%d", x, y);
  • 对象解构
  1. let { id, course, score } = { id: 1, course: "js", score: 60 };
  2.       console.log(id, course, score);
  3.       console.log("---------");
  4.       ({ id, course, score } = { id: 2, course: "PHP", score: 80 });
  5.       console.log(id, course, score);
  6.       console.log("---------");
  7.       // 使用别名
  8.       let { name: myName, email: myEmail } = {
  9.         name: "小光",
  10.         email: "99@qq.com",
  11.       };
  12.       console.log(myName, myEmail);
  13.       console.log("---------");
  14.       let { ...r } = { a: 1, b: 2, c: 3 };
  15.       console.log(r);
  16.       console.log("---------");
  18.       // 结构用在函数参数
  19.       // function getUser(user) {
  20.       //   console.log(user.id, user.name, user.email);
  21.       // }
  22.       // getUser({ id: 52, name: "张三", email: "ddd@q.com" });
  23.       function getUser({ id, name, email }) {
  24.         console.log(id, name, email);
  25.       }
  26.       getUser({ id: 156, name: "张三", email: "ddd@q.com" });

流程控制:分支

  1.  //代码块 无条件执行
  2.       {
  3.         //   var 代码泄露
  4.         //   let 不会代码泄露
  5.         console.log("hi 你好");
  6.       }
  7.       console.log("---------");
  8.       // y有条件执行
  9.       //单分支
  10.       let status = false;
  11.       if (status) {
  12.         console.log("hi 早上好");
  13.         console.log("---------");
  14.       }
  15.       //双分支
  16.       status = true;
  17.       if (status) {
  18.         console.log("hi 早上好");
  19.         console.log("---------");
  20.       } else {
  21.         console.log("hi 晚上好");
  22.         console.log("---------");
  23.       }
  24.       //多分枝
  25.       status = 5;
  26.       if (status === 1) {
  27.         //===不引起字符转换
  28.         console.log("hi 早上好");
  29.         console.log("---------");
  30.       } else if (status === 2) {
  31.         console.log("hi 中午好");
  32.         console.log("---------");
  33.       } else if (status === 3) {
  34.         console.log("hi 晚上好");
  35.         console.log("---------");
  36.       } else {
  37.         console.log("参数错误");
  38.         console.log("---------");
  39.       }
  40.       //switch
  41.       status = 2;
  42.       switch (status) {
  43.         case 1:
  44.           console.log("hi 早上好");
  45.           console.log("---------");
  46.           break;
  47.         case 2:
  48.           console.log("hi 中午好");
  49.           console.log("---------");
  50.           break;
  51.         case 3:
  52.           console.log("hi 晚上好");
  53.           console.log("---------");
  54.           break;
  55.         default:
  56.           console.log("代码错误");
  57.           console.log("---------");
  58.           break;
  59.       }
  60.       //1、如果只有一条可以不写{}
  61.       //2、三元运算符 条件 ? 为true 时 : 为false 时
  62.       //多条语句用三元运算符 简化 与iife立即执行配合
  63.       10 < 5
  64.         ? (function () {
  65.             console.log("true 结果");
  66.             console.log(true);
  67.           })()
  68.         : (function () {
  69.             console.log("false 结果");
  70.             console.log(false);
  71.           })();

循环和遍历

  1.  //循环两种 while() ,for()
  2.       //循环三要素：循环变量、循环条件、更新循环条件
  3.       const lang = ["html", "js", "css"];
  4.       console.log(lang);
  5.       console.log("---------");
  7.       // while :入口循环，进入循环前必须进行判断
  8.       let i = 0;
  9.       while (i < lang.length) {
  10.         console.log(lang[i]);
  11.         i = i + 1;
  12.       }
  13.       console.log("---------");
  14.       // do - while 出口判断 至少要遍历一次
  15.       i = 0;
  16.       do {
  17.         console.log(lang[i]);
  18.         i = i + 1;
  19.       } while (i > lang.length);
  20.       console.log("---------");
  21.       // for  for(循环变量的初始化、循环条件、更新循环条件)
  22.       //   for (let i = 0; i < lang.length; i = i + 1) {
  23.       //     console.log(lang[i]);
  24.       //   }
  25.       for (let i = 0; i < lang.length; i = i + 1) console.log(lang[i]);
  26.       console.log("---------");
  27.       // for - of  遍历数组
  28.       // for (item of arr){  }
  29.       for (item of lang) console.log(item);
  30.       console.log("---------");
  31.       // forEach()遍历数组
  32.       lang.forEach(function (item, index, array) {
  33.         console.log(item, index, array);
  34.         console.log("---------");
  35.       });
  36.       lang.forEach(function (item) {
  37.         console.log(item);
  38.         console.log("++++++++");
  39.       });
  40.       lang.forEach((item) => console.log(item));
  41.       console.log("---------");
  42.       // for in 遍历对象
  43.       let user = { id: 1, "my name": "xiaoming", age: 22 };
  44.       for (let key in user) {
  45.         console.log(user[key]);
  46.       }
  47.       // for in 遍历对象 for of 遍历数组

访问器属性

  1. let user = {
  2.         data: { name: "小明", age: 25 },
  3.         getage() {
  4.           return user.data.age;
  5.         },
  6.         setage(age) {
  7.           if (age >= 18 && age <= 99) user.data.age = age;
  8.           else console.log("非法数据");
  9.         },
  10.       };
  11.       console.log(user.getage());
  12.       user.setage(30);
  13.       console.log(user.getage());
  15.       // 用户访问习惯
  16.       //读
  17.       // 服务器属性 在属性名前添加get或set 将该方法伪装成属性
  19.       user = {
  20.         data: { name: "小明", age: 25 },
  21.         get age() {
  22.           return user.data.age;
  23.         },
  24.         set age(age) {
  25.           if (age >= 18 && age <= 99) user.data.age = age;
  26.           else console.log("非法数据");
  27.         },
  28.       };
  29.       console.log(user.age);
  30.       user.age = 60;
  31.       console.log(user.age);

dom元素的增删改

  • dom 元素的获取
  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.       <li class="item">item6</li>
  8.       <li class="item">item7</li>
  9.       <li class="item">item8</li>
  10.     </ul>
  11.     <script>
  12.       // 1、将所有的列表项变成红色
  13.       //document 代表html文档
  14.       //document.querySelectorAll 返回满足条件的元素集合
  16.       const items = document.querySelectorAll(".list > .item");
  17.       //console.log(items);
  18.       //items.forEach((item) => console.log(item));
  19.       items.forEach((item) => (item.style.color = "red"));
  21.       //2、获取第一个子元素
  22.       //console.log(items[0]);
  23.       items[0].style.backgroundColor = "yellow";
  24.       //document.querySelector 返回满足条件集合中的第一个
  25.       let first = document.querySelector(".list > .item");
  26.       console.log(first === items[0]);
  27.       document.querySelector(".list");
  28.       // 3、快捷方式
  29.       //let body document.querySelector("body");
  30.       document.body.style.background = "lightgreen";
  31.       let body;
  32.     </script>
  33.     <!-- form 中设置id -->
  34.     <form action="" name="login" id="mylogin">
  35.       使用对象属性的点语法（name属性）访问数据
  36.       <input type="email" name="email" value="a@a.com" />
  37.       <button>提交</button>
  38.     </form>
  39.     <script>
  40.       //form
  41.       //let form = document.querySelectorAll("form");
  42.       //form = document.forms[0];
  43.       // form = document.forms.login;
  44.       // form = document.forms.item(0);
  45.       //   form = document.forms.mylogin; //推荐使用id获取
  46.       //   console.log(form);
  48.       //   // email name属性不仅是变量名也可以当成id使用
  49.       //   console.log(form.email.value);
  50.       let value = document.forms.login.email.value;
  51.       console.log(value);
  52.     </script>
  • Dom数的遍历
  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.       <li class="item">item6</li>
  8.       <li class="item">item7</li>
  9.       <li class="item">item8</li>
  10.     </ul>
  11.     <script>
  12.       //节点类型 元素 文本 文档
  13.       let ul = document.querySelector(".list");
  14.       // 查看所有节点 不区分类型
  15.       console.log(ul.children);
  16.       //ul.children 是类数组 需要转变成数组
  17.       console.log(Array.from(ul.children));
  18.       console.log([...ul.children]);
  19.       [...ul.children].forEach((item) => (item.style.color = "red"));
  20.       [...ul.children][0].style.color = "blue";
  21.       ul.firstElementChild.style.color = "blue";
  22.       // 下一个兄弟元素
  23.       ul.firstElementChild.nextElementSibling.style.background = "yellow";
  24.       ul.lastElementChild.style.color = "blue";
  25.       // 前一个
  26.       ul.lastElementChild.previousElementSibling.style.background = "yellow";
  27.     </script>
  • dom元素的增删
  1. //创建元素 create
  2.       let div = document.createElement("div");
  3.       let p = document.createElement("p");
  4.       p.textContent = "hello world";
  6.       //添加append
  8.       p.append("大家好");
  9.       div.append(p);
  10.       document.body.append(div);
  12.       const li = document.createElement("li");
  13.       li.textContent = "第一个";
  14.       div.append(li);
  15.       //instertAdjacentElement( 插入位置，元素)
  16.       // 插入位置有四个
  17.       // beforBegin 开始标签之前
  18.       // afterBegin 结束标签之前
  19.       // beforEnd 开始标签之后
  20.       // afterEnd 结束标签之后
  21.       const item = document.createElement("li");
  22.       item.textContent = "继续加油";
  23.       div.insertAdjacentElement("beforeBegin", item);
  24.       const item2 = document.createElement("li");
  25.       item2.textContent = "我来了";
  26.       div.insertAdjacentElement("afterEnd", item2);
  • dom增删改演示
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>DOM增删改演示</title>
  8.   </head>
  9.   <body>
  10.     <!-- 用js制作一个简单的页面 -->
  11.     <style>
  12.       .box {
  13.         display: grid;
  14.         grid-template-columns: 10rem 1fr 10rem;
  15.         place-content: center;
  16.       }
  17.       .box .header {
  18.         grid-column-start: 1;
  19.         grid-column-end: 4;
  20.         grid-row-start: 1;
  21.         grid-row-end: 2;
  22.         height: 50px;
  23.         padding: 0 40px;
  24.         background-color: lightgreen;
  25.       }
  26.       .box .inbox {
  27.         height: calc(100vh - 50px);
  28.         gap: 5px;
  29.         background-color: lightpink;
  30.       }
  31.       .box .inbox2 {
  32.         height: calc(100vh - 50px);
  33.         gap: 5px;
  34.         background-color: lime;
  35.       }
  36.       .box .inbox3 {
  37.         height: calc(100vh - 50px);
  38.         gap: 5px;
  39.         background-color: mediumaquamarine;
  40.       }
  41.       .box .inbox4 {
  42.         height: calc(100vh - 50px);
  43.         gap: 5px;
  44.         background-color: mediumslateblue;
  45.       }
  46.       h2,
  47.       h3 {
  48.         text-align: center;
  49.       }
  50.     </style>
  51.     <script>
  52.       const box = document.createElement("div");
  53.       const header = document.createElement("div");
  54.       const inbox = document.createElement("div");
  55.       const inbox2 = document.createElement("div");
  56.       const inbox3 = document.createElement("div");
  57.       const inbox4 = document.createElement("div");
  58.       box.setAttribute("class", "box");
  59.       header.setAttribute("class", "header");
  60.       inbox.setAttribute("class", "inbox");
  61.       inbox2.setAttribute("class", "inbox2");
  62.       inbox3.setAttribute("class", "inbox3");
  63.       inbox4.setAttribute("class", "inbox4");
  65.       box.append(header);
  66.       box.append(inbox);
  67.       box.append(inbox2);
  68.       box.append(inbox3);
  69.       box.append(inbox4);
  70.       //增加节点
  71.       document.body.append(box);
  72.       let box4 = document.querySelector(".box > .inbox4");
  73.       // 删除节点 inbox4
  74.       box4.remove();
  76.       const h2 = document.createElement("h2");
  77.       h2.textContent = "我是标题";
  78.       header.insertAdjacentElement("afterbegin", h2);
  79.       const h3 = document.createElement("h3");
  80.       h3.textContent = "我是左边";
  81.       const h32 = document.createElement("h3");
  82.       h32.textContent = "我是中间";
  83.       const h33 = document.createElement("h3");
  84.       h33.textContent = "我是右边";
  85.       inbox.insertAdjacentElement("beforeend", h3);
  86.       inbox2.insertAdjacentElement("beforeend", h32);
  87.       inbox3.insertAdjacentElement("beforeend", h33);
  88.       let box3 = document.querySelector(".box > .inbox3");
  89.       console.log(box3);
  90.       box3.style.background = "blue";
  91.       let box5 = document.querySelector(".box");
  92.       box5.lastElementChild.previousElementSibling.style.background = "red";
  93.     </script>
  94.   </body>
  95. </html>

效果

dom元素增加删除

dataset,classList对象的使用方式与场景

  • 自定义属性
  1.  <!-- id,class 内置、预定义
  2.     email，index 自定义 数据属性 -->
  3.     <div id="user" class="active" data-email="bb@99.com" data-index="5">
  4.       <h2>hello world</h2>
  5.     </div>
  6.     <script>
  7.       const div = document.querySelector("#user");
  8.       console.log(div.dataset.email);
  9.       console.log(div.dataset.index);
  10.       // dataset 对象 用于获取用户自定义属性
  11.       //自定义属性必须使用data- 为前缀 访问前缀不写
  12.     </script>
  • css对象
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>css对象</title>
  8.   </head>
  9.   <style>
  10.     .red {
  11.       color: red;
  12.     }
  13.     .bgc {
  14.       background-color: yellow;
  15.     }
  16.     .blue {
  17.       color: blue;
  18.     }
  19.     h2 {
  20.       border: 5px solid #333;
  21.     }
  22.   </style>
  23.   <body>
  24.     <h2>hello word</h2>
  25.     <script>
  26.       //document.querySelector("h2").className = "red";
  27.       const h2 = document.querySelector("h2");
  28.       h2.classList.add("red");
  29.       h2.classList.add("bgc");
  30.       h2.classList.remove("bgc");
  31.       h2.classList.replace("red", "blue");
  32.     </script>
  33.   </body>
  34. </html>
上一条：markdown语法学习什么时候开始都不晚！下一条：axios的使用方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
skyliu2021-09-29 15:16:091楼
厉害厉害哈

相关文章

查看更多