表单事件

blur事件：失去焦点就会触发
change事件：失去焦点的时候判断内容是否发生改变：如果内容改变了就触发。没有改变就不触发

input事件：类似于键盘按下事件。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>表单事件</title>
</head>
<body>
三种表单事件对比：<input type="text" id="ipt">
</body>
</html>
<script>
 /*
 * blur：失去焦点就会触发
 * change: 失去焦点的时候判断内容是否发生改变：如果内容改变了就触发。没有改变就不触发
 * input: 类似于键盘按下事件。
 * */
 let ipt = document.querySelector('#ipt');
 ipt.addEventListener('input',function () {
     console.log('触发了');
 })
</script>

表单事件.mp4

delete运算符

delete：删除对象属性

 /*
 * delete运算符：删除对象属性
 * */
 let obj = {
     age: 30,
     sex: '男'
 }
 console.log(obj);
 delete obj.age;
 console.log(obj);

delete.mp4

函数参数扩展

同名形参问题

剩余参数

/*
 * 函数参数问题：
 * 同名参数：会有参数传递的过程中，后面的值覆盖前面的值的问题。
 * 剩余参数 ...参数名： 使用...的方式解构出剩余参数的数据。  功能比arguments更灵活
 * */
 function testArgums(...ccc) {
     // arguments:参数对象 是一个伪数组
     // 如果参数直接给了一个剩余参数格式。那么其实跟arguments 使用的时候就一样了。
     console.log(ccc.length);
 }
 testArgums(10, 20, 30, 40, 50,60);

同名参数与剩余参数.mp4

字符串解析变量

/*
 * 字符串：
 *   单引号：不能解析变量
 *   双引号：不能解析变量
 *   反引号：可以解析变量,配合${}
 * */
 let age = 30;
 let str1 = '马老师哪一年都说自己'+age+'岁了';
 console.log(str1);
 let str2 = "马老师说自己"+age+"岁了";
 console.log(str2);
 console.log('----------------');
 let str3 = `马老师的年龄是${age}岁了`;
 console.log(str3);

反引号字符串解析变量.mp4

手风琴案例

148-手风琴特效.gif

案例分析

用5个宽度240px 的 li组成。鼠标经过时修改当前的尺寸为800px。那么剩下的4个li都变100px
当前尺寸由大变小其他尺寸由小变大（排他思想）这个过程，不是瞬发而是缓慢。考虑加CSS过渡。否则用js实现过渡效果太费劲了。
鼠标离开，所有li尺寸恢复为240px

1.jpg 2.jpg 3.jpg 4.jpg 5.jpg

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴</title>
  <style>
    ul {
      list-style: none;
    }
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 1200px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }
    div li {
      width: 240px;
      height: 400px;
      float: left;
      /* 尺寸变化特效由CSS来完成。 */
      transition: all 500ms;
    }
    div ul {
      width: 1200px;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/5.jpg" alt="">
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
  // 获取元素
  let box = document.querySelectorAll('li');// lis = [li, li, li, li, li]
  // 分析：
  // 1、鼠标进入显示图片，
  // 鼠标进入li，让当前li变成800，其他的li变成100
  for (let i = 0; i < box.length; i++) {
    box[i].addEventListener('mouseenter', function () {
      for (let j = 0; j < box.length; j++) {// 事件触发执行，为了让所有li变成240宽的
        box[j].style.width = '100px';
      }
      this.style.width = '800px'
    })
    box[i].addEventListener('mouseleave', function () {
      // 让所有的li变成240
      for (let j = 0; j < box.length; j++) {// 事件触发执行，为了让所有li变成240宽的
        box[j].style.width = '240px';
      }
    })
  }
</script>
</html>