js函数与js操作dom -

函数

函数定义

// 定义
function demo1(){
  console.log('例子1',demo1.name)
};
// 调用
demo1()

函数传参数

function tc(name){
  console.log('i am',name);
}
tc('chen')

rest语法，使剩余参数显示

function tc(...shu){
  console.log(shu);
}
tc(1,2,3,4,5,6)

遍历累加

function tc(...shu){
  console.log(shu);
  let sum = 0;
  // 遍历数组
  for(let v of shu){
      sum=sum+v
  }
  console.log(sum)
}
tc(1,2,3,4,5,6)

函数与dom1(函数作为事件触发不加小括号)

<!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>
    <button id='btn1'>按钮</button>
    </body>
    <script>
        function fun1(){
            alert('hello')
        }
        // 获取id事件，赋值等于btn1
        let btn1=document.getElementById('btn1');
        // 点击触发函数，调用函数不加括号
        btn1.onclick=fun1
    </script>
</html>

函数返回对象

<!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>
        function fun1() {
            return {
                name: 1,
                sex: 'nan',
            }
        }
            let preson = fun1();
            console.log(preson);
            // 使用.访问对象值
            console.log(preson.name,res.sex);
    </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>Document</title>
</head>
<body>
    <script>
        function arr1() {
            return ["name", "sex"];
        }
        fun1 = arr1(
        )
        // 打印数组
        console.log(fun1)
        // 遍历数组
        for (let x in fun1) {
            console.log(fun1[x])
        }
    </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>Document</title>
</head>
<body>
    <script>
        const fun1 = function (chen) {
            return chen * 2
        }
        console.log(fun1(3))
    </script>
</body>
</html>
`


// 去掉function，在（）后面加=>
        const fun1 =  (chen)=> {
            return chen * 2
        }
        console.log(fun1(3))

有返回值，可以去掉return与花括号


        // const fun1 = function (chen) {
        //     return chen * 2
        // }
        // console.log(fun1(3))
const add =  (a,b)=> {
    return a+b
}
console.log(add(1,2))

const add =  (a,b)=> a+b
console.log(add(1,2))

操作bom

<!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>
<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>
</body>
<script>
    // 返回元素集合中的第一个元素
    const li = document.querySelector('.item')
    console.log(li)
    const lis = document.querySelectorAll('.item')
    // 返回元素集合中的所有元素
    console.log(lis)
    // 转化为数组
    let list = [...lis]
    console.log(list)
    lis.forEach(item => {
        console.log(item);
    // 所选元素变成蓝色
        item.style.color = 'blue';
    });
    // 选择class
console.log(document.querySelector('.item'))
</script>
</html>

操作dom，获取id，class，操作元素

<!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>
<style>
    .red {
        color: red;
    }
    .blue{
        color: blue;
    }
</style>
<body>
<p class="red" id='hello'>大家晚上好</p>
</body>
<script>
const p =document.querySelector('p');
// 获取类名字
console.log(p.className)
// 后去id名字
console.log(p.id)
// 将红色改掉蓝色
p.className='blue'
</script>
</html>

增删改css样式

<!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>
<style>
    .red {
        color: red;
    }
    .blue{
        color: blue;
    }
    .bg {
        background-color: yellow;
    }
</style>
<body>
<p >大家晚上好</p>
</body>
<script>
const p =document.querySelector('p');
// 改成蓝色
p.classList.add('blue');
// 增加黄色背景
p.classList.add('bg')
</script>
</html>

const p =document.querySelector('p');
// 改成蓝色,增加黄色背景
p.classList.add('blue','bg');
// 移除黄色背景
p.classList.remove('bg');

自动切换样式

const p =document.querySelector('p');
p.classList.toggle('red');