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

首页 > 博客列表 > 箭头函数的应用场景和rest,sprend参数的使用方法；2. 获取dom元素的方式;classList对象与dataset对象的应该场景

博主信息

博文 23

粉丝 0

访问量 29821

专题推荐

更多>

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>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2020-12-12 20:32:03