箭头函数的应用场景和rest,sprend参数的使用方法；2. 获取dom元素的方式;classList对象与dataset对象的应该场景 - PHP学习

Home > List of blog posts > 箭头函数的应用场景和rest,sprend参数的使用方法；2. 获取dom元素的方式;classList对象与dataset对象的应该场景

Blogger Information

Blog 23

fans 0

comment 3

visits 23583

Special Recommendation

More>

Related recommendations

rest 和 spredad

在函数的形参变量前加上“…”,将传递的参数变成一个集合
在函数的参数中就是…rest 归并
在函数的调用的参数列表中就是…sprend 展开

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //rest
      function fun(...arr) {
        console.log(arr);
      }
      arr = [5, 7, 5, 2, 1, 9];
      //spredad
      fun(...arr);
    </script>
  </body>
</html>

箭头函数

箭头函数应用场景

当参数只有一个的时候：()可以省略，如果没有参数反而不能省
当有多个参数时，()圆括号必须要写
当有多条语句时，函数体的{}大括号不能省
如果函数体只有一条语句时可以省略大括号


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>箭头函数</title>
  </head>
  <body>
    <script>
      let name = "小米11";
      let price = 3999;
      let num = 500;
      //   let fun = function (name, price, num) {
      //     return [name, price, num];
      //   };
      //1. 当参数只有一个的时候：()可以省略，如果没有参数反而不能省
      //2. 当有多个参数时，()圆括号必须要写
      let fun = (name, price) => ["苹果12", name, price];
      let res = fun(name, price);
      res.forEach((item) => console.log(item));
      //3. 当有多条语句时，函数体的{}大括号不能省
      //4. 如果函数体只有一条语句时可以省略大括号
      let fun1 = (name, price) => {
        console.log(name);
        return ["苹果12", name, price];
      };
      let res1 = fun1(name, price);
      res1.forEach((item) => console.log(item));
      //返回对象时要用（）包住
      let obj = name => ({ 型号: name, 价格: 3999 });
      let res2 = obj(name);
      for (let key in res2) console.log(res2[key]);
    </script>
  </body>
</html>

获取DOM元素的方式

1.传统方式

      //标签获取
      document.getElementsByTagName("li");
      //id获取
      document.getElementById("list");
      //class获取
      document.getElementsByClassName("item");

2.CSS选择器方式

返回匹配元素集合的第一个值
document.querySelector()
返回匹配元素集合
document.querySelectorAll()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="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>
      <li class="item">item6</li>
    </ul>
    <script>
      //1. 返回匹配的元素集合中的第一个元素，（返回第一个）
      let li = document.querySelector(".itme");
      //2. 返回匹配的元素集合
      let list = document.querySelectorAll(".item");
      //返回nodelist,并不是数组
      list.forEach((item) => (item.style.color = "red"));
      //可使用伪类选择器
      let first = document.querySelectorAll(".item:last-of-type");
      first[0].style.color = "blue";
      //标签获取
      document.getElementsByTagName("li");
      //id获取
      document.getElementById("list");
      //class获取
      document.getElementsByClassName("item");
    </script>
  </body>
</html>

classList对象与dataset对象

classlist对象用来操作元素的类，增加、修改、移除、判断
dataset对象用来操作自定义属性

classlist

添加
p.classList.add('red');
移除
p.classList.remove('red');
替换
p.classList.replace('red','blue')
自动替换

动态切换样式，如果已有则删除，没有则添加
p.classList.toggle('red');

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .red {
        color: red;
      }
      .blue {
        background-color: blue;
      }
      .violet {
        background-color: violet;
      }
      .pink {
        color: lightpink;
      }
    </style>
  </head>
  <body>
    <p class="red">我是p标签</p>
    <!-- <p>我是p标签</p> -->
    <script>
      let p = document.querySelector("p");
      //添加蓝色背景
      //p.classList.add("blue");
      //移除红色字体
      //p.classList.remove("red");
      //替换背景颜色
      //p.classList.replace("blue", "violet");
      //动态切换样式
      p.classList.toggle("red");
    </script>
  </body>
</html>

dataset

访问自定义属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      class="user"
      data-email="php@php.cn"
      data-myid="q110"
      data-my-id="a1001"
    ></div>
    <script>
      let user = document.querySelector(".user");
      //dataset专门用来访问自定义的标签属性
      //   alert(user.dataset.email);
      //如果自定属性名中像data-my-id访问时需要将id首字母大写
      //如果访问采用驼峰写法访问名为data-myid的也是访问不到的
      //要么不加横杠全小写，要么加了访问横杠后第一个字母大写
      alert(user.dataset.myId);
      alert(user.dataset.myid);
    </script>
  </body>
</html>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML中元素、标签、属性之间关联与区别

2020-12-12 20:32:03