web API (02)

事件

事件监听

什么是事件
- 事件是在编程时系统内发生的动作或者发生的事情
- 比如用户在网页上单击一个按钮
事件监听
- 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称之为注册事件

语法

元素. addEventListener（'事件'，要执行的函数）

事件监听三要素：
1. 事件源：那个dom元素被事件触发了，要获取dom元素
2. 事件：触发方法，比如鼠标单击click ，鼠标经过 mouseover等
3. 事件调用的函数：要做什么事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button class="btn">发福利啦</button>
    <button class="btns">它走了</button>
    <div></div>
    <script>

        // click  鼠标单击
        let btn = document.querySelector('.btn')
        btn.addEventListener('click',function () {
            console.log('小哥快来呀');
        })
        let btns = document.querySelector('.btns')
        btns.addEventListener('click',function(){
            console.log('小哥别跑呀');
        })

        //mouse over  鼠标移入 div的区域内
        let div = document.querySelector('div')
        div.addEventListener('mouseover',function(){
            console.log('欢迎大哥回家');
        })

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

案例

掉头发案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>1000</button>
    <script>
        let i =1000
        let bnt = document.querySelector('button')
        bnt.addEventListener('click',function () {
            i--
            bnt.innerText= `${i}`
        })
    </script>
</body>
</html>

点击关闭案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        let div = document.querySelector('div')
        div.addEventListener('click',function(){
            div.style.display = 'none'
        })
    </script>
</body>
</html>

随机点名案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1></h1>
    <button class="bnt">ddd </button>
    <button class="bnt1">dddsad</button>
    <script>
        let xxx=['刘备','张飞','关羽','曹操','宋江']
        let h1 = document.querySelector('h1')
        let bnt = document.querySelector('.bnt')
        let bnt1 = document.querySelector('.bnt1')
        let num
         

        bnt.addEventListener('click',function () {
            num = setInterval(function () {
                let x = Math.round(Math.random()*(xxx.length - 1))
                h1.innerText = xxx[x]
                bnt.disabled= true
            },-100)
           
        })
        bnt1.addEventListener('click',function () {
            
            clearInterval(num)
            bnt.disabled = false
           
        })
    </script>
</body>
</html>

商品全选案例

<!DOCTYPE html>

<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>01-全选商品</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      .allCheck {
        width: 80px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>
    <script>
      /* 
      1 给每一个单独的复选框绑定点击事件
      2 思考
        什么时候需要让全选按钮 选中
        每一个商品的都选中的时候  就让  全选按钮选中
        什么时候需要让 全选按钮 不选中
        只要一个商品没有选中

      3 实现
        1 单独的定义一个变量  选中的商品的数量  
          checkedNum = 0

        2 开始对商品做遍历
        3 判断每一个商品的选中状态
          如果 有商品选中了  让 checkedNum++ 
        4 循环结束后
          开始判断 checkNum  值  和 商品长度的关系
          1 两者相等 等于 全选！！！ 
          2 两者不相等 没有达到全选条件
      */

      // 获取商品的数组  复选框的数组
      let checkList = document.querySelectorAll(".ck");
      let checkAll = document.querySelector("#checkAll");

      for (let index = 0; index < checkList.length; index++) {
        checkList[index].addEventListener("click", function () {
          //判断 是否达到了全选条件
          let checked = isAllChecked();
          //设置全选按钮即可
          checkAll.checked = checked;
        });
      }
      //函数来判断
      function isAllChecked() {
        // 1 存放选中的商品数量
        let checkedNum = 0;
        // 2 商品数组做循环
        for (let index = 0; index < checkList.length; index++) {
          //3 判断每一商品的选中状态
          if (checkList[index].checked) {
            checkedNum++;
          }
        }
        //4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
        if (checkedNum === checkList.length) {
          // 全选
          console.log("全选");
          return true;
        } else {
          // 不全选
          console.log("不全选");
          return false;
        }
      }
    </script>
  </body>
</html>

事件类型

鼠标事件
1. click 鼠标点击
2. mouseenter 鼠标经过
3. mouseleave 鼠标离开
焦点事件
1. focus 获得焦点
2. blur 失去焦点
键盘事件
1. keydown 键盘按下触发
2. Keyup 键盘抬起触发
文本事件
1. 表单输入触发
2. input 用户输入事件

案例

小米搜索框

需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单

①：开始下拉菜单要进行隐藏

②：表单获得焦点 focus，则显示下拉菜单，并且文本框变色（添加类）

③：表单失去焦点，反向操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>09-小米搜索框</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
        display: none;
      }

      .mi {
        position: relative;
        width: 223px;
        margin: 100px auto;
      }

      .mi input {
        width: 223px;
        height: 48px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 48px;
        border: 1px solid #e0e0e0;
        outline: none;
      }

      .mi .search {
        border: 1px solid #ff6700;
      }

      .result-list {
        position: absolute;
        left: 0;
        top: 48px;
        width: 223px;
        border: 1px solid #ff6700;
        border-top: 0;
        background: #fff;
      }

      .result-list a {
        display: block;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
      }

      .result-list a:hover {
        background-color: #eee;
      }
    </style>
  </head>

  <body>
    <div class="mi">
      <input type="search" placeholder="小米笔记本" />
      <ul class="result-list">
        <li><a href="#">全部商品</a></li>
        <li><a href="#">小米11</a></li>
        <li><a href="#">小米10S</a></li>
        <li><a href="#">小米笔记本</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">黑鲨4</a></li>
        <li><a href="#">空调</a></li>
      </ul>
    </div>

    <script>
       
        let num = document.querySelector('ul')
        let inpt = document.querySelector('input')
		// 设置事件  
        inpt.addEventListener('focus',function(){
            // 鼠标移入的时候显示
            num.style.display = 'block'
        })
        inpt.addEventListener('blur',function() {
            // 鼠标移出的时候不显示
            num.style.display = 'none'
        })
    </script>
  </body>
</html>

微博案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="11-微博案例.css" />
  </head>

  <body>
    <div class="w">
      <div class="controls">
        <img src="images/tip.png" alt="" /><br />
        <textarea
          placeholder="说点什么吧..."
          id="area"
          cols="30"
          rows="10"
          maxlength="200"
        ></textarea>
        <div>
          <span class="useCount">0</span>
          <span>/</span>
          <span>200</span>
          <button id="send">发布</button>
        </div>
      </div>
      <div class="contentList">
        <ul></ul>
      </div>
    </div>
    <script>
    let area = document.querySelector('#area')
    let useCount = document.querySelector('.useCount')
	// 获取事件
    area.addEventListener('input',function(){
        
        useCount.innerText = area.value.length
    })
    </script>
  </body>
</html>

购物车加减操作案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: relative;
        margin: 100px auto;
      }
      span{
          display: flex;
          justify-content: center;
          line-height: 200px;
          font-size: 40px;
      }
      button{
          background-color: aqua;
          border: none;
          border-radius: 5px;
          width: 70px;
          height: 100px;
      }
      .xxx{
          position: absolute;
          top: 0;
          right: -70px;
      }
      .x11{
          position: absolute;
          right: -70px;
          bottom: 0;
      }


    </style>
  </head>
  <body>
      
    <div>
        <span>1</span>
      <button class="xxx">加</button>
      <button disabled class="x11">减</button>
    </div>
    <script>

        // 设置变量
        let span  = document.querySelector('span')
        let xxx = document.querySelector('.xxx')
        let x11 = document.querySelector('.x11')
        // 按钮设置个点击事件
        xxx.addEventListener('click',function () {
            // 点击一下 span标签的数字增加
            span.innerText++
            console.log('_');
            // 数字加的时候让disabled = false
            x11.disabled = false
        })
        // 按钮也设置一个点击事件
        x11.addEventListener('click',function(){
            // 点击一下  自身就减一位数
            span.innerText--
            console.log('+')
            // 如果 span 标签等于1的时候下面就点不下去了
            if (span.innerText == 1) {
                x11.disabled = true
            }
        })
    </script>
  </body>
</html>

环境对象

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

作用：弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this指代的对象也不同
- [谁调用，this 就是谁 ] 是判断this 指向的粗略规则
- 直接调用函数，其实相当于是window 函数，所以this指代window

排他思想

当元素为A状态其他元素为B状态
使用
1. 干掉所有人
  - 使用for循环
2. 复合他自己
  - 通过this或者下标找到自己或者对应的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul{
            margin: 100px auto;
            width:500px;
            height: 100px;
            
            list-style: none;
            display: flex;
            
        }
        li{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>恐怖片</li>
        <li>科幻片</li>
        <li>动画片</li>
        <li>国产片</li>
        <li>直播间</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        let li = document.querySelectorAll('li')
        for (let index = 0; index < li.length; index++) {
            // 对所有的li标签  开始绑定点击事件
            li[index].addEventListener('click',function(){
                //设置所有的li标签  背景颜色为白色
                for (let index1 = 0; index1 < li.length; index1++) {
                    //给他们全设成一样的
                    li[index1].style.backgroundColor = 'white'  
                }
                // 单独提出了给他设置
                this.style.backgroundColor = 'red' 
            })
        }
    </script>
</body>
</html>

tab栏案例

<script>
      /* 
      1 给标题标签 给他们绑定点击事件
      2 事件触发 开始使用排他思想
        1 获取所有的要设置标题样式的标签  遍历他们，移除掉 上边框 红色效果
        2 通过 this  给自己单独添加上 上边框红色的效果 

        3 获取到所有的main标签（决定图片显示）  遍历他们 移除掉 一个class active
        4 再获取到要设置的 main标签 让它 添加上一个class active

      
       */

      let liList = document.querySelectorAll('li');
      let mainList = document.querySelectorAll('.main');

      for (let index = 0; index < liList.length; index++) {
        liList[index].addEventListener('click', function () {
          // 遍历li标签 移除他们身上的类 active
          for (let j = 0; j < liList.length; j++) {
            liList[j].classList.remove('active');
          }
          // 单独对我自己 添加一个类
          this.classList.add('active'); // this = li标签 

          // 处理图片显示部分

          // 先遍历所有的main标签 让他们移除掉 active
          for (let j = 0; j < mainList.length; j++) {
            mainList[j].classList.remove('active');
          }

          // 设置给对应的标签 添加上 active
          // 单独对我自己 添加一个类
          // mainList[index] // index 就是和被点击li标签的下标 
          mainList[index].classList.add('active');
        });
      }
    </script>

节点操作

DOM节点

DOM节点
- DOM树里每一个内容都称之为节点
节点类型
- 元素节点
  1. 所有的标签比如body 、div 等
  2. HTML 是根节点
- 属性节点
  1. 所有的属性比如href
- 文本节点
  - 所有的文本

查找节点

父节点查找
1. parentNode 属性
2. 返回最近一级的父节点找不到返回为null

<body>
    <div>
      <button>目标元素</button>
    </div>
    <script>
      let button = document.querySelector('button');

      // 先获取button 目标元素
      console.dir(button);

      console.dir(button.parentNode); // 获取到父元素  div标签
      // 修改一下父元素的背景颜色
      // console.dir(button.parentNode); // 获取到父元素  div标签
      // button.parentNode.style.backgroundColor = 'red';

      button.parentNode.style.display = 'none';
    </script>
  </body>

案例

关闭二维码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: yellow;
            position: relative;
        }
        .imgg{
            position: absolute;
            top: 0;
            left: 0;
        }
        
    </style>
</head>
<body>
    <div>
        <img src="./456229d20d0fcc4a22cedd9bf0fe346.png" alt="" class="imgggg">
        <img src="./acc92308c8e9d7a9a576302b17903a2.png" alt=""  class="imgg">
    </div>
    <script>
        // 获取类
        let imgg = document.querySelector('.imgg')
        // 添加点击事件
        imgg.addEventListener('click',function () {
            // 找到自己父元素  然后隐藏起来
            imgg.parentNode.style.display = 'none'
        })
    </script>
</body>
</html>

子节点查找

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

案例

ul 标签全部隐藏起来

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>11-children.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul {
        background-color: aqua;
        padding: 20px;
      }
      li {
        height: 30px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>a1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ul>
      <li>b1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ul>
      <li>c1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      /* 
      1 获取到所有的ul标签 数组
      2 遍历ul数组 挨个绑定点击事件
      3 点击事件触发了
        1 this = 当前被点击的ul标签 
        2 this.children 获取到 所有的ul的子元素 数组
        3 遍历 children 获取到中的每一个li标签
        4 li.style.display="none"
      
       */
      // let ul=document.querySelector("ul");

      // 获取ul标签下的 子节点
      // console.log(ul.children);

      // console.log(ul.childNodes);// 什么都那

      // 1 获取到所有的ul标签 数组
      let uls = document.querySelectorAll('ul');

      // 遍历ul数组 挨个绑定点击事件
      for (let index = 0; index < uls.length; index++) {
        // 3 点击事件触发了
        uls[index].addEventListener('click', function () {
          // 3.1 3.2 3.3  对被点击的ul的children 做遍历
          for (let j = 0; j < this.children.length; j++) {

            // this.children[j]  表示 每一个li标签
            this.children[j].style.display="none";

          }
        });
      }
    </script>
  </body>
</html>

web API （02）

web API (02)

事件

事件监听

案例

事件类型

案例

环境对象

排他思想

节点操作

DOM节点

查找节点

案例

子节点查找

案例