classList对象/事件/字符串API

简单轮播图

<style>
    body .box {
        margin: auto;
        width: 600px;
    }
    body .box img {
        border-radius: 10px;
        width: 600px;
    }
</style>
<div class="box">
    <img src="images/1.jpeg" alt="" />
</div>
<script>
    let i = 1;
    setInterval(() => {
    document.querySelector("img").src = `images/${i}.jpeg`;
    console.log("第" + i + "张图片");
    i += 1;
    if (i > 6) {
        i = 1;
    }
    }, 2000);
</script>

1. classList 对象

css 动态操作	描述
style	给html元素添加行内样式
getComputedStyle	计算属性，只读不可写，可以用style行内样式来更新样式
classList	操作 class 属性（class 选择器）

classList 对象常用 API

API	语法	描述
add()	ele.classList.add('className')	添加
contains()	ele.classList.contains('className')	判断，返回 true 或 false，true：表示当前元素有className这个样式
replace()	ele.classList.replace('oldClassName','newClassName')	替换
remove()	ele.classList.remove('className')	删除
toggle()	ele.classList.toggle('className')	切换，判断当前样式在元素上是否存在，若有，则删除，若没有，则添加当前样式

2.事件

事件三要素：
1.事件名称: 字符串
2.事件主体: html 元素 对象
3.事件方法: 函数 监听器

2.1 事件添加/取消

1.直接在元素上添加/取消

<button>元素对象</button>
<script>
  const btn = document.querySelector("button");
  // 事件添加
  btn.onclick = function () {};
  // 事件取消
  btn.onclick = null;
</script>

2.使用 addEventListener()添加/removeEventListener()取消
addEventListener()/removeEventListener()有三个参数：
参数 1：事件的名称
参数 2：执行事件的回调函数（函数名），添加时可以使用回调函数操作
参数 3：可选参数，事件冒泡时使用，默然 false

<button>元素对象</button>
<script>
  const btn = document.querySelector("button");
  show = () => {};
  // 事件添加
  btn.addEventListener("click", show, false);
  // 事件取消
  btn.removeEventListener("click", show, false);
</script>

2.2 事件派发

1.创建一个自定义事件
2.将这个事件自动派发到指定元素并触发它 一般用定时器来触发

<button>事件派发</button>
<script>
  const btn = document.querySelector("button");
  let i = 0;
  show = () => {
    i += 1;
    console.log("事件派发" + i);
  };
  // 事件添加
  btn.addEventListener("click", show, false);
  // 1.创建一个自定义事件
  const myEvent = new Event("click");
  // 2.将这个事件自动派发到指定元素并触发它 一般用定时器来触发
  // 定时器
  // 2.1.setTimeout(): 一次性
  //   setTimeout(function () {
  //     btn.dispatchEvent(myEvent);
  //   }, 2000);
  // 2.2 setInterval(): 间歇式
  let timer = setInterval(function () {
    btn.dispatchEvent(myEvent);
    //关闭定时器
    if (i >= 5) {
      console.log("停止事件派发");
      clearInterval(timer);
    }
  }, 1000);
</script>

2.3 事件冒泡

事件冒泡必要条件：有父子关系且同名
1.当前元素的事件会向上（向父级）进行传递
2.当前元素的事件名称与父级元素事件名称相同

<style>
    .item {
    list-style: none;
    cursor: pointer;
    text-align: center;
    }
    .item:hover {
    background-color: lightpink;
    color: white;
    }
</style>
<ul style="width: 100px">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>
<script>
    const lis = document.querySelectorAll("ul li");
    // 使用classList添加样式
    lis.forEach((item) => item.classList.add("item"));
    // 事件冒泡
    lis.forEach(
    (item) =>
        (item.onclick = (item) => {
        // 防止冒泡
        //event.stopPropagation();
        console.log("当前元素：", event.currentTarget);
        })
    );
    // li的父级ul
    document.querySelector("ul").onclick = () 
        => console.log("li的父级ul: ", event.currentTarget);
    // ul的父级body
    document.body.addEventListener(
    "click",
    () => console.log("ul的父级body: ", event.currentTarget),
    false
    );
</script>

2.4 事件委托/代理

事件委托/代理：将子元素上的事件委托/代理父级元素触发
target 属性与 currentTarget 属性:
发生事件委托/代理时: target事件目标，返回的是事件触发者（子元素）currentTarget事件主体，返回的是事件绑定者（委托/代理的父级元素）
未发生事件委托/代理，target 和 currentTarget 返回值相等

<ul style="width: 100px">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>
<script>
  const lis = document.querySelectorAll("ul li");
  // 使用classList添加样式
  lis.forEach((item) => item.classList.add("item"));
  // 事件委托 直接个ul添加事件
  document.querySelector("ul").onclick = () => {
    console.log(event.target, event.target.innerText);
    console.log(event.currentTarget);
  };
</script>

2.5 表单事件

事件	语描述
submit	提交事件
focus	获取焦点
blur	失去焦点
chang	值改变,且失去焦点时
input	值一旦改变就触发, 不等失去焦点

取消 form 表单元素默认提交行为有 3 种：
1.修改button的类型。表单内的button的默认类型是submit,修改其类型即可禁止提交，type='button'
2.给form元素的提交事件返回 false 即可，onsubmit="return false"
3.给提交按钮绑定一个事件，并在事件内禁用提交按钮的默认行为，event.preventDefault()

4. 字符串 API

//   声明字符串
let str = "Hello 你好！ Welcome to 中文网。";
console.log("获取字符串长度:  " + str.length);
//   字符串'o'在str中首次出现的位置（索引）
console.log("在字符串中查找字符串(正序): " + str.indexOf("o"));
//   若没有 返回-1
console.log("没有找到: " + str.indexOf("k"));
//   从后面开始找 返回的索引还是正数
console.log("在字符串中查找字符串(反序): " + str.lastIndexOf("o"));
//   字符串大小写转换
console.log("转小写 " + str.toLowerCase());
console.log("转大写: " + str.toUpperCase());
//   字符串转为数组 按空格符号拆分字符串后分别封装在数组中
console.log("转数组：", str.split(" "));