js 部分｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 3 天。今日查缺补漏来啦。## label

这是我参与「第五届青训营」伴学笔记创作活动的第 3 天。今日查缺补漏来啦。

label 标签的使用

时常用在单，复选框时设置，使得点击文本也能触发选择框。

来源W3School

<div>
    <input type="radio" name="bbb" id="man">
    <label for="man">男</label>
</div>
<div>
    <input type="radio" name="bbb" id="woman">
    <label for="woman">女</label>
</div>
<!-- 这样在点击男/女时就可以点上checked-->

将点击事件进行转移。例如以下案例——白天黑夜切换模式。将checkbox是否checked作为切换模式的条件，选中兄弟节点同时修改颜色。

 <input type="checkbox" id="modeChange">
    <div class="content">
    <div class="image"> </div>
        <div style="width: 50%; margin: auto;">
            <label for="modeChange" style="color:aquamarine">点击切换黑夜白天</label>
            <p>
                月晕天风雾不开，海鲸东蹙百川回。
                惊波一起三山动，公无渡河归去来。
            </p>
        </div>
    </div>
  <!-- style部分-->
<style>
     .image{
    background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.0ab7c7e419104656eb5734e0ff74a6d9?rik=nitm3Jol38ctrQ&riu=http%3a%2f%2fimg0.ddove.com%2fupload%2f20090919%2f190930549705.JPG&ehk=r%2bVGj3UWyjHn8olbLXxrmx5NI%2fZYZj0yV34%2bLQKbP%2fw%3d&risl=&pid=ImgRaw&r=0");
    width: 80%;
    height: 400px;
    margin: auto;
    background-position: center;
    background-size: cover;
    }
    #modeChange {
        display: none;
    }

    #modeChange:checked+.content {
        background: #000;
        color: white;
        transition: 1s all;
    }
</style>

js 高阶函数part

传递参数forEach的实现

let arr =[1,2,3,4]
    // arr.forEach((item)=>{console.log(item*2)})
    function myForEach(arr,fn){
        for(let i of arr)
        fn(i)
    }

    myForEach(arr,item=>console.log(item*2))
    function myMap(arr,fn){
        let newArr = []
        for(let i of arr)
        {
            arrNew.push(fn(i))
        }
        return newArr
    }

console.log(arr,item=>item*2)

相同函数，三者都打印999。传递两个参数时传递的顺序和函数中的参数顺序一致。

function fun(m)
{
    console.log(m)
}
fun(999)

function equal1(fun)
{
    return function(...m){
        console.log(m) //[999]
        fun(...m)
    }
}
equal1(fun)(999) //传递两个参数

function equal2(m)
{
    return function(...args){
        console.log(args)//[fun(m)]
        fun(m)
    }
}
equal2(999)(fun)

闭包，作为一座桥梁，读取其他函数内部变量的函数

let obj={
    age:19,
    fn(){
        console.log(this.age)
    }
}
obj.fn()

function equal_(fn){
    return function(...args){
        // console.log(args) //[]空数组，只传过来了一个参数，第二个为空
        console.log(this)//this指向的是obj,call方法改变了指向
        //绑定此this
        fn.apply(this,args)//apply传递要用数组
        // console.log()
    }
}
// equal_(obj.fn.bind(obj))() //这个是将整个obj传递过去 
equal_(obj.fn).call(obj) //call方法新的this指向obj

节流函数，实现某个wait时间内只能触发一次。

let btn = document.querySelector('.btn')
btn.addEventListener('click',throttle(function(){
    console.log(1)
},2000))

function throttle(fn,awit){
    let timer
    return function(...args){
        if(timer) return;
        //一秒后清空timer,timer是随机数值的
        timer = setTimeout(()=>timer=null,awit)
        return fn.apply(this,args)
    }
}

一些完整代码。

js 部分｜ 青训营笔记

label 标签的使用

js 高阶函数part

js 部分｜青训营笔记