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

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

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

js语法

解构赋值

  • 数组解构
  1. let [name, email] = ["小明", "88@qq.com"];
  2. [name, email] = ["小光", "99@qq.com"]; //更新
  3. console.log(name, email);
  4. // 参数不足
  5. [name, email, age = 18] = ["小光", "99@qq.com"];
  6. //参数过多
  7. let [a, b, c, d, ...e] = [2, 2, 5, 25, 2, 52, 52, 52, 52, 52, 2];
  8. console.log(a, b, c, d, ...e);
  9. let x = 10;
  10. let y = 20;
  11. //可以通过中间变量交换
  12. [y, x] = [x, y];
  13. 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("---------");
  17. // 结构用在函数参数
  18. // function getUser(user) {
  19. // console.log(user.id, user.name, user.email);
  20. // }
  21. // getUser({ id: 52, name: "张三", email: "ddd@q.com" });
  22. function getUser({ id, name, email }) {
  23. console.log(id, name, email);
  24. }
  25. 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("---------");
  6. // while :入口循环,进入循环前必须进行判断
  7. let i = 0;
  8. while (i < lang.length) {
  9. console.log(lang[i]);
  10. i = i + 1;
  11. }
  12. console.log("---------");
  13. // do - while 出口判断 至少要遍历一次
  14. i = 0;
  15. do {
  16. console.log(lang[i]);
  17. i = i + 1;
  18. } while (i > lang.length);
  19. console.log("---------");
  20. // for for(循环变量的初始化、循环条件、更新循环条件)
  21. // for (let i = 0; i < lang.length; i = i + 1) {
  22. // console.log(lang[i]);
  23. // }
  24. for (let i = 0; i < lang.length; i = i + 1) console.log(lang[i]);
  25. console.log("---------");
  26. // for - of 遍历数组
  27. // for (item of arr){ }
  28. for (item of lang) console.log(item);
  29. console.log("---------");
  30. // forEach()遍历数组
  31. lang.forEach(function (item, index, array) {
  32. console.log(item, index, array);
  33. console.log("---------");
  34. });
  35. lang.forEach(function (item) {
  36. console.log(item);
  37. console.log("++++++++");
  38. });
  39. lang.forEach((item) => console.log(item));
  40. console.log("---------");
  41. // for in 遍历对象
  42. let user = { id: 1, "my name": "xiaoming", age: 22 };
  43. for (let key in user) {
  44. console.log(user[key]);
  45. }
  46. // 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());
  14. // 用户访问习惯
  15. //读
  16. // 服务器属性 在属性名前添加get或set 将该方法伪装成属性
  17. user = {
  18. data: { name: "小明", age: 25 },
  19. get age() {
  20. return user.data.age;
  21. },
  22. set age(age) {
  23. if (age >= 18 && age <= 99) user.data.age = age;
  24. else console.log("非法数据");
  25. },
  26. };
  27. console.log(user.age);
  28. user.age = 60;
  29. 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 返回满足条件的元素集合
  15. const items = document.querySelectorAll(".list > .item");
  16. //console.log(items);
  17. //items.forEach((item) => console.log(item));
  18. items.forEach((item) => (item.style.color = "red"));
  19. //2、获取第一个子元素
  20. //console.log(items[0]);
  21. items[0].style.backgroundColor = "yellow";
  22. //document.querySelector 返回满足条件集合中的第一个
  23. let first = document.querySelector(".list > .item");
  24. console.log(first === items[0]);
  25. document.querySelector(".list");
  26. // 3、快捷方式
  27. //let body document.querySelector("body");
  28. document.body.style.background = "lightgreen";
  29. let body;
  30. </script>
  31. <!-- form 中设置id -->
  32. <form action="" name="login" id="mylogin">
  33. 使用对象属性的点语法(name属性)访问数据
  34. <input type="email" name="email" value="a@a.com" />
  35. <button>提交</button>
  36. </form>
  37. <script>
  38. //form
  39. //let form = document.querySelectorAll("form");
  40. //form = document.forms[0];
  41. // form = document.forms.login;
  42. // form = document.forms.item(0);
  43. // form = document.forms.mylogin; //推荐使用id获取
  44. // console.log(form);
  45. // // email name属性不仅是变量名也可以当成id使用
  46. // console.log(form.email.value);
  47. let value = document.forms.login.email.value;
  48. console.log(value);
  49. </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";
  5. //添加append
  6. p.append("大家好");
  7. div.append(p);
  8. document.body.append(div);
  9. const li = document.createElement("li");
  10. li.textContent = "第一个";
  11. div.append(li);
  12. //instertAdjacentElement( 插入位置,元素)
  13. // 插入位置有四个
  14. // beforBegin 开始标签之前
  15. // afterBegin 结束标签之前
  16. // beforEnd 开始标签之后
  17. // afterEnd 结束标签之后
  18. const item = document.createElement("li");
  19. item.textContent = "继续加油";
  20. div.insertAdjacentElement("beforeBegin", item);
  21. const item2 = document.createElement("li");
  22. item2.textContent = "我来了";
  23. 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");
  64. box.append(header);
  65. box.append(inbox);
  66. box.append(inbox2);
  67. box.append(inbox3);
  68. box.append(inbox4);
  69. //增加节点
  70. document.body.append(box);
  71. let box4 = document.querySelector(".box > .inbox4");
  72. // 删除节点 inbox4
  73. box4.remove();
  74. const h2 = document.createElement("h2");
  75. h2.textContent = "我是标题";
  76. header.insertAdjacentElement("afterbegin", h2);
  77. const h3 = document.createElement("h3");
  78. h3.textContent = "我是左边";
  79. const h32 = document.createElement("h3");
  80. h32.textContent = "我是中间";
  81. const h33 = document.createElement("h3");
  82. h33.textContent = "我是右边";
  83. inbox.insertAdjacentElement("beforeend", h3);
  84. inbox2.insertAdjacentElement("beforeend", h32);
  85. inbox3.insertAdjacentElement("beforeend", h33);
  86. let box3 = document.querySelector(".box > .inbox3");
  87. console.log(box3);
  88. box3.style.background = "blue";
  89. let box5 = document.querySelector(".box");
  90. box5.lastElementChild.previousElementSibling.style.background = "red";
  91. </script>
  92. </body>
  93. </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>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
skyliu2021-09-29 15:16:091楼
厉害厉害哈