焦点事件、排他思想、开关思想：全选与单选、attribute

输入框焦点事件

(1) onfocus:成为焦点, 点击输入框的时候，出现闪烁光标，此时可以输入内容
(2) onblur :失去焦点, 点击页面空白区域，光标消失。此时不可以输入内容

小米官网
成为焦点： (1)显示ul (2)自身边框改变 （通过新增search类名）
失去焦点： (1)隐藏ul (2)自身边框改变 （通过移除search类名）

this关键字 ： 环境对象

常用于函数中，代表当前函数的所属环境。
说人话： 相当于中文的 ‘我’ 字, 谁说的这个字，就代表谁
js中this规则： 谁调用这个函数，this就指向谁
事件处理函数中this一般指向事件源自身

图片切换类型功能需要使用全局变量存储下标index
因为下标是数字不是变量,不能自增,自增等号左边必须是变量

排他思想

1.排他思想应用场景 ： 多个元素只能选中一个元素的场景
2.排他思想实现思路：两种思路
循环排他(万能的) :(1)循环干掉所有兄弟 (2)复活自己
语法: 元素.style.样式名=样式值
类名排他(一定要有类名) :(1)使用类选择器干掉选中的兄弟 (2)复活自己
语法: 元素.classList.add(类名)

总结:元素有类名就用类名排他,没有类名就用循环排他.切记两者不可混用
类名排他:通过classList类名修改样式
循环排他:通过style修改样式

//循环排他
let buttonList = document.querySelectorAll('button')
for (let i = 0; i < buttonList.length; i++) {
  buttonList[i].onclick = function () {
     for (let j = 0; j < buttonList.length; j++) {
      buttonList[j].style.backgroundColor = ''
     }
     this.style.backgroundColor = 'pink'
  }
}

//类名排他
let buttonList = document.querySelectorAll('button')
for (let i = 0; i < buttonList.length; i++) {
    buttonList[i].onclick = function () {
      document.querySelector('.pink').classList.remove('pink')
      this.classList.add('pink')
    }
}

开关思想

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

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