箭头函数应用场景，(rest、sprend)的使用方法,获取dom元素方式、(classList/dataset)对象的应用场景
程序员文章站
2022-02-17 11:28:22
...
rest与sprend:
在函数的参数中就是...rest 归并在函数的调用的参数列表中就是...spread 展开
样式代码:
// ...rest剩余参数function demo4(...arr) {console.log(arr);let res = 0;console.log(res);}let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];//...spread扩展操作demo4(...arr1);//等价于demo4(1, 2, 3, 4, 5, 6, 7, 8);
效果预览:
箭头函数:
箭头函数就是用来简化匿名函数的语法糖: => 胖箭头、-> 小箭头当参数只有一个时,圆括号可以省略,没有参数,小括号必须要有如果函数体只有一条语句,,可以省略return和"{}"当有多个参数时,圆括号必须要写,当有多条语句时,函数体的大括号不能省
样式代码:
<script>let id = 'B888';let name = '电脑';let model = 'MacBook Pro';let demo1 = (id, name, model) => [id, name, model, 99899];res = demo1(id, name, model);res.forEach(item => console.log(item));</script>
效果预览:
获取dom元素的方式:
用css选择器来获取元素：
样式代码:
<style>.item:first-of-type {color: red;}</style><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>//返回匹配的元素集合中的第一个元素,(返回一个)const li = document.querySelector('.item');console.log(li);//返回匹配的元素集合所有成员const lis = document.querySelectorAll('.item');console.log(lis);</script>
效果预览:
jQuery使用选择器来获取元素：
样式代码:
<style>.item:first-of-type {color: red;}</style><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>// $('.item') const $ = selector => document.querySelectorAll(selector);console.log($('.item'));$('.item').forEach(item => item.style.color = 'violet')</script>
效果预览:
classList对象:
<style>.red {color: red;}.blue {color: blue;}.bj {background-color: yellow;}</style></head><body><p>今天真是个不错的日子</p><script>const p = document.querySelector('p');// classList 专门用来操作类class// 简写p.classList.add('red','bj');// 移除p.classList.remove('bj');// 正确的用法应该是用blue替换掉redp.classList.replace('red', 'blue');//toggle('red'):动态切换样式,如果已有则删除,如果没有则添加//p.classList.toggle('red');</script></body>
效果预览:
dataset对象:
样式代码:
body><div class="user" data-email="tp@php.cn" data-my-gender="男">个人信息</div><script>const user = document.querySelector('.user');user.id = 'S001';console.log(user.id);// dataset对象专用于访问自定义的标签属性console.log(user.dataset.email);console.log(user.dataset.myGender)</script></body>
效果预览:
上一篇： 常用数据库操作指令
下一篇： 模仿京东网页(首页、页眉、导航、推荐)