今天是薅秃头发的一天，满满的都是案例

补充知识

05-attribute语法学习 /* 自定义属性 : HTML标签本身没有的属性 * 作用: 存储数据

  (1)设置属性 :  元素.setAttribute('属性名',属性值)
  (2)获取属性 :  元素.getAttribute('属性名')
    有返回值
  (3)删除属性 :  元素.removeAttribute('属性名')
  */

  let box = document.querySelector('#box')

  //(1)设置属性 :  元素.setAttribute('属性名',属性值)
  box.setAttribute('aaa','222')//有则修改
  box.setAttribute('bbb','333')//无则新增

  //(2)获取属性 :  元素.getAttribute('属性名')
  let aaa = box.getAttribute('aaa')
  console.log(aaa)

  //(3)删除属性 : 元素.removeAttribute('属性名')
  box.removeAttribute('bbb')
  
  

隔行变色案例 样式

源代码

      <li>我是班长1</li>
      <li>我是班长2</li>
      <li>我是班长3</li>
      <li>我是班长4</li>
      <li>我是班长5</li>
      <li>我是班长6</li>
      <li>我是班长7</li>
      <li>我是班长8</li>
      <li>我是班长9</li>
      <li>我是班长10</li>
    </ul>

js代码

        2.鼠标移入li元素： 颜色变红
        3.鼠标移出li元素： 颜色恢复原先的颜色
      */

      //1.获取所有li元素
      let liList = document.querySelectorAll('li')

      //2.遍历数组
      for(let i = 0;i<liList.length;i++){
        //2.1 设置颜色
        liList[i].style.backgroundColor = (i % 2 == 0 ? 'green' : 'yellow')
        //2.2 鼠标移入
        liList[i].onmouseenter = function(){
          //3.1 先存储当前的颜色
          this.setAttribute('aaa', this.style.backgroundColor )
          //3.2 修改颜色
          this.style.backgroundColor = 'red'
        }
        //2.3 鼠标移出
        liList[i].onmouseleave = function(){
          //3.恢复原来的颜色
          this.style.backgroundColor = this.getAttribute('aaa')
        }
      }

一、小米搜索框案例

源代码如下

      <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>

样式

        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: 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;
        transition: all 0.3s;
      }

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

      .result-list {
        display: none;
        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;
      }

js代码

      /* 
      1.介绍键盘事件(一般给表单元素注册)
        oninput : 键盘输入
        onfocus : 成为焦点.    鼠标点击表单,出现光标，此时可以在表单输入文本
        onblur  : 失去焦点.    鼠标点击空白区域,光标小时，此时 不可以在表单输入文本
      
      2.小米搜索框思路
        2.1 输入框成为焦点:  (1)输入框添加类名  search   (2)显示ul
        2.2 输入框失去焦点:  (1)输入框移除类名  search   (2)隐藏ul
      */

      //1.获取元素
      let input = document.querySelector("input")
      let ul = document.querySelector(".result-list")

      //2.注册事件

      //2.1 表单成为焦点
      input.onfocus = function() {
        console.log("鼠标点击表单，出现闪烁光标。此时可以键盘输入")
        //(1)输入框添加类名  search  
        input.classList.add('search') 
        //(2)显示ul
        ul.style.display = 'block'
      }
      //2.2 表单失去焦点
      input.onblur = function() {
        console.log("鼠标点击空白区域，闪烁光标小时。此时不可以键盘输入")
        //(1)输入框移除类名  search  
        input.classList.remove('search') 
        //(2)隐藏ul
        ul.style.display = 'none'
      }
    </script>

二、图片切换案例

源代码

  <img alt="" src="./images/01.jpg" />
  <br />
  <input id="prev" type="button" value="上一张" />
  <input id="next" type="button" value="下一张" />

css样式

      background-color: skyblue;
      color: white;
    }

    img {
      width: 200px;
      height: 200px;
      box-shadow: 0 0 20px hotpink;
    }

js代码

    /* 本案例需要掌握学习目标
  1.能够实现 点击按钮：切换图片
  2.能够实现 图片无限切换效果
  */

    /*思路分析 
  0. 图片切换类功能一定要声明  全局变量index  存储下标
      (1)为什么要声明变量： 因为下一页需要让下标自增, 而字面量0是无法自增 0++(程序报错),
      =左边只能是变量
      (2)为什么要是全局变量：因为下一页 和 上一页 事件处理函数 是两个不同的局部作用域。 要想变量在任何地方都能使用, 就必须要是全局变量

  1.点击下一张 :  
    
  2.点击上一张 
   
  */

    //多个数据 使用数组存储
    let imgArr = [
      "./images/01.jpg",
      "./images/02.jpg",
      "./images/03.jpg",
      "./images/04.jpg",
      "./images/05.jpg",
    ]

    //1.声明'全局变量'记录下标
    let index = 0
    //获取元素
    let img = document.querySelector("img")
    let prev = document.querySelector("#prev")
    let next = document.querySelector("#next")

    //2.1 下一页
    next.onclick = function () {
      //3.1 无限切换思路  (1)如果index是最后一张下标 == 数组长度-1 ,则 index = 0  (2)否则index++
      // if( index == imgArr.length-1 ){
      //   index = 0
      // }else{
      //   index++
      // }
      //三元表达式    表达式?代码1:代码2
      index == imgArr.length-1 ? index = 0 : index++
      //3.2 修改img标签的src
      img.src = imgArr[index]
    }

    //2.2 上一页
    prev.onclick = function () {
      //3.1 下标自减 (1)如果index是第一张 == 0,则index=数组长度-1 (2)否则index--
      index == 0 ? index = imgArr.length-1 : index--
      //3.2 修改img标签的src
      img.src = imgArr[index]
    }
  </script>

三、排他思想
1、点击按钮

样式图片

源代码

  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>

js代码

    1.排他思想场景 ： 多个元素,只能选中一个(多选一)
    2.排他思想流程 ：(1)干掉所有兄弟  (2)复活自己
    */

    //1.获取页面元素
    let buttonList = document.querySelectorAll('button')
    //2.给每一个按钮注册点击事件
    for (let i = 0; i < buttonList.length; i++) {//i = 0 1 2 3 4
      buttonList[i].onclick = function () {
        /* 
        i : 你点击的按钮下标
        buttonList[i] : 你点击的按钮
        this === buttonList[i]: 你点击的按钮
        */
        console.log(i, buttonList[i], this)

        //排他思想 两个步骤
        //(1)干掉所有兄弟
        for (let j = 0; j < buttonList.length; j++) {
          buttonList[j].style.backgroundColor = ''
        }
        //(2)复活自己
        this.style.backgroundColor = 'pink'
      }
    }

2、宫格突出显示

样式

源代码

      <ul>
        <li>
          <a href="#"><img src="images/01.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/02.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/03.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/04.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/05.jpg" alt=""/></a>
        </li>
        <li>
          <a href="#"><img src="images/06.jpg" alt=""/></a>
        </li>
      </ul>
    </div>

css代码

        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      body {
        background: #000;
      }

      .wrap {
        margin: 100px auto 0;
        width: 630px;
        height: 394px;
        padding: 5px;
        background: #000;
        overflow: hidden;
        border: 1px solid #fff;
      }

      .wrap li {
        float: left;
        padding: 5px;
      }

      .wrap img {
        display: block;
        border: 0;
      }

js代码

        (1)干掉兄弟: opacity:0.5   (2)复活自己: opacity:1
      */

      //1.获取
      let liList = document.querySelectorAll('li')
      //2.给每一个li元素注册鼠标移入事件
      for(let i = 0;i<liList.length;i++){
        liList[i].onmouseenter = function(){
          //3.排他
          //(1)干掉兄弟
          for(let j = 0;j<liList.length;j++){
            liList[j].style.opacity = 0.5
          }
          //(2)复活自己  this
          this.style.opacity = 1
        }
      }

四、开关思想 两种不同的使用场景 1.排他思想 : 多个元素，只能选中一个（多选一）
循环排他 : (1)循环干掉所有兄弟 (2)复活自己
语法: 元素.style.样式名 = 样式值
类名排他: (1)类选择器干掉上一次选中兄弟 (2)复活自己
语法: 元素.classList.add(类名)

2.开关思想 : 判断数组中 是否所有元素都满足条件
(1)声明布尔类型开关变量 let bol = true
(2)遍历数组,检测开关变量是否成立 : 找false
(3)获取开关变量的值

案例

源代码

    <tr>
      <th><input type="checkbox" id="checkAll" />全选/全不选</th>
      <th>菜名</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="check" />
      </td>
      <td>红烧肉</td>
      <td>隆江猪脚饭</td>
      <td>￥200</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="check" />
      </td>
      <td>香酥排骨</td>
      <td>隆江猪脚饭</td>
      <td>￥998</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="check" />
      </td>
      <td>北京烤鸭</td>
      <td>隆江猪脚饭</td>
      <td>￥88</td>
    </tr>
  </table>

css样式

      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      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;
    }

js代码

      1.点击每一个单选框: 开关思想 判断数组每一个元素是否选中  ( checked值为true )

      2.点击全选框 : 设置每一个单选框的checked值与 全选框 一致
        一致： 全选为true,单选框也要为true.  全选为false,单选框为false
    */

    //1.获取元素
    let checkList = document.querySelectorAll('.check')//单选框数组
    let checkAll = document.querySelector('#checkAll')//全选框

    //2.点击每一个单选框
    for (let i = 0; i < checkList.length; i++) {
      checkList[i].onclick = function () {
        //3.开关思想 判断数组每一个元素是否选中  ( checked值为true )
        //(1)声明开关变量,默认值为true
        let bol = true
        //(2)遍历数组检测开关变量:找false
        for (let j = 0; j < checkList.length; j++) {
          if ( !checkList[j].checked ) {
            bol = false
            break
          }
        }
        //(3)获取开关变量结果
        // console.log(bol)
        checkAll.checked = bol
        // if( bol ){
        //   checkAll.checked = true
        // }else{
        //   checkAll.checked = false
        // }
      }
    }

    //2.2 点击全选框
    checkAll.onclick = function(){
      //this : 全选框checkAll
      console.log( this.checked )
      //3. 设置每一个单选框的checked值与 全选框一致
      for(let i = 0;i<checkList.length;i++){
        checkList[i].checked = this.checked
      } 
    }