浅谈JS函数和获取dom元素的方式

函数的基本概念

• 函数是代码复用的手段

• 函数使用与变量一样分二步：声明、调用

//声明
function demo() {
   console.log('函数名：',demo.name);
}
//调用
demo();

• 函数可以增加参数，并设置默认值

//声明
function demo(name = 'jack') {
   console.log('我叫：',name);
}
//调用
demo();
//传参改变默认值
demo('Tom');

• 小案例-封装加法函数

function add(a,b,c) {
   console.log('计算结果：',a+b+c);
}
//调用
add(4,5,6);
//输出
计算结果：12

• rest剩余参数 ：当不确认参数有多少的时候

归并、展开

rest剩余参数 ：当不确认参数有多少的时候

归并，存在于参数中

function demo2(...arr) {
  console.log(arr);
}
demo2(1, 2, 3, 4, 5);

• 用rest剩余参数封装加法函数

function add1(...arr) {
    // console.log(arr);
    let res = 0;
    for (let num of arr) {
    res += num;
 }
console.log('计算结果：',res);
 }
add1(1, 2, 3, 4, 5, 6, 7);
//输出
计算结果：28

展开，存在于调用结果中

let arr = [1,2,3,4,5,6];
console.log(...arr);

• 函数返回值：默认是单值；如果要返回多值，用引用类型（对象、数组）

function demo5() {
    return {
      status: 1,
       message: "成功",
    };
}
let res = demo5();
console.log(res.status, res.message);

箭头函数

• 箭头函数分为胖箭头=>和瘦箭头->

  • 当参数只有一个时,圆括号可以省略,如果没有参数,反而不能省
  • 当有多个参数时, 圆括号必须要写
  • 当有多条语句时,函数体的大括号不能省
  • 如果函数体只有一条语句时,可以省略大括号

let name = 'jack';
let age = 18;
let gender = 'man';
let num;
//完全写法
function demo6() {
   return [name, age, gender];
}
res = demo6();
console.log(res);
//用箭头函数简写，可以省略function 和return及{}
let demo6 = () => [name, age, gender];
res = demo6();
console.log(res);
//如果只有一个参数可以省略（）
let demo6 = num => [name, age, gender];
res = demo6(num);
console.log(res);

获取dom元素

用css选择器获取元素

<style>
.item {
    color: yellow;
}
</style>
<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>
// tag
console.log(document.getElementsByTagName('li'));
// id
console.log(document.getElementById('list'));
// class
console.log(document.getElementsByClassName('item'));
//获取item类的第一个元素,并修改颜色为red
const li = document.querySelector('.item');
console.log((li.style.color = "red"));
//获取item类的所有元素，并修改颜色为blue
const lis = document.querySelectorALL('.item');
//获取到的lis不是真正的数组，用...rest转化
let arr = [...lis];
//1.for of 遍历数组
for(let item of arr) {
   console.log(item.style.color = 'blue');
}
//用foreach遍历数组
arr.foreach(item=>{
   console.log(item);
   item.style.color = 'blue';
})
//用伪类获取第三个li 并修改颜色为green
const three = document.querySelector(".item:nth-of-type(3)");
console.log((three.style.color = "green"));

classList对象

<style>
.red {
     color: red;
}
.blue {
     color: blue;
}
</style>
    <p>开始学习JS了，有一点点懵啊，还需要多写多思考！</p>
//给P标签增加class属性red
p.classlist.add('red');
//修改P标签class属性为blue
p.className = 'blue';
p.classlist.replace('red','blue');
//toggle():动态切换样式,如果已有则删除,如果没有则添加
p.classList.toggle('red');

dataset对象

<div class="user" data-email='tp@php.cn' my-gender-sex="男">个人简介</div>
    <script>
        const user = document.querySelector('.user');
        user.id = 'A005';
        console.log(user.id);
        // dataset对象专用于访问自定义的标签属性
        console.log(user.dataset.email);
        //如果data对象访问的自定义标签属性含有-符号的，访问是去掉-，并-符号后边单词的第一个字母大写
        console.log(user.dataset.myGenderSex);
    </script>