WbeAPI-3

长城贴瓷砖项目部部长
121 阅读2分钟

第三节

高阶函数

什么是高阶函数？

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用

函数表达式

 let arr = function show(){
            console.log(this);
        }

回调函数

环境对象

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

【谁调用， this 就是谁】 是判断 this 指向的粗略规则
直接调用函数，其实相当于是 window.函数，所以 this 指代 window
 <script>
        //全局变量，就是Window的一个属性
        // 谁调用，this就指向谁
        function show(){
            console.log(this);
        }
        show() //输出，window


        let obj = {
            name:'丹丹'
        }
        function obg1(){
            console.log(this);
        }
        obj.obg1()  //输出的是：obj
    </script>

排他思想

与for循环结合使用
  <style>
        span{
            display: inline-block;
            width: 200px;
            height: 100px;
            line-height: 100px;
            font-size: 30px;
            border: 2px solid black;
            text-align: center;
        }

    </style>
</head>
<body>
    <span>动画片</span>
    <span>恐怖片</span>
    <span>科幻片</span>
    <span>战争片</span>
    <script>
 let span = document.querySelectorAll('span')
 for (let index = 0; index < span.length; index++) {
    
    span[index].addEventListener('click',function(){
         
        //  for (let index = 0; index < span.length; index++) {
        //     span[index].style.backgroundColor='#fff'
             
        //  }
        setAllSpanColor = 'green'
         this.style.backgroundColor='red'
    })
    
 }
    </script>
</body>

案例-Tab切换图片

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .wrapper {
        width: 1000px;
        height: 475px;
        margin: 0 auto;
        margin-top: 100px;
      }

      .tab {
        border: 1px solid #ddd;
        border-bottom: 0;
        height: 36px;
        width: 320px;
      }

      .tab li {
        position: relative;
        float: left;
        width: 80px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        cursor: pointer;
        border-top: 4px solid #fff;
      }

      .tab span {
        position: absolute;
        right: 0;
        top: 10px;
        background: #ddd;
        width: 1px;
        height: 14px;
        overflow: hidden;
      }

      .products {
        width: 1002px;
        border: 1px solid #ddd;
        height: 476px;
      }

      .products .main {
        float: left;
        display: none;
      }

      .products .main.active {
        display: block;
      }

      .tab li.active {
        border-color: red;
        border-bottom: 0;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
      </ul>
      <div class="products">
        <div class="main active">
          <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
          <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
        </div>
      </div>
    </div>
<script>
    // 切换上面的li.下面的图片发生变化,li的边框不见
    // 第一张照片显出来，其余都被隐藏了
    let li = document.querySelectorAll('li')
    let main = document.querySelectorAll('.main')
    for (let index = 0; index < li.length; index++) {
       li[index].addEventListener('click',function(){
           for (let i = 0; i < li.length; i++) {
            li[i].classList.remove('active')
               
           }
           this.classList.add('active')
           for (let i = 0; i < main.length; i++) {
            main[i].classList.remove('active')
               
           }
           main[index].classList.add('active')
       })
       
    }
    
  

</script>
  </body>
</html>

节点

DOM节点

<body>
    <!-- div就是元素节点 -->
    <div></div>
    <!-- href是属性节点 -->
    <a href=""></a>
    <!-- 文字就是文本节点 -->
</body>

查找节点

查找父节点
<body>
    <div>
        <button>X</button>

    </div>
    <script>
        let button = document.querySelector('button')
      

        // 查找父节点
        button.addEventListener('click',function(){
            button.parentNode.style.display = 'none'
        })
  
    </script>
</body>
查找子节点
<body>
    <ul>
        <li>我是1</li>
        <li>我是2</li>
        <li>我是3</li>
        <li>我是4</li>
        <li>我是5</li>
    </ul>
   
    <script>
        let ul = document.querySelectorAll('ul') //数组


         // childNodes 获得所有子节点、包括文本节点（空格、换行）、注释节点等
    // children  （重点）仅获得所有元素节点 返回的还是一个伪数组


    for (let index = 0; index < ul.length; index++) {
        ul[index].addEventListener('click',function(){
            let li = this.children  // 数组
            for (let i = 0; i < li.length; i++) {
                
                li[i].style.display = 'none'
            }
        })
        
    }
    </script>
查找兄弟节点
<body>
    <ul>
        <li>我是1</li>
        <li>我是2</li>
        <li>我是3</li>
        <li>我是4</li>
        <li>我是5</li>
    </ul>
 
    <script>
    //  点击li,它的上下背景颜色变色
    let li = document.querySelectorAll('li')

    for (let index = 0; index < li.length; index++) {
        li[index].addEventListener('click',function(){
            this.previousElementSibling.style.backgroundColor ='green'
            this.nextElementSibling.style.backgroundColor ='red'
        })
        
    }
    </script>

增加节点

<body>
    <ul>
        <li>我是1</li>
        <li>我是2</li>
        <li>我是3</li>
    </ul>
    <script>
        // 创建元素节点
        let li = document.createElement('li')
        let li1 = document.querySelectorAll('li')
        //创建文本节点
         let text = document.createTextNode('我是创建的文本节点')
        document.body.appendChild(text)
        li.innerText='我是新加入的'
        // 插入到一个父元素的最后
        let ul =document.querySelector('ul')

        //如果父元素.appendChild(元素)，里面的元素是已经存在的，就相当于把这个元素剪切后放在这个父元素里面，如果之前不存在，那就是插入的功能
        // ul.appendChild(li)
       // 父元素.append(li,img,div)  可以同时插入多个标签
         ul.append(li,img,div)
        //插入到父元素某个子元素的前面
           ul.insertBefore(li,li1[2])

    </script>

案例-菜单选择

<body>
    <ul class="one">
        <li>龙虾</li>
        <li>鲍鱼</li>
        <li>鱿鱼</li>
        <li>皮皮虾</li>
    </ul>
    <ul class="two">
       
    </ul>
    <script>

        // 点击那个li,li就要被剪切到隔壁的ul
        let li = document.querySelectorAll('li')
        let two = document.querySelector('.two')
        let one = document.querySelector('.one')


        // 1.获取被点击元素的父元素
        // 2.让这个父元素跟另外一个作比较，如果不相等，那就把点击的li.放到另外一个父元素里面
        // 3.声明一个需要添加的父元素
        // 4.巧妙利用变量
        let father
        
        for (let index = 0; index < li.length; index++) {
              
            li[index].addEventListener('click',function(){
            
                this.parentNode === two? father = one :father = two

              father.appendChild(this)
            })
        }

    </script>
</body>

克隆节点

<body>

    <div class="box">
        <button>我是后代</button>
    </div>
    <script>
        let box = document.querySelector('.box')
        let box1 = box.cloneNode() //只复制当前节点,浅拷贝
        let box2 = box.cloneNode(true) //会连后代节点一起复制，深拷贝
        //使用环境，之前走马灯案例时，需要额外添加几张照片去填补缝隙，此时就可以使用克隆
        document.body.appendChild(box1) 
        document.body.appendChild(box2) 
       
    </script>

删除节点

<body>
 <button>点击删除</button>
 <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
 </ul>
    
    <script>
      
       let button =document.querySelector('button')
       let ul =document.querySelector('ul')
       button.addEventListener('click',function(){
           let li = document.querySelector('li:nth-child(1)') //放在里面，就会点击点击都删除，如果放在外面，就只能删除一个
           ul.removeChild(li)
           //    删除自己
        ul.remove()
       })
    </script>

时间

获取时间对象

getFullYear()获得年份获取四位年份
getMonth()获得月份取值为 0 ~ 11
getDate()获取月份中的每一天不同月份取值也不相同
getDay()获取星期取值为 0 ~ 6
getHours()获取小时取值为 0 ~ 23
getMinutes()获取分钟取值为 0 ~ 59
getSeconds()获取秒取值为 0 ~ 59

实例化

获得当前时间

1649314430156.png

获得指定时间

1649314445686.png

时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

<body>
    <script>
        //三种方式获取时间戳

        //方法1 可以返回指定时间戳
        let time = new Date()
        document.write(time.getDay())

        //方法2  可以返回指定时间戳
        document.write(+new Date().getMonth())

        //方法3
        document.write(Date.now())
    </script>
avatar
文章
阅读
粉丝