箭头函数、剩余参数以及DOM操作中的dataset和classList - JS学习

首页 > 博客列表 > 箭头函数、剩余参数以及DOM操作中的dataset和classList

博主信息

博文 145

粉丝 7

访问量 202206

专题推荐

更多>

函数以及箭头函数特性和使用

1、函数组成：

函数声明关键字：function
函数名（遵循表示符原则）
参数：可以无，也可以是一个和多个；由小括号()包括
函数体：由js语句组成，由中括号{}包括
函数体中常常会有一个return语句，作为函数的返回值；return 返回的是个单值，如果返回多个值可以使用引用类型变量：数组和对象；

2、函数的参数表现形式：

默认参数：通常在函数参数中设置默认值：例如

function poeple(name,sex,age=25){
          return `我是${name},今年${age}岁,性别${sex}`}

剩余参数：...argument,当argument作为形参时，把多个参数值rest到argument中；当zhuoargument作为实参使用时，把argument中的参数逐个展开（spread）;

3、箭头函数是匿名函数的一种简化（匿名函数与基本函数相同，知识没有函数名）

箭头函数的基本形式：(参数)=>{函数体}
如果只有一个参数可以省略小括号，如果没有参数,反而不能省；如果函数体只有一个语句可以省略大括号例如:name=>console.log(name);

4、代码实操演练：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
</body>
<script type="text/javascript">
    // 箭头函数
    let it=name=>console.log(name);
    it('ldy');
    // age默认参数
    function people(name,sex,age=25){
                return `我是${name},今年${age}岁,性别${sex}`
                }
    console.log(people("ldy","男"));
    // 剩余参数
    function sum(...arr){
        let sum=0;
        for (let item of arr){
            sum += item;
        }
        // console.log(sum);
        return sum;
    }
    console.log(sum(1,2,3,5,6));
</script>
</html>

DOM操作常见api函数

1、document.querySelector();:用css选择器来获取元素（不支持伪元素其他都支持）；返回匹配到到第一个html标签元素
2、document.querySelectorAll();用css选择器来获取元素（不支持伪元素其他都支持）；返回匹配到到HTML标签元素组成的NodeList对象(类数组)
3、常见的还有document.getElementsByClassName(),document.getElementsByTagName();这两个个函数不同的是返回的html元素集合（也是类数组的），而document.getElementById()返回的一个html元素；

4、代码实操演练：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM操作</title>
</head>
<body>
    <div class="container" id="container">
        <div class="item">item01</div>
        <div class="item">item02</div>
        <div class="item">item03</div>
        <div class="item">item04</div>
        <div class="item">item05</div>
    </div>
</body>
<script type="text/javascript">
    // 通过CSS选择器
    let item=document.querySelector('.item');
    console.log(item);
    // querySelector();返回匹配到的第一个html标签元素
    item.style.backgroundColor="red";
    let items=document.querySelectorAll(".item");
    //querySelectorAll();返回nodelist类数组的对象
    console.log(items);
    // 通过元素标签和类以及id
    let divs=document.getElementsByTagName('div');
    // 返回的时html元素集合
    console.log(divs);
    let div=document.getElementById('container');
    // 返回html标签元素
    console.log(div);
    let cl=document.getElementsByClassName('item');
    console.log(cl);
</script>
</html>

classList和dataset对象的使用

1、classlist对象主要用于解决：html元素中class属性和Js中class(类关键字)的冲突，故而用classList对象来操作html中的属性；常见的方法有：

classList.add();增加class样式
classList.remove();删除classs样式
classList.toggle();动态切换样式，有则删除，无则增加

2、dataset对象是专门用来访问html元素中的自定义属性：

html元素通过data-string来自定义属性；string如果有多个单词组成必须有-链接;
js通过dataset来访问自定义属性，如果html元素中自定义属性名字有多个单词组成时，由于js标识符不支持-，故通过首字母大写（驼峰法）来表示自定义属性（多单词）；

3、代码实操演练

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM操作</title>
    <style>
        .bgc{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container" id="container" data-index=1 data-name="C"data-tag-name="tn">
        <div class="item">item01</div>
        <div class="item">item02</div>
        <div class="item">item03</div>
        <div class="item">item04</div>
        <div class="item">item05</div>
    </div>
</body>
<script type="text/javascript">
    // 通过CSS选择器
    let item=document.querySelector('.container');
    //增加class样式
    item.classList.add('bgc');
    // 移除class样式
    item.classList.remove('bgc');
    // 切换class样式
    item.classList.toggle("bgc");
    // 获取data自定义属性值
    console.log(item.dataset.index);
    console.log(item.dataset.name);
    console.log(item.dataset.tagName);
</script>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

12月29日练习：php中文网footer案例（组件footer）

2019-12-29 13:35:19