JavaScript高阶函数

最新推荐文章于 2024-09-25 14:00:00 发布

在学了在学了！

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量238

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xieyihu/article/details/127061966

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.回调函数

本质还是函数，就是函数调用了函数；跟匿名内部类有什么不同？
定时器里面有用到；

2.环境对象this

谁调用，this就是谁；绑定机制；

3.排他思想

都取消掉，只有自己有效果；
案例：案列变色

<body>
    <button>第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
    <script>
        let btn = document.querySelectorAll('button')
        for(let i = 0; i < btn.length; i++){
            btn[i].addEventListener('click', function(){
                document.querySelector('.pink').classList.remove('pink')
                this.classList.add('pink')
            })
        }
    </script>
</body>

一，结点操作

DOM树里面的内容都是结点；分为元素，属性，文本结点；

1.查找结点

1.子节点

children和childrennode
获得的是伪数组，只获取元素，而node会获取标签；一般使用children的情况多一点；

2.兄弟结点

two.nextElementSibling.style.color = 'red'
            two.previousElementSibling.style.color = 'red'

2.增加结点

二.时间对象

1.使用前需要实例化

 let date = new Date()
        console.log(date.getDate())

需要注意的是：月份0-11；星期是0-6；

2.时间戳

是1970年1月1日至今的毫秒数；倒计时的时候使用；
三个获取时间戳的方法：

<script>
        //1
        let date = new date()
        console.log(date.getTime())
        //2，最推荐
        console.log(+ new Date())
        console.log(+ new Date('2022-10-12 12:00:00'))
        //3,只能得到当前的时间
        console.log(Date.now())
    </script>

案例：
倒计时牌

<script>
    let hour = document.querySelector('#hour')
    let minutes = document.querySelector('#minutes')
    let scond = document.querySelector('#scond')
    time()
    setInterval(time, 1000)
    function time() {
      // 1. 得到现在的时间戳
      let now = +new Date()
      // 2. 得到指定时间的时间戳
      let last = +new Date('2021-8-29 18:30:00')
      // 3. （计算剩余的毫秒数） / 1000 === 剩余的秒数
      let count = (last - now) / 1000
      // console.log(count)
      // 4. 转换为时分秒
      // h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
      let h = parseInt(count / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      // m = parseInt(总秒数 / 60 % 60);     //   计算分数
      let m = parseInt(count / 60 % 60)
      m = m < 10 ? '0' + m : m
      // s = parseInt(总秒数 % 60); //   计算当前秒数
      let s = parseInt(count % 60);
      s = s < 10 ? '0' + s : s
      // console.log(h, m, s)
      hour.innerHTML = h
      minutes.innerHTML = m
      scond.innerHTML = s
    }

  </script>

三.重绘和回流

1.回流

当尺寸，结构，布局，影响页面布局，浏览器重新渲染的过程；
浏览器的首次刷新；

2.重绘

不影响页面布局的改变；
重绘不一定引起回流；回流一定会引起重绘；

四.事件对象及属性

1.事件流

事件流是事件完整执行过程中的流动路径；
分为捕获阶段和冒泡阶段；找到然后返回；
事件冒泡：比如儿子和父亲都有点击事件，当儿子的点击事件触发时，父亲的事件也会被触发；这就是冒泡；
阻止事件流动

son.addEventListener('click', function (e) {
            alert('我是儿子')
            // 阻止流动 Propagation 传播
            e.stopPropagation()
        })

阻止默认行为
链接点击不跳转，表单域不提交；

let a = document.querySelector('a')
        a.addEventListener('click', function (e) {
            // 阻止默认行为 方法
            e.preventDefault()
        })

2.事件委托

事件委托是给父级添加事件；
在这里插入图片描述

<script>
        // 不要每个小li注册事件了  而是把事件委托给他的爸爸 
        // 事件委托是给父级添加事件 而不是孩子添加事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // alert('我点击了')
            // 得到当前的元素
            // console.log(e.target)
            e.target.style.color = 'red'
        })
    </script>