JavaScript入门学（Web APIs）

1.变量声明

在这里插入图片描述

2 DOM介绍

2.1 什么是DOM

在这里插入图片描述

2.2 DOM树

在这里插入图片描述

2.3 DOM对象（重要）

在这里插入图片描述

3.DOM（文档对象模型）-获取元素

在这里插入图片描述

3.1 获取匹配的第一个元素

在这里插入图片描述

<!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>获取DOM对象</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="box">123</div>
<p id="nav">abc</p>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    //1.获取匹配的第一个类选择器
    const box = document.querySelector(`div`)  //标签名
    const box1 = document.querySelector(`.box`)  //类选择器
    console.log(box)
    console.log(box1)
    //2.获取匹配的第一个id选择器
    const nav=document.querySelector(`#nav`)
    console.log(nav)
    //3.获取匹配的第一个li选择器
    const li=document.querySelector(`ul li:first-child`)
    console.log(li)
</script>
</body>
</html>

3.2 获取匹配的多个元素

在这里插入图片描述

3.3 其他获取DOM元素的方法

在这里插入图片描述

4.操作元素内容

在这里插入图片描述

4.1 对象.innerText属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>操作元素内容（对象.innerText属性）</title>
</head>
<body>
<div class="box">文档内容</div>
<script>
    //1.获取元素
    const box=document.querySelector(`.box`)
    // console.log(box)
    //2.修改文字内容  对象.innerText 属性
    console.log(box.innerText)  //获取文字内容
    box.innerText=`div盒子`    //修改文字内容，不解析标签
</script>
</body>
</html>

4.2 对象.innerHTML属性(常用)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>操作元素内容（对象.innerHTML属性）</title>
</head>
<body>
<div class="nav">文档文字内容</div>
<script>
    const nav=document.querySelector(`.nav`)  //获取对象
    console.log(nav.innerHTML)  //获取文档内容
    nav.innerHTML=`修改文档内容`   //修改文档内容
</script>
</body>
</html>

在这里插入图片描述

5.修改元素常见的属性

5.1 修改图片元素常见属性

<!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>修改元素常见的属性</title>
</head>
<body>
<img src="../static/images/1.webp" alt="">
<script>
    //1.获取图片元素
    const img = document.querySelector(`img`)
    //2.修改图片对象的属性 ，对象.属性=值
    img.src = "../static/images/2.webp"
    img.title="刘德华"  //鼠标悬浮
</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>页面刷新，图片随机更换</title>
</head>
<body>
<img src="../static/images/1.webp" alt="">
<script>
    //取得N~M的随机整数
    function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
    }
    //1.获取对象
    const img = document.querySelector(`img`)
    //2.得到随机序号
    const seq=getRandom(1,6)
    //3.修改对象属性
    img.src = `../static/images/${seq}.webp`
    img.title="刘德华"
</script>
</body>
</html>

5.2 修改样式元素属性(style)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>修改样式元素属性</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    //1.获取元素
    const box=document.querySelector(`.box`)
    //2.修改样式属性   对象.style.样式属性=`值`，记得单位，之所以带着style，是因为该代码中的样式在style元素中
    box.style.width=`300px`
    //多组单词的采用小驼峰命名法
    box.style.backgroundColor=`blue`   //background-color需要使用小驼峰命名法
    box.style.border=`2px solid lightpink`
    box.style.borderTop=`2px solid red`   //上边框样式
</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>页面刷新，页面随机更换背景图片</title>
    <style>
        body {
            background: url("../static/images/desktop_1.jpg") no-repeat top center/cover;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    //随机生成N~M的整数
    function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
    }
    //1.获取对象,省略
    //2.获取随机整数
    const seq = getRandom(1, 10)
    //3.修改背景颜色
    document.body.style.backgroundImage = `url("../static/images/desktop_${seq}.jpg")`
</script>
</body>
</html>

5.3 修改样式元素属性(类名-className)

在这里插入图片描述

<!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>通过类名修改样式</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .nav {
            color: purple;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 100px auto;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="nav"></div>
<script>
    //1.获取元素
    const div = document.querySelector(`div`)
    //2.添加类名   class是个关键字，所以我们要使用className
    div.className = `nav box`  //注意：不用`.box`而是`box`，有多种类名的情况
</script>
</body>
</html>

5.4 修改样式元素属性（classList）（重点）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>通过classList修改样式</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .active{
            width: 300px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>
<body>
<div class="box active">文字</div>
<script>
    //通过classList来追加样式
    //1.获取对象
    const box=document.querySelector(`.box`)
    //2.修改样式
    //2.1 修改样式-追加类   add(``)类名不加点，并且是字符串
    // box.classList.add(`active`)
    //2.2 修改样式-删除类
    // box.classList.remove(`box`)
    //2.3 修改样式-切换类  有-删除，无-添加
    box.classList.toggle(`active`)
</script>
</body>
</html>

5.5 操作表单元素属性

在这里插入图片描述

<!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>修改表单属性</title>
</head>
<body>
<!--文本框-->
<!--<input type="text" value="计算机">  &lt;!&ndash;value文本框的默认值&ndash;&gt;-->
<hr>
<!--复选框-->
<input type="checkbox" name="" id="">
<!--当属性和值一样仅写一个即可-->
<!--<button disabled="disabled">点击</button>-->
<button disabled>点击</button>
<script>
    //   文本框
    //1.获取对象
    // const uname = document.querySelector(`input`)
    //2.操作对象属性  获取表单的值
    // console.log(uname.innerHTML)   //innerHTML获取不到表单内容
    // console.log(uname.value)
    //3.设置表单的值
    // uname.value=`计算机专业`    //修改文本框中的默认值
    // uname.type=`password`


    //    复选框
    //1.获取对象
    const checkbox = document.querySelector(`input`)
    console.log(checkbox.checked)  //false
    //2.操作对象属性
    checkbox.checked=true    //加引号时，有隐式转换

    //按钮隐藏
    //1.获取对象
    const button=document.querySelector(`button`)
    console.log(button.disabled)  //默认false，不禁用
</script>
</body>
</html>

5.6 自定义属性

在这里插入图片描述

<!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>自定义属性</title>
</head>
<body>
<!--自定义属性：data-属性名：属性名前缀必须加上，而属性名可以自定义命名-->
<div data-id="1" data-seq="自定义属性">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>

<script>
    //1.获取对象
    const div = document.querySelector(`div`)
    //2.操作对象属性
    console.log(div.dataset.id)   //data-id属性的值
    console.log(div.dataset.seq)   //data-seq属性的值
</script>
</body>
</html>

6.定时器-间歇函数

在这里插入图片描述

<!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>定时器-间歇函数</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .slider {
            width: 560px;
            height: 400px;
            overflow: hidden;
        }

        .slider-wrapper {
            width: 100%;
            height: 320px;
        }

        .slider-wrapper img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative;
        }

        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }

        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .slider-footer .toggle button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }

        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }

        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="slider">
    <div class="slider-wrapper">
        <img src="../static/images/slider01.jpg" alt=""/>
    </div>
    <div class="slider-footer">
        <p>对人类来说会不会太超前了？</p>
        <ul class="slider-indicator">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="toggle">
            <button class="prev">&lt;</button>
            <button class="next">&gt;</button>
        </div>
    </div>
</div>

<script>
    //setInterval(函数,间歇时间)
    // setInterval(function(){console.log(`1秒执行一次`)},1000)

    /*function fn() {
        console.log(`1秒执行一次`)
    }

    let n = setInterval(fn, 3000)
    console.log(n)
    // setInterval(fn,1000)   //注意：此处的函数名仅仅时函数名，而不加()
    // setInterval(`fn`,1000)   //注意：此处的函数名可以使用，但极为少见

    let m = setInterval(function () {
        console.log(11)
    }, 2000)
    console.log(m)
    clearInterval(m)   */  //关闭定时器，关闭变量名为m带的定时器

    // 1. 初始数据
    const sliderData = [
        { url: '../static/images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
        { url: '../static/images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
        { url: '../static/images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
        { url: '../static/images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
        { url: '../static/images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
        { url: '../static/images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
        { url: '../static/images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
        { url: '../static/images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    //1.获取元素
    const img = document.querySelector(`.slider-wrapper img`)
    const p = document.querySelector(`.slider-footer p`)
    let i = 0
    //2.开启定时器
    setInterval(function () {
        i++
        //无缝衔接位置
        if(i>=sliderData.length){
            i=0
        }
        //更换图片路径
        img.src = sliderData[i].url
        //把字写到p里面
        p.innerHTML = sliderData[i].title
        //小圆点
        //1.先删除之前的active
        document.querySelector(`.slider-indicator .active`).classList.remove(`active`)
        //只让当前li，添加active
        document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add(`active`)
    }, 1000)
</script>
</body>
</html>

7.事件监听（绑定）

7.1 事件监听

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>监听事件-关闭广告</title>
    <style>
        .box {
            position: relative;
            width: 1000px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
            font-size: 50px;
            line-height: 200px;
            font-weight: 700;
        }
        .box1{
            position: absolute;
            right: 20px;
            top: 10px;
            width: 20px;
            height: 20px;
            background-color: skyblue;
            text-align: center;
            line-height: 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box">
    心飞扬，透心凉
    <div class="box1">X</div>
</div>
<script>
    //1.事件源
    const box1=document.querySelector(`.box1`)
    //关闭的是大盒子
    const box=document.querySelector(`.box`)
    //2.事件类型（事件监听）
    box1.addEventListener(`click`,function(){
        box.style.display=`none`
    })
    //3.事件处理程序
</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>随机点名案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {

            width: 450px;
            height: 40px;
            color: red;

        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>
<body>
<h2>随机点名</h2>
<div class="box">
    <span>名字是：</span>
    <div class="qs">这里显示姓名</div>
</div>
<div class="btns">
    <button class="start">开始</button>
    <button class="end">结束</button>
</div>

<script>
    // 数据数组
    const arr = ['甄嬛', '沈眉庄', '安陵容', '乌拉那拉氏', '瑾汐',`流朱`]
    // 定时器的全局变量
    let timerId = 0
    // 随机号要全局变量
    let random = 0
    // 业务1.开始按钮模块
    const qs = document.querySelector('.qs')
    // 1.1 获取开始按钮对象
    const start = document.querySelector('.start')
    // 1.2 添加点击事件
    start.addEventListener('click', function () {
        timerId = setInterval(function () {
            // 随机数
            random = parseInt(Math.random() * arr.length)
            // console.log(arr[random])
            qs.innerHTML = arr[random]
        }, 35)
        // 如果数组里面只有一个值了，还需要抽取吗？  不需要  让两个按钮禁用就可以
        if (arr.length === 1) {
            // start.disabled = true
            // end.disabled = true
            start.disabled = end.disabled = true
        }
    })

    // 2. 关闭按钮模块
    const end = document.querySelector('.end')
    end.addEventListener('click', function () {
        clearInterval(timerId)
        // 结束了，可以删除掉当前抽取的那个数组元素
        arr.splice(random, 1)
        console.log(arr)
    })
</script>
</body>
</html>

7.2 事件监听版本

在这里插入图片描述

7.3 事件类型

在这里插入图片描述

7.3.1 鼠标事件

<!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>事件类型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div>

</div>
<script>
    const div = document.querySelector(`div`)
    //鼠标经过
    div.addEventListener(`mouseenter`,function (){
        // alert(`鼠标经过`)
        console.log(`鼠标经过`)
    })
    //鼠标离开
    div.addEventListener(`mouseleave`,function (){
        // alert(`鼠标离开`)
        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>事件类型-轮播图点击切换</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .slider {
            width: 560px;
            height: 400px;
            overflow: hidden;
        }

        .slider-wrapper {
            width: 100%;
            height: 320px;
        }

        .slider-wrapper img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative;
        }

        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }

        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }

        .slider-footer .toggle button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }

        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }

        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="slider">
    <div class="slider-wrapper">
        <img src="../static/images/slider01.jpg" alt=""/>
    </div>
    <div class="slider-footer">
        <p>对人类来说会不会太超前了？</p>
        <ul class="slider-indicator">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="toggle">
            <button class="prev">&lt;</button>
            <button class="next">&gt;</button>
        </div>
    </div>
</div>
<script>
    // 1. 初始数据
    const data = [
        {url: '../static/images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)'},
        {url: '../static/images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)'},
        {url: '../static/images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)'},
        {url: '../static/images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)'},
        {url: '../static/images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)'},
        {url: '../static/images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)'},
        {url: '../static/images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)'},
        {url: '../static/images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)'},
    ]
    // 获取元素
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const footer = document.querySelector('.slider-footer')
    // 1. 右按钮业务
    // 1.1 获取右侧按钮
    const next = document.querySelector('.next')
    let i = 0  // 信号量 控制播放图片张数
    // 1.2 注册点击事件

    next.addEventListener('click', function () {
        // console.log(11)
        i++
        // 1.6判断条件  如果大于8 就复原为 0
        // if (i >= 8) {
        //   i = 0
        // }
        i = i >= data.length ? 0 : i
        // 1.3 得到对应的对象
        // console.log(data[i])
        // 调用函数
        toggle()
    })

    // 2. 左侧按钮业务
    // 2.1 获取左侧按钮
    const prev = document.querySelector('.prev')
    // 1.2 注册点击事件
    prev.addEventListener('click', function () {
        i--
        // 判断条件  如果小于0  则爬到最后一张图片索引号是 7
        // if (i < 0) {
        //   i = 7
        // }
        i = i < 0 ? data.length - 1 : i
        // 1.3 得到对应的对象
        // console.log(data[i])
        // 调用函数
        toggle()
    })

    // 声明一个渲染的函数作为复用
    function toggle() {
        // 1.4 渲染对应的数据
        img.src = data[i].url
        p.innerHTML = data[i].title
        footer.style.backgroundColor = data[i].color
        // 1.5 更换小圆点    先移除原来的类名， 当前li再添加 这个 类名
        document.querySelector('.slider-indicator .active').classList.remove('active')
        document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }


    // 3. 自动播放模块
    let timerId = setInterval(function () {
        // 利用js自动调用点击事件  click()  一定加小括号调用函数
        next.click()
    }, 1000)


    // 4. 鼠标经过大盒子，停止定时器
    const slider = document.querySelector('.slider')
    // 注册事件
    slider.addEventListener('mouseenter', function () {
        // 停止定时器
        clearInterval(timerId)
    })

    // 5. 鼠标离开大盒子，开启定时器
    // 注册事件
    slider.addEventListener('mouseleave', function () {
        // 停止定时器
        if (timerId) clearInterval(timerId)
        // 开启定时器
        timerId = setInterval(function () {
            // 利用js自动调用点击事件  click()  一定加小括号调用函数
            next.click()
        }, 1000)
    })
</script>
</body>
</html>

7.3.2 焦点事件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>事件类型-焦点事件</title>
</head>
<body>
<input type="text">
<script>
    const input=document.querySelector(`input`)
    input.addEventListener(`focus`,function (){
        console.log(`有焦点触发`)
    })
    input.addEventListener(`blur`,function (){
        console.log(`失去焦点触发`)
    })
</script>
</body>
</html>

7.3.3 键盘事件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>事件类型-键盘事件</title>
</head>
<body>
<input type="text">
<script>
    const input=document.querySelector(`input`)
    input.addEventListener(`keydown`,function (){
        console.log(`键盘按下`)
    })
    input.addEventListener(`keyup`,function (){
        console.log(`键盘弹起`)
    })
</script>
</body>
</html>

7.3.4 文本事件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>事件类型-文本事件</title>
</head>
<body>
<input type="text">
<script>
    const input=document.querySelector(`input`)
    input.addEventListener(`input`,function(){
        console.log(input.value)
    })
</script>
</body>
</html>

综合练习：评论回车发布

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>评论回车发布</title>
  <style>
    .wrapper {
      min-width: 400px;
      max-width: 800px;
      display: flex;
      justify-content: flex-end;
    }

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: url(../static/images_webApis/avatar.jpg) no-repeat center / cover;
      margin-right: 20px;
    }

    .wrapper textarea {
      outline: none;
      border-color: transparent;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
      flex: 1;
      padding: 10px;
      transition: all 0.5s;
      height: 30px;
    }

    .wrapper textarea:focus {
      border-color: #e4e4e4;
      background: #fff;
      height: 50px;
    }

    .wrapper button {
      background: #00aeec;
      color: #fff;
      border: none;
      border-radius: 4px;
      margin-left: 10px;
      width: 70px;
      cursor: pointer;
    }

    .wrapper .total {
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all 0.5s;
    }

    .list {
      min-width: 400px;
      max-width: 800px;
      display: flex;
    }

    .list .item {
      width: 100%;
      display: flex;
    }

    .list .item .info {
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }

    .list .item p {
      margin: 0;
    }

    .list .item .name {
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }

    .list .item .text {
      color: #333;
      padding: 10px 0;
    }

    .list .item .time {
      color: #999;
      font-size: 12px;
    }
  </style>
</head>
<body>
<div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
</div>
<div class="wrapper">
    <span class="total">0/200字</span>
</div>
<div class="list">
    <div class="item" style="display: none;">
        <i class="avatar"></i>
        <div class="info">
            <p class="name">清风徐来</p>
            <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
            <p class="time">2022-10-10 20:29:21</p>
        </div>
    </div>
</div>
<script>
    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    // 1. 当我们文本域获得了焦点，就让 total 显示出来
    tx.addEventListener('focus', function () {
        total.style.opacity = 1
    })
    // 2. 当我们文本域失去了焦点，就让 total 隐藏出来
    tx.addEventListener('blur', function () {
        total.style.opacity = 0
    })
    // 3. 检测用户输入
    tx.addEventListener('input', function () {
        // console.log(tx.value.length)  得到输入的长度
        total.innerHTML = `${tx.value.length}/200字`
    })

    // const str = 'andy'
    // console.log(str.length)
</script>
</body>
</html>

7.4 事件对象

7.4.1 获取事件对象

在这里插入图片描述

<!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>事件对象-获取事件对象</title>
</head>
<body>
<button>点击</button>
<script>
    const btn = document.querySelector(`button`)
    //function(e){}:e/ev/event为事件对象
    btn.addEventListener(`click`, function (ev) {
        console.log(ev)
    })
</script>
</body>
</html>

7.4.2 事件对象常用属性

对象属性详细内容见于：mdn官网
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>事件对象-事件对象常用的属性</title>
</head>
<body>
<input type="text">
<script>
    const input=document.querySelector(`input`)
    //实现仅点击回车键才可以进行触发
    input.addEventListener(`keyup`,function(ev){
        // console.log(ev)
        //获取具体点击的键值
        // console.log(ev.key)
        //实现仅点击回车键，进行发布新闻或评论
        if(ev.key===`Enter`){
            console.log(`点击回车键（Enter）发布按钮`)
        }
    })
</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>事件对象-点击回车发布评论</title>
    <style>
        .wrapper {
            min-width: 400px;
            max-width: 800px;
            display: flex;
            justify-content: flex-end;
        }

        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            background: url(../static/images_webApis/avatar.jpg) no-repeat center / cover;
            margin-right: 20px;
        }

        .wrapper textarea {
            outline: none;
            border-color: transparent;
            resize: none;
            background: #f5f5f5;
            border-radius: 4px;
            flex: 1;
            padding: 10px;
            transition: all 0.5s;
            height: 30px;
        }

        .wrapper textarea:focus {
            border-color: #e4e4e4;
            background: #fff;
            height: 50px;
        }

        .wrapper button {
            background: #00aeec;
            color: #fff;
            border: none;
            border-radius: 4px;
            margin-left: 10px;
            width: 70px;
            cursor: pointer;
        }

        .wrapper .total {
            margin-right: 80px;
            color: #999;
            margin-top: 5px;
            opacity: 0;
            transition: all 0.5s;
        }

        .list {
            min-width: 400px;
            max-width: 800px;
            display: flex;
        }

        .list .item {
            width: 100%;
            display: flex;
        }

        .list .item .info {
            flex: 1;
            border-bottom: 1px dashed #e4e4e4;
            padding-bottom: 10px;
        }

        .list .item p {
            margin: 0;
        }

        .list .item .name {
            color: #FB7299;
            font-size: 14px;
            font-weight: bold;
        }

        .list .item .text {
            color: #333;
            padding: 10px 0;
        }

        .list .item .time {
            color: #999;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
</div>
<div class="wrapper">
    <span class="total">0/200字</span>
</div>
<div class="list">
    <div class="item" style="display: none;">
        <i class="avatar"></i>
        <div class="info">
            <p class="name">星梦清河</p>
            <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
            <p class="time">2022-10-10 20:29:21</p>
        </div>
    </div>
</div>

<script>
    const tx = document.querySelector('#tx')
    const total = document.querySelector('.total')
    const item = document.querySelector('.item')
    const text = document.querySelector('.text')
    const time = document.querySelector(`.time`)

    // 1. 当我们文本域获得了焦点，就让 total 显示出来
    tx.addEventListener('focus', function () {
        total.style.opacity = 1
    })
    // 2. 当我们文本域失去了焦点，就让 total 隐藏出来
    tx.addEventListener('blur', function () {
        total.style.opacity = 0
    })
    // 3. 检测用户输入
    tx.addEventListener('input', function () {
        // console.log(tx.value.length)  得到输入的长度
        total.innerHTML = `${tx.value.length}/200字`
    })

    // 4. 按下回车发布评论
    tx.addEventListener('keyup', function (e) {
        // 只有按下的是回车键，才会触发
        // console.log(e.key)
        if (e.key === 'Enter') {
            // 如果用户输入的不为空就显示和打印
            if (tx.value.trim()) {
                // console.log(11)
                item.style.display = 'block'
                // console.log(tx.value)  // 用户输入的内容
                text.innerHTML = tx.value
                const date = new Date()
                const y = date.toLocaleDateString()  //年/月/日
                const hours = date.getHours()  //时
                const minutes = date.getMinutes()  //分
                const seconds = date.getSeconds()  //秒
                const time1 = y + " " + hours + ":" + minutes + ":" + seconds
                time.innerHTML = time1
            }
            // 等我们按下回车，结束，清空文本域
            tx.value = ''
            // 按下回车之后，就要把 字符统计 复原
            total.innerHTML = '0/200字'
        }

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

7.5 环境对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>环境对象</title>
</head>
<body>
<button>点击</button>
<script>
  //每个函数中都有this,函数对象
  //普通函数中的this，指的是window
  /*function fn(){
    console.log(this)
  }
  window.fn()  //调用函数fn()
  fn()  //调用函数fn()*/

  //1.获取事件
  const btn=document.querySelector(`button`)
  //2.绑定事件
  btn.addEventListener(`click`,function fn(){
    console.log(this)
    // btn.style.color=`red`
    this.style.color=`red`  //this表示该对象
  })
</script>
</body>
</html>

7.6 回调函数

在这里插入图片描述

综合练习：Tab切换

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>Tab栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 590px;
            height: 340px;
            margin: 20px;
            border: 1px solid #e4e4e4;
        }

        .tab-nav {
            width: 100%;
            height: 60px;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
        }

        .tab-nav h3 {
            font-size: 24px;
            font-weight: normal;
            margin-left: 20px;
        }

        .tab-nav ul {
            list-style: none;
            display: flex;
            justify-content: flex-end;
        }

        .tab-nav ul li {
            margin: 0 20px;
            font-size: 14px;
        }

        .tab-nav ul li a {
            text-decoration: none;
            border-bottom: 2px solid transparent;
            color: #333;
        }

        .tab-nav ul li a.active {
            border-color: #e1251b;
            color: #e1251b;
        }

        .tab-content {
            padding: 0 16px;
        }

        .tab-content .item {
            display: none;
        }

        .tab-content .item.active {
            display: block;
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="tab-nav">
        <h3>每日特价</h3>
        <ul>
            <li><a class="active" href="javascript:;">精选</a></li>
            <li><a href="javascript:;">美食</a></li>
            <li><a href="javascript:;">百货</a></li>
            <li><a href="javascript:;">个护</a></li>
            <li><a href="javascript:;">预告</a></li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="item active"><img src="../static/images_webApis/tab00.png" alt="" /></div>
        <div class="item"><img src="../static/images_webApis/tab01.png" alt="" /></div>
        <div class="item"><img src="../static/images_webApis/tab02.png" alt="" /></div>
        <div class="item"><img src="../static/images_webApis/tab03.png" alt="" /></div>
        <div class="item"><img src="../static/images_webApis/tab04.png" alt="" /></div>
    </div>
</div>
<script>
    // 1. a 模块制作 要给 5个链接绑定鼠标经过事件
    // 1.1 获取 a 元素
    const as = document.querySelectorAll('.tab-nav a')
    // console.log(as)
    for (let i = 0; i < as.length; i++) {
        // console.log(as[i])
        // 要给 5个链接绑定鼠标经过事件
        as[i].addEventListener('mouseenter', function () {
            // console.log('鼠标经过')
            // 排他思想
            // 干掉别人 移除类active
            document.querySelector('.tab-nav .active').classList.remove('active')
            // 我登基 我添加类 active  this 当前的那个 a
            this.classList.add('active')

            // 下面5个大盒子 一一对应  .item
            // 干掉别人
            document.querySelector('.tab-content .active').classList.remove('active')
            // 对应序号的那个 item 显示 添加 active 类
            document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
        })
    }
</script>
</body>
</html>

综合练习：表单全选反选案例

在这里插入图片描述

8.事件流

8.1 事件流和两个阶段说明

在这里插入图片描述

8.2 事件捕获

在这里插入图片描述

<!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>事件流-事件捕获</title>
    <style>
        .father {
            width: 150px;
            height: 150px;
            background-color: #0099cc;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: #404060;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<script>
    const fa=document.querySelector(`.father`)
    const son=document.querySelector(`.son`)
    //省---市---县  （大--->小）  捕获
    //县---市---省  （小--->大）  冒泡
    //以上转换成标签嵌套
    //以下是同类型事件，均为click
    document.addEventListener(`click`,function fn(){
        alert("我是爷爷")
    },true)
    fa.addEventListener(`click`,function fn(){
        alert("我是儿子"),true
    })
    son.addEventListener(`click`,function fn(){
        alert("我是孙子"),true
    })
    //爷爷---儿子---孙子
</script>
</body>
</html>

8.3 事件冒泡

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>事件流-事件冒泡</title>
    <style>
        .father {
            width: 150px;
            height: 150px;
            background-color: #0099cc;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: #404060;
        }
    </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
<script>
  const fa=document.querySelector(".father")
  const son=document.querySelector(".son")
  //县---市---省  （小--->大）  冒泡

  //以下是同类型事件，均为click
  document.addEventListener(`click`,function fn(){
    alert("我是爷爷")
  })
  fa.addEventListener(`click`,function fn(){
    alert("我是儿子")
  })
  son.addEventListener(`click`,function fn(){
    alert("我是孙子")
  })
</script>
</body>
</html>

8.4 阻止冒泡

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>事件流-阻止冒泡或捕获</title>
    <style>
        .father {
            width: 150px;
            height: 150px;
            background-color: #0099cc;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: #404060;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<script>
    const fa=document.querySelector(".father")
    const son=document.querySelector(".son")
    //县---市---省  （小--->大）  冒泡

    //以下是同类型事件，均为click
    document.addEventListener(`click`,function fn(){
        alert("我是爷爷")
    })
    fa.addEventListener(`click`,function fn(){
        alert("我是儿子")
    })
    son.addEventListener(`click`,function fn(e){
        alert("我是孙子")
        e.stopPropagation()  //阻止冒泡或捕获
    })
</script>
</body>
</html>

8.5 解绑事件

在这里插入图片描述

<!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>事件流-事件解绑</title>
</head>
<body>
<button>点击</button>
<script>
    //获取按钮
    const btn = document.querySelector("button")
    //绑定事件：点击按钮，出现弹窗
   /* btn.onclick = function () {
        alert("绑定事件")
        // btn.οnclick=null  //可进行点击一次后，进行解绑事件
    }
    //L0 事件解绑
    btn.onclick = null  //类型给btn.onclick重新赋值为空对象*/

    
    btn.addEventListener("click",fn)
    //L2 事件解绑
    btn.removeEventListener("click",fn)
    function fn(){
        alert("事件")
    }
</script>
</body>
</html>

8.6 鼠标经过事件的区别

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>事件流-鼠标经过流</title>
    <style>
        .father{

            width: 300px;
            height: 300px;
            background: #999999;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: #e1251b;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son">
    </div>
</div>
<script>
    const fa=document.querySelector(".father")
    const son=document.querySelector(".son")
    fa.addEventListener("mouseenter",function fn (){
        alert("鼠标经过")
    })
    fa.addEventListener("mouseleave",function fn(){
        alert("鼠标离开")
    })
    // son.addEventListener("mouseout",function fn(){
    //     alert("son")
    // })
</script>
</body>
</html>

8.7 注册事件的区别

在这里插入图片描述

9.事件委托

9.1 事件委托到父级

在这里插入图片描述

<!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>事件委托</title>
</head>
<body>
<ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>

    <p>不变色</p>
</ul>
<script>
    //点击每个li，使点击到的li变成红色
    //使用事件委托的方式，委托给了父级，事件写到父级身上
    //1.获取父级元素
    const ul = document.querySelector("ul")
    //2.绑定事件
    ul.addEventListener(`click`,function(e) {
        // this.style.color="red"
        // console.log(e.target)  //点击的那个对象
        // console.dir(e.target)   //对象的所有属性
        // e.target.style.color='red'
        if(e.target.tagName==="LI"){   //注意：tagName的值要大写
            e.target.style.color='red'
        }
    })
</script>
</body>
</html>

9.2 阻止元素默认行为

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>事件委托-阻止元素默认行为</title>
</head>
<body>
<form action="https://www.baidu.com/">
    <input type="submit" value="提交">
</form>
<a href="https://www.baidu.com"/>
<script>
    const form=document.querySelector("form")
    form.addEventListener("submit",function (e){
        //阻止默认事件
        e.preventDefault()
    })
    
    const a=document.querySelector("a")
    a.addEventListener("submit",function (e){
        //阻止元素默认行为
        e.preventDefault()
    })
    
</script>
</body>
</html>

10.其他事件

10.1 页面加载事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>其他事件-页面加载事件</title>
    <script>
        //等待页面“所有资源（标签+图片等内容）”加载完毕，就会去执行加载元素（该window中加载的方法最后执行）
       /* window.addEventListener("load",function(){
            const btn = document.querySelector("button")
            btn.addEventListener("click",function(){
                alert("页面加载事件")
            })
        })*/
        /*img.addEventListener("load",function(){
            //等待图片资源加载完成后，再去加载此处内容
        })*/
        //等待页面标签加载完毕，就会去执行加载此处方法
        document.addEventListener("DOMContentLoaded",function (){
            const btn = document.querySelector("button")
            btn.addEventListener("click",function(){
                alert("页面加载事件")
            })
        })
    </script>
</head>
<body>
<button>点击</button>
</body>
</html>

10.2 元素滚动事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>其他事件-元素滚动事件</title>
    <style>
        body{
            padding-top: 100px;
            height: 3000px;
        }
        div{
            margin: 100px;
            overflow: scroll;
            width: 210px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
    <!--<script>
        //window加scroll
        window.addEventListener('load',function(){
            window.addEventListener('scroll',function(){
                console.log("页面滚动")
            })
        })
    </script>-->
</head>
<body>
<div>
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
    心中有信仰，脚下有力量！
</div>

<script>
    /*window.addEventListener('scroll',function(){
        console.log("页面滚动")
    })*/
    const div=document.querySelector("div")
    div.addEventListener('scroll',function (){
        // console.log("页面滚动")
        // scrollTop 被卷去的头部,页面滚动了多少像素，crollTop
        console.log(div.scrollTop);
        //获取html元素写法
        var n = document.documentElement.scrollTop;
        if(n>=100){
            div.style.display='block'
        }else{
            div.style.display='none'
        }
    })
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>页面滚动事件</title>
    <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>
<script>
    document.documentElement.scrollTop=800
    window.addEventListener('scroll',function(){
        // console.log(document.documentElement.scrollTop)
        //必须写到里面
        const n=document.documentElement.scrollTop
        //得到是什么数据   数字型 不带单位
        console.log(n)
    })
</script>
</body>
</html>

10.3 页面尺寸事件

在这里插入图片描述

11.元素尺寸与位置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>元素尺寸与位置</title>
    <style>
        div{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #e1251b;
            margin: 100px;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
        }
    </style>
</head>
<body>
<div></div>
<p></p>
<script>
    const div=document.querySelector("div")
    const p=document.querySelector("p")
//  检测盒子的位置，最近一级带有定位的祖先元素
    console.log(div.offsetLeft);
    console.log(p.offsetLeft)
</script>
</body>
</html>

12.日期对象

在这里插入图片描述

12.1 实例化

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>日期对象-实例化</title>
</head>
<body>
<script>
    //1.获取当前时间   new是实例化象征
    const date=new Date()
    console.log(date)
    //2.获取指定时间,用于倒计时
    const date2=new Date("2024-2-25 08:30:00")
    console.log(date2)
</script>
</body>
</html>

12.2 事件对象方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>日期对象-时间对象方法</title>
</head>
<body>
<script>
    const date=new Date()
    //1.获取年份
    console.log(date.getFullYear())
    //2.获取月份
    console.log(date.getMonth()+1)
    //3.获取月份中的第几天
    console.log(date.getDate()+1)
    //4.星期几
    console.log(date.getDay())
    //5.时
    console.log(date.getHours())
    //6.分
    console.log(date.getMinutes())
    //7.秒
    console.log(date.getSeconds())
</script>
</body>
</html>

12.3 时间戳

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>日期对象-时间戳</title>
</head>
<body>
<script>
    const date=new Date()
    //1.方法一:getTime()
    console.log(date.getTime());
    //2.方法二：new Date
    console.log(+new Date());
    //获取指定时间戳
    console.log("指定时间戳："+ +new Date("2024.02.28 12:20:22"))
    //3.方法三：date.now()
    console.log(Date.now());

    //获取星期XX
    const arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    console.log(arr[new Date().getDay()])
</script>
</body>
</html>

13.节点操作

13.1 DOM节点

在这里插入图片描述

13.2 查找节点

在这里插入图片描述

13.2.1 父节点查找

在这里插入图片描述

<!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>节点查找-父节点查找</title>
</head>
<body>
<div class="grandfather">
    <div class="dad">
        <div class="baby">
        </div>
    </div>
</div>
<script>
    const baby = document.querySelector(".baby")
    console.log(baby)  //baby
    console.log(baby.parentNode)  // dad，只能得到最后一级
    console.log(baby.parentNode.parentNode)  //grandfather
</script>
</body>
</html>

13.2.2 子节点查找

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>节点查找-子节点查找</title>
</head>
<body>
<ul>
    <li>
        <p>第一段</p>
    </li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    const ul=document.querySelector("ul")
    console.log(ul.children)
</script>
</body>
</html>

13.2.3 兄弟节点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>节点查找-兄弟节点查找</title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
    const li2=document.querySelector("ul li:nth-child(2)")
    console.log(li2.previousElementSibling)  //上一个兄弟
    console.log(li2.nextElementSibling)  //下一个兄弟
</script>
</body>
</html>

在这里插入图片描述

13.3 增加节点

在这里插入图片描述

13.3.1 创建节点

在这里插入图片描述

13.3.2 追加节点

在这里插入图片描述

<!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>增加节点-创建节点</title>
</head>
<body>
<ul>
    <li>1</li>
</ul>
<script>
    //1.创建节点
    const div = document.createElement("div")
    // console.log(div)
    document.body.appendChild(div)
    const ul = document.querySelector("ul")
    const li = document.createElement("li")
    //2.追加节点1，作为最后一个子元素
    li.innerHTML = "小丽"
    // ul.appendChild(li)
    //3.追加节点2，作为第一个元素
    //insertBefore(放哪个元素，放到哪里)
    ul.insertBefore(li,ul.children[0])
</script>
</body>
</html>

13.4 删除节点

14.M端事件

在这里插入图片描述

<!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>M端事件</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div></div>
<script>
    const div = document.querySelector("div")
    //1.触摸
    div.addEventListener("touchstart", function () {
        console.log("触摸")
    })
    //2.离开
    div.addEventListener("touchend",function(){
        console.log("离开")
    })
    //3.移动
    div.addEventListener("touchmove",function(){
        console.log("移动")
    })
</script>
</body>
</html>

15.JS插件

在这里插入图片描述

16.Window对象

16.1 BOM（浏览器对象模型）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>window-BOM</title>
</head>
<body>
<script>
    console.log(document===window.document)
    function fn(){
        alert("window-BOM")
    }
    window.fn()
    var num=10
    console.log(window.num)
    console.log(num)
</script>
</body>
</html>

16.2 定时器-延时函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>window-延时定时器</title>
</head>
<body>
<script>
    setTimeout(function(){
        console.log("时间到啦！！！"),100000
    })
</script>
</body>
</html>

16.3 JS执行机制

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>js机制</title>
</head>
<body>
<script>
    //输出结果：1，2，4，3
    console.log(1)
    console.log(2)
    setTimeout(function fn(){
        console.log(3)},1000)
    console.log(4)
</script>
</body>
</html>

16.4 location对象

在这里插入图片描述

<!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>window-location</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度<span>5</span>秒后打开界面</a>
<script>
    /*console.log(window.location)
    console.log(location)
    console.log(location.href)*/
    //经常使用href,js的方法去跳转页面
    // location.href="http://www.baidu.com"

    //1.获取元素
    const a = document.querySelector("a")
    //2.开启定时器
    //3.声明倒计时变量
    let num = 5
    let timeId = setInterval(function () {
        num--
        a.innerHTML = "百度<span>${num}</span>秒后打开界面"
        //如果num===0，则停止定时器，并且完成跳转功能
        if (num === 0) {
            clearInterval(timeId)
            //4.跳转location.href
            location.href = "http://www.baidu.com"
        }
    }, 1000)

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

在这里插入图片描述

16.5 navigator对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>nabigator</title>
</head>
<body>
这是PC端的页面
<script>
    //检测userAgent（浏览器信息）
    !(function (){
        const userAgent=navigator.userAgent
        //验证是否为Android或iPhone
        const android=userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
        const iphone=userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
        //如果是Android或iPhone,则跳转至移动站点
        if(android||iphone){
            location.href="http://www.baidu.com"
        }
    })()
</script>
</body>
</html>

16.6 histroy对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>history</title>
</head>
<body>
<button>前进</button>
<button>后退</button>
<script>
    const back=document.querySelector("button:first-child")
    const forward=back.nextElementSibling
    back.addEventListener("click",function(){
        //后退一步
        // history.back()
        history.go(-1)
    })
    forward.addEventListener("click",function(){
        //前进一步
        // history.forward()
        history.go(1)
    })
</script>
</body>
</html>

17.本地存储

17.1 本地存储介绍

在这里插入图片描述

17.2 本地存储分类

17.2.1 本地存储分类-localStorage

关闭浏览器不会消失
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>浏览器本地存储-localStorage</title>
</head>
<body>
<script>
    //本地存储，存储的都是字符串类型
    //1.要存储一个名字uname,chenchen
    //localStorage.setItem('键','值')
    localStorage.setItem("uname","chenchen")
    //2.获取
    localStorage.getItem("uname")
    //3.删除本地存储，只删除值
    localStorage.removeItem("uname")
    //4.修改，当本地存储，存储的有该字段则为修改，否则为增加
    localStorage.setItem("uname","cc")
    console.log(localStorage.getItem("uname"))
</script>
</body>
</html>

17.2.2 本地存储分类-sessionStorage

关闭浏览器数据就会消失
在这里插入图片描述

17.3 存储复杂数据类型

主要有两步：
1.把对象转换成字符串
2.把字符串转成对象
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>存储复杂数据类型</title>
</head>
<body>
<script>
    const obj={
        uname: 'chenchen',
        age:18,
        gender:'女'
    }
    //存储复杂数据类型,无法直接使用
    // localStorage.setItem('obj',obj)
    //取
    // console.log(localStorage.getItem('obj'))

    //1.复杂数据类型存储必须转换为JSON字符串类型存储
    localStorage.setItem('obj',JSON.stringify(obj))
    //JSON对象，属性和值有引号，而是引号统一是双引号
    // {"uname":"chenchen","age":18,"gender":"女"}
    //取
    console.log(localStorage.getItem('obj'))
    //2.把JSON字符串转换为对象
    console.log(JSON.parse(localStorage.getItem('obj')))
</script>
</body>
</html>

18.数组的map和join方法

在这里插入图片描述

18.1map方法

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>数组方法</title>
</head>
<body>
<script>
    const str=['pink','blue','green','yellow']
    //1.map方法
    const newStr=str.map(function (ele,index){
        //数组元素
        console.log(ele)
        //数组索引
        // console.log(index)
        return ele+"颜色"
    })
    console.log(newStr)
    //2.join方法
</script>
</body>
</html>

18.2 join方法

在这里插入图片描述

19.正则表达式

19.1 介绍

在这里插入图片描述

19.2 语法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>正则表达式的使用</title>
</head>
<body>
<script>
    //要检测的字符串
    const str="I like javascript"
    //1.定义正则表达式，检测规则
    const reg=/java/
    //2.检测方法
    console.log(reg.test(str));  //true
</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>正则表达式的使用</title>
</head>
<body>
<script>
    //要检测的字符串
    const str = "I like javascript"
    //1.定义正则表达式，检测规则
    const reg = /java/
    //2.test(),检测方法,是否匹配
    // console.log(reg.test(str));  //true
    //3.exec()
    console.log(reg.exec(str)); //返回字符串
</script>
</body>
</html>

19.3 元字符

在这里插入图片描述
正则测试工具

在这里插入图片描述

19.3.1 边界符

在这里插入图片描述

<!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>正则表达式-元字符</title>
</head>
<body>
<script>
    //元字符
    //普通字符
    console.log(/java/.test("java"))   //true
    console.log(/java/.test("javajava"))   //true
    console.log(/java/.test("javaScript"))   //true

    console.log("===^===")
    //1.边界符,^：开始，$：结束
    console.log(/^java/.test("java"))   //true
    console.log(/^java/.test("javajava"))   //true
    console.log(/^java/.test("javascript")) //true
    console.log("===$===")
    console.log(/java$/.test("java"))  //true,只有该种情况是true,否则全是false
    console.log(/^java$/.test("javajava"))   //false
    console.log(/^java$/.test("javaScript"))  //false
</script>
</body>
</html>

19.3.2 量词

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>正则表达式-元字符-量词</title>
</head>
<body>
<script>
    console.log(/^哈$/.test("哈"))  //true
    console.log(/^哈*$/.test("哈哈"))  //true，重复零次或更多次
    console.log(/^哈+$/.test("哈哈"))  //true，重复一次或更多次
    console.log(/^哈?$/.test("哈哈哈"))  //false，重复零次或一次
    console.log(/^哈{2}$/.test("哈哈哈"))  //false，重复2次
    console.log(/^哈{2,}$/.test(("哈哈哈")))  //true，重复2次或更多次
    console.log(/^哈{2,5}$/.test("哈哈哈哈哈哈"))  //false,重复2~5次
</script>
</body>
</html>

在这里插入图片描述

19.3.3 字符类

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>正则表达式-元字符-字符类</title>
</head>
<body>
<script>
    console.log(/^[abc]$/.test("a"))  //true
    console.log(/^[abc]$/.test("b"))  //true
    console.log(/^[abc]$/.test("c"))  //true
    console.log(/^[abc]$/.test("ab"))  //false，加了精确匹配，只有一个
    console.log(/^[abc]{2}$/.test("ab"))  //true

    console.log(/^[a-z]$/.test("a"))  //true,加了精确，只有a-z其中的一个
    console.log(/^[a-z]$/.test("ab"))  //false,加了精确，只有a-z其中的一个
    console.log(/^[A-Z]$/.test("A"))  //true,加了精确，只有a-z其中的一个
    console.log(/^[a-zA-Z0-9]$/.test("A"))  //true,加了精确，只有a-z其中的一个


    console.log(/^[1-9][0-9]{4,}$/.test("124899"))  //true,表示一个字符串，第一位为1~9，第二位为0~9，第三位为>=4
    console.log(/^[1-9][0-9]{4,}$/.test("024899"))  //false,表示一个字符串，第一位为1~9，第二位为0~9，>=4位
    console.log(/^[1-9][0-9]{4,}$/.test("123899"))  //true,表示一个字符串，第一位为1~9，第二位为0~9，>=4位
    console.log(/^[1-9][0-9]{4,}$/.test("023899"))  //false,表示一个字符串，第一位为1~9，第二位为0~9，>=4位
    console.log(/^[1-9][0-9]{4,}$/.test("123"))  //false,表示一个字符串，第一位为1~9，第二位为0~9，>=4位
</script>
</body>
</html>

在这里插入图片描述

19.4 修饰符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>正则表达式-修饰符</title>
</head>
<body>
<script>
    //不区分大小写
    console.log(/^java$/.test("java"))  //true
    console.log(/^java$/.test("JAVA"))  //false
    console.log(/^java$/gi.test("JAVA"))  //true,后面的i表示，匹配的时候不区分大小写

    //替换
    const str="javascript"
    console.log(str.replace(/a/i, "web"));
    console.log(str)
</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>正则表达式-敏感词</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<div></div>
<script>
    const tx = document.querySelector("textarea")
    const btn = document.querySelector("button")
    const div = document.querySelector("div")

    btn.addEventListener("click", function () {
        // console.log(tx.value)
        const c=tx.value.replace(/激情|激动/g, "**")
        div.innerHTML = c
    })
</script>
</body>
</html>