Dom对象总结案例实操(第二十课)

Dom对象总结案例实操(第二十课)

今天文章有点长

第一部分:回顾之前Dom对象我用了四篇文章对他进行了分开讲述Dom对象的用途,今天用几个案例实操一下.

之前我们Dom对象中了解过下面的内容

Dom对象的定义?
Dom对象的节点操作，了解到了父节点子节点第一个子节点最后一个子节点兄弟节点？
Dom元对象的操作，了解到了元素的节点同样元素与元素之间页D存在关系我们了解到Dom元素之间的关系表格元素中的关系表单元素之间的关系？
Dom对象的属性和方法了解到了这些语法是如何使用的？
Dom对象自定义的属性操作对attribute的属性的增删改查？
Dom对象是如何自定义属性的？
Dom对象元素的属性修改？
Dom对象中动态的style样式的增删改查？
了解Dom中的文档对象？
了解了window对象的使用？
Dom对象的基础事件？
Dom对象的事件冒泡？

第二部分 Domd对象博客文章的链接

JS(DOM)第十五课_星辰镜的博客-CSDN博客
JS(Dom对象的属性和方法)第十六课_星辰镜的博客-CSDN博客
JS(Dom操作)第十八课_星辰镜的博客-CSDN博客
JS(Dom事件操作)第十九_星辰镜的博客-CSDN博客

第三部分 Dom对象知识点回顾效果不去展示重点在后面的案例上

Demo1 Dom元素中的节点操作和方法操作

<!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>
</head>

<body>
    <!-- !div元素格式 -->
    <div class="box">
        <h1>我是标题有些节点操作你知道吗</h1>
        <div class="container">我是div元素的信息</div>
        <div class="dest">我是一个段落标签</div>
        <div class="dest">我是第二个段落标签</div>
        <span>我是Span元素的镖旗</span>
    </div>

    <!-- !表格元素导行 -->
    <table>
        <tr>
            <td class="one">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td class="one">2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td class="one">3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td class="nav_li">我是nav_li元素</td>
            <td>2</td>
            <td>
                <li>我是li标签</li>
                <li>我是li标签</li>
                <li>我是li标签</li>
            </td>
            <td class="one">4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td id="nav">我是id选择器</td>
            <td>3</td>
            <td>4</td>
            <td class="one">5</td>
        </tr>
        <caption>我是caption的元素内容</caption>
        <thead>我是thead的元素的内容</thead>
        <tbody>123</tbody>
    </table>
    <!-- !表单的元素信息 -->
    <form action="index.html" method="" id="form">
        <table>
            <tr>
                <td><input type="text" placeholder="手机号/邮箱/账号名"></input></td>
            </tr>
            <tr>
                <td><input type="password" name="password" onclick="btn()" id="psw" placeholder="请输入登录的用户密码">
                    <!-- <img src="img/11 (2).png" / style="width: 30px;"> -->
                    <p style="color: black;opacity: 0.5;"><a href="">短信验证码登录页面</a></p>
            </tr>

            <tr>
                <td><input type="submit" value="登录按钮"></td>
            </tr>
            <tr>
                <td colspan="2" id="test">
                    <p style="float: left;"><a href="">短信验证手机</a></p>
                    <p style="float: right;"><a href="">快速注册</a></p>

                </td>
            </tr>
        </table>
    </form>

    <script>
        // 获取元素的信息
        // 文档声明
        var DOCTYPE = document.doctype
        console.log(DOCTYPE)
        // html
        var html = document.documentElement
        console.log(html);
        html.style.background = 'pink'
        // head
        var head = document.head
        console.log(head)
        head.style.background = "yellow"
        var body = document.body
        console.log(body)
        console.log(body.parentNode)
        console.log(head.parentNode) //head的父节点 Html
        console.log(body.previousSibling) //前兄弟节点 #text
        console.log(head.nextSibling) //后兄弟节点  #text
        console.log(head.childNodes) //head子节点 NodeList(9) [text, meta, text, meta, text, meta, text, title, text]
        console.log(body.firstChild)
        console.log(body.lastChild)
        console.log(body.childNodes[0])
        console.log(body.childNodes[1])
        console.log(body.childNodes[2])


        var body = document.body
        console.log("/获取了元素的body元素")
        console.log(body)//获取了元素的body元素
        // body.style.background = 'green'
        console.log("获取body的第一个孩子为 style")
        console.log(body.children[0])//获取body的第一个孩子为 style
        console.log("获取body的第二个孩子为 table")
        console.log(body.children[1])//获取body的第二个孩子为 table
        body.children[1].background = 'yellow'
        console.log("获取body的第三个孩子为 script")
        console.log(body.children[2])//获取body的第三个孩子为 script
        console.log("获取所有的tr")
        console.log(body.children[1].rows) //所有的tr
        var table = document.body.children[0]
        console.log(table)
        // 获取表格的信息
        var table = document.querySelector("table")
        console.log(table)
        console.log(table.rows)
        console.log(table.caption)
        console.log(table.tHead)
        console.log(table.tFoot)
        console.log(table.tBodies)
        console.log(table.rows)
        var td = document.body.children[1].rows

        console.log(td)
        var getclass = document.getElementsByClassName('one')
        console.log(getclass)
        //querySelector() — 精准的获取某个元素 
        var f = document.querySelector(".one")
        //uerySelectorAll()获取符合类名或者标签名等条件的的所有元素
        var g = document.querySelectorAll('.one')

        console.log(f)
        // 获取表单的信息
        var form = document.querySelector("#form")
        var from = document.forms[0]
        console.log(from)
        console.log(from.elements);//获取所有元素
        console.log(from.emil)//通过name属性获得焦点


        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        var nav_li = document.getElementsByClassName('nav_li')
        console.log(nav_li)
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);

    </script>

</body>

</html>

重点代码

    // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        var nav_li = document.getElementsByClassName('nav_li')
        console.log(nav_li)
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);

Demo2 attribute的操作对属性的增删改查

<!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>attribute的操作</title>
    <!-- 增加 修改 删除 判断  查询 -->
</head>

<body>
    <div class="box" id="main" name="wer" sex="男" age="67" data-srt="我较上周"></div>
    <script>
        // 获取元素的值的属性值
        var classEl = document.querySelector('#main')
        // 控制台打印输出
        console.log(classEl)
        // 判断该属性是否age存在
        var flag = classEl.hasAttribute("age")
        console.log(flag)
        var flag1 = classEl.hasAttribute("name")
        console.log(flag1)
        // 获取某个值
        var name = classEl.getAttribute("name")
        console.log(name)

        var age = classEl.getAttribute("age")
        console.log(age)

        // 自己定义的属性 data-*
        var srt = classEl.getAttribute("srt")
        console.log(srt)

        // 设置元素的值
        var setName = classEl.setAttribute("setName", "我是设置的元素值")
        var getName = classEl.getAttribute("setName")
        console.log("获取姓名为"+getName)
        // 设置元素的值二
        var setWeight=classEl.setAttribute("setWeight","我的体重200kg")
        // 获取元素的值
        var getWeight=classEl.getAttribute("setWeight")
        console.log("获取体重的值"+getWeight)
        

        // 删除属性值元素
        var delteName = classEl.removeAttribute("setName")
        console.log(delteName)

        var attrs =classEl.attributes  //获取所有的属性
        console.log(attrs)
        for (var item of attrs) {
            console.log(item)
        }


        // 
        console.log(classEl.className)
        console.log(classEl.id)



    </script>




</body>

</html>

重点代码

// 判断该属性是否age存在
 var flag = classEl.hasAttribute("age")

 // 获取某个值
 var name = classEl.getAttribute("name")
 console.log(name)

// 设置元素的值
var setName = classEl.setAttribute("setName", "我是设置的元素值")
var getName = classEl.getAttribute("setName")
console.log("获取姓名为"+getName)

  // 删除属性值元素
  var delteName = classEl.removeAttribute("setName")
  console.log(delteName)

Demo3 classlist使用动态的对类名增伤改查

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>动态的style样式的增删改查</title>
    <style>
        button{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        .mystyle {
            width: 500px;
            height: 50px;
            padding: 15px;
            border: 1px solid black;
        }

        .anotherClass {
            border: 1px solid red;
            background-color: lightblue;
            color: white;
        }

        .thirdClass {
            text-transform: uppercase;
            text-align: center;
            font-size: 25px;
        }
        .newClassName{
            background-color: darkturquoise;
            color: red;
            height: 300px;
            width: 200px;
        }
		#id{
			overflow: hidden;
		}
    </style>
</head>

<body>

    <a onclick="insertinto()">点我我是一个增加class选择器的类名</a>
    <div id="myDIV">123 </div>
    <script>
        function insertinto() {
            // 增加一个类名
            document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
            alert("增加几个类名")
            var all = document.querySelector("#myDIv")
            removes()
        }

        function removes() {
            document.getElementById("myDIV").classList.remove("mystyle");
            alert("删除的元素thirdClass")
            toggle()
        }

        function toggle(){
            document.getElementById("myDIV").classList.toggle("newClassName");
            // 调用函数
            contains()
        } 
        function contains(){
            var x = document.getElementById("myDIV").classList.contains("anotherClass");
            console.log(x)
            var y = document.getElementById("myDIV").classList.contains("mystyles");
            console.log(y)
        }

    </script>

</body>

</html>

重点代码

  document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");
 document.getElementById("myDIV").classList.remove("mystyle");
 document.getElementById("myDIV").classList.toggle("newClassName");
  var x = document.getElementById("myDIV").classList.contains("anotherClass");
  console.log(x)
  var y = document.getElementById("myDIV").classList.contains("mystyles");
  console.log(y)

Demo4 自己定义属性值

<!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>
    <!-- 自己定义的属性值 -->
    <div class='box' data-name="why"  data-age="23">我是属性值的内容信息</div>
    <script>
        var boxEl=document.querySelector(".box")
        console.log(boxEl.age)
        console.log(boxEl.name)
        console.log(boxEl.dataset.name)
        console.log(boxEl.dataset.age)
    </script>
</body>
</html>

Demo5 元素的属性修改

<!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>
        .box{
            height: 200px;
            width: 200px;
            background-color: rgb(110, 223, 140);
            color: crimson;
        }
    </style>
</head>
<body>
    <div class="box" style="width: 300px;">我是元素修改的属性信息</div>
    <script>
        var boxEl=document.querySelector('.box')
        console.log(boxEl)
        // 修改属性值
      var  s=  boxEl.style.width="600px"
    
      var  d=boxEl.style.display=''
      console.log(d)
      console.log(s)
    //   全局函数获取内容
    console.log(getComputedStyle(boxEl).width)
    </script>
</body>
</html>

Demo6 Dom对象的基础事件

<!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>
        * {
            background-color: rgb(0, 232, 232);
        }

        #input_text {
            border: 2px solid paleturquoise;
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: red;
            color: white;
            border-radius: 12px;
            font-size: 30px;
        }


        #input_text1 {
            border: 2px solid rgb(20, 20, 20);
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            color: rgb(247, 9, 9);
            border-radius: 12px;
            font-size: 30px;
        }

        .input_text1 {
            border: 2px rgb(255, 0, 0);
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            color: rgb(255, 0, 0);
            border-radius: 12px;
            font-size: 30px;
        }

        .input_text2 {
            border: 1px rgb(0, 0, 0);
            width: 300px;
            height: 300px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            color: rgb(255, 255, 255);
            border-radius: 12px;
            font-size: 30px;
            display: block;
        }
    </style>
</head>

<body onload="checkCookies()">
   
    
    <!--  事件三要素
    - 事件源（谁）：触发事件的元素
    - 事件类型（什么事件）： 例如 click 点击事件
    - 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 -->
    <!-- 事件一 鼠标单机事件 -->
    <!-- onclick鼠标单机左边生效 -->
    <button id="input_text">我是用户的单机事件</button>
    <script>
        var btn = document.getElementById("input_text")
        console.log(btn)
        btn.onclick = function () {
            var ss=document.querySelector("#input_text")
            ss.textContent="我是自定义的函数的单机事件信息内容"
            alert("我是用户实现的单机事件")
            btn.style.backgroundColor = 'pink'
            btn.style.color = 'red'
            btn.addEventListener("click",function(){
                console.log("btn.addEventListener 创建单机事件")
            })
        }
    </script>

    <!-- ondblclick	鼠标双击时	鼠标 -->
    <button id="input_text1">我是用户的鼠标两次单机的事件</button>
    <script>
        var btn1 = document.querySelector("#input_text1")
        console.log(btn1)
        btn1.ondblclick = function () {
            confirm("我是用户的鼠标两次单机的事件")
            btn1.style.backgroundColor = 'green'
        }
        // onkeydown	键盘按下	键盘

        btn1.onkeydown = function () {
            window.alert("键盘按下的事件")
            btn1.style.height = '100px'
        }

        // onkeypress	键盘按键（含按下与抬起）	键盘

        btn1.onkeypress = function () {
            console.log("键盘按键（含按下与抬起）	键盘 事件")
            btn1.style.backgroundColor = 'yellow'
        }
    </script>


    <button class="input_text1">键盘抬起</button>
    <script>
        var btn2 = document.querySelector(".input_text1")
        // onkeyup	键盘抬起	键盘
        btn2.onkeyup = function () {
            alert("键盘抬起来使用的事件")
            btn2.style.height = '200px'
            btn2.style.color = 'black'
        }
        // onmousedown	鼠标按下时	鼠标
        btn2.onmousedown = function () {
            alert("onmousedown	鼠标按下时	鼠标")
            btn2.style.backgroundColor = 'yellow'
        }
        // 鼠标的移入移出事件 移出时
        // onmousemove	鼠标移动时	鼠标onmouseup	鼠标抬起时	鼠标onmouseout	鼠标移出时	鼠标 onmouseover	鼠标移入时	鼠标

        btn2.onmousemove = function () {
            btn2.style.backgroundColor = 'orange'
            btn2.style.height = '250px'
        }

        // 移出
        btn2.onmouseout = function () {
            btn2.style.backgroundColor = 'red'
            btn2.style.height = '400px'
            btn2.style.color = ' white'
        }
    </script>


    <button class="input_text2" onmouseover=sut()>鼠标移入事件</button>

    <script>
        function all() {
            var btn3 = document.querySelector(".input_text2")
            btn3.onmouseover = function () {
                btn3.style.backgroundColor = 'red'
                btn3.style.color = 'white'
            }
            // 移出
            btn3.onmouseout = function () {
                btn3.style.height = '400px'
                btn3.style.color = ' white'
                btn3.style.display = 'none'
            }
        }

        function sut() {
            all()

        }
    </script>



    <script>
        function checkCookies() {
            if (navigator.cookieEnabled == true) {
                alert("Cookies 可用")
            } else {
                alert("Cookies 不可用")
            }
        }
    </script>



</body>

</html>

Demo7 Dom事件的冒泡

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 200px;
        }

        span {
            border: 3px solid red;
            background-color: aliceblue;
            background-color: antiquewhite;
            height: 100%;
        }

        p {
            background-color: aquamarine;
            color: red;
        }

        body {
            background-color: aliceblue;
        }
    </style>

    <div>我是div
        <span>我是span
            <p>我是p标签的内容信息</p>
        </span>
    </div>

    <script>
        var body = document.body;
        var divel = document.querySelector("div");
        var spanel = document.querySelector("span");
        var pel = document.querySelector("p")

        pel.onclick = function () {
            console.log(this.textContent);
        }
        spanel.onclick = function () {
            console.log(this.textContent);
        }
        divel.onclick = function () {
            console.log(this.textContent);
        }
        body.onclick = function () {
            console.log(this)
        }

        document.onclick = function () {
            console.log(this)
        }

        window.onclick = function () {
            console.log(this)
        }

    </script>
</body>

</html>

Demo8 Dom对象事件捕获

<!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>
<script>
    window.onload=function(){
        
    }
</script>
<body>
    <style>
        div {
            width: 100%;
            height: 200px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 200px;
        }

        span {
            display: block;
            border: 3px solid red;
            background-color: aliceblue;
            background-color: antiquewhite;
            height: 100%;
        }
        p{
            background-color: aquamarine;
            color: red;
        }

        body {
            background-color: aliceblue;
        }
    </style>

    <div>我是div
        <span>我是span
            <p>我是p标签的内容信息</p>
        </span>
    </div>

    <script>
        var body = document.body;
        var divel = document.querySelector("div");
        var spanel = document.querySelector("span");
        var pel=document.querySelector("p")

        divel.addEventListener("click",function(){
            window.dispatchEvent(new Event("ghjkl"))
        })
        window.addEventListener("ghjkl",function(e){
            console.log(e)
        })

        pel.onclick=function(){
            console.log(this.textContent);
        }
        spanel.onclick = function () {
            console.log(this.textContent);
        }
        divel.onclick = function (e) {
            console.log("当前处理的事件")
            console.log(e.target)   //当前处理事件
            console.log("当前处理的事件是div")
            console.log(e.currentTarget)

            console.log(this.textContent);
            console.log(this==divel)
            console.log(this===divel)
            e.stopPropagation()
            alert("组织")
        }
        body.onclick = function () {
            console.log(this)
        }

        document.onclick = function () {
            console.log(this)
        }

        window.onclick = function () {
            console.log(this)
        }
        // 事件捕获
        // 先捕获到目标事件然后在mao

        body.addEventListener("click", function (e) {
            console.log(this)
            // 判断该事件的类型
            console.log(e.type) 
            //客户端的x y的距离
            console.log(e.clientX, e.clientY)
            // 处理的事件是当前处理的事件是什么
            console.log(e.target)   //当前处理事件
            console.log(e.currentTarget)  //当前处理事件
            console.log(e.eventPhase)      //事件所处在的阶段
            console.log(e.offsetX, e.offsetY)  //事件发生的元素内
            console.log(e.pageX, e.pageY)   //事件发生在document的位置
            console.log(e.screenX, e.screenY)  // 相对屏幕的位置
        }, true)

        divel.addEventListener("click", function () {
        }, true)

        spanel.addEventListener("click", function (e) {
        }, true)

        document.addEventListener("click", function (e) {
        }, true)

        window.addEventListener("click", function (e) {
        }, true)


    </script>
</body>

</html>

重点代码

  body.addEventListener("click", function (e) {
            console.log(this)
            // 判断该事件的类型
            console.log(e.type) 
            //客户端的x y的距离
            console.log(e.clientX, e.clientY)
            // 处理的事件是当前处理的事件是什么
            console.log(e.target)   //当前处理事件
            console.log(e.currentTarget)  //当前处理事件
            console.log(e.eventPhase)      //事件所处在的阶段
            console.log(e.offsetX, e.offsetY)  //事件发生的元素内
            console.log(e.pageX, e.pageY)   //事件发生在document的位置
            console.log(e.screenX, e.screenY)  // 相对屏幕的位置
        }, true)

第四部分案例实操

案例一案例一轮番消息 HTml+CSS结构

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

  <!-- ! CSS样式 -->
  <style>
    .tip-bar {
      /* margin: auto; */
      display: inline-flex;
      align-items: center;
      height: 100%;
      background-color: rgba(0, 0, 0, .4);
      border-radius: 16px;
      background-color: aqua;
    }

    img {
      background-repeat: no-repeat;
      height: 200px;
      width: 200px;
      border-radius: 50%;
      margin-right: 5px;
    }

    span {
      font-size: 20px;
      color: rgb(255, 0, 0);
      margin-right: 8px;
    }

    button {
      margin: auto;
      height: 200px;
      width: 200px;
      text-align: center;
      align-items: center;
    }
  </style>

function all() {
console.log("执行函数信息")
// 调用函数
FenZhuang()
}
function FenZhuang() {
// 创建数组在数组中创建对象
var user = [
{
Name: '我叫上三对这张图片感兴趣哦',
imgUrl: './img/1.jpeg'
},
{
Name: '我叫上四对这张图片感兴趣哦',
imgUrl: './img/2.jpeg'
},
{
Name: '我叫上五对这张图片感兴趣哦',
imgUrl: './img/3.jpeg'
},
{
Name: '我叫上六对这张图片感兴趣哦',
imgUrl: './img/4.jpeg'
},
]
// 获取图片的信息
var img = document.querySelector("img")
console.log(img)
// 获取div的信息
var div = document.querySelector(".tip_bar")
console.log(div)
// 获取Span元素信息
var span = document.querySelector("span")
console.log(span)
var i = 1
setInterval(function () {
img.src = user[i].imgUrl
// 改变图片的地址
var imghu = div.style.backgroundImage = `url("${user[i].imgUrl}")`
console.log(imghu)
span.textContent = user[i].Name
i++
if (i == user.length) i == 0
}, 1000)
}
all()

案例二案例二表格转动

<!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>
        /* 头部导航样式 */
        .header_tab {
            width: 100%;
            height: 35px;
            margin-top: 10px;
            background-color: #3B99FC;
            /* border: 1px solid red; */
        }

        .tab_List {
            width: 80%;
            height: 35px;
            /* border: 1px solid red; */
            margin: auto;
            line-height: 35px;
        }

        .tab_List_txt {
            list-style: none;
            color: white;
            font-size: 14px;
            text-align: center;
        }

        .tab_List_txt li {
            float: left;
            height: 35px;
            margin-left: 2%;
            width: 10%;
        }

        .tab_List_txt li:hover {
            cursor: pointer;
            border-radius: 3px;
            background-color: #2676E3;
        }

        /* 高亮元素 */
        .active {
            background-color: #1476ff;
            border-radius: 3px;
        }

        .actives {
            background-color: #f2b6f1;
            border-radius: 3px;
            opacity: 0.9;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div class="header_tab">
        <div class="tab_List">
            <ul class="tab_List_txt">
                <li class="item active">首页</li>
                <style>
                    /* 多了这个元素信息 */
                    .roSpan {
                        display: inline-block;
                        transition: transform 0.5s ease;
                    }
                </style>
                <li class="item">车票&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">团购服务&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">会员服务&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">车站服务&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">商旅服务&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">出行指南&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
                <li class="item">信息查询&nbsp;&nbsp;<span class="roSpan">&or;</span></li>
            </ul>
        </div>
    </div>

// 获取ul
var ulEl = document.querySelector("ul")
// 获取到当前高亮的元素
var activeEl = ulEl.children[0]
var flag = false
// console.log(activeEl);
// 绑定鼠标移入事件
ulEl.onmouseover = function (e) {
// 判断是否点击的是li元素
if (e.target !== this) {
// 是否有高亮，有就删除
if (activeEl) activeEl.classList.remove("active")
// 给当前移入的元素添加高亮
e.target.classList.add("active")
var spanEl = e.target.firstElementChild
if (spanEl) spanEl.style.transform = `rotate(-180deg)`
// 赋值给下一次需要删除的高亮元素
activeEl = e.target
}
}
ulEl.onclick = function (e) {
// 判断是否点击的是li元素
if (e.target !== this) {
// 是否有高亮，有就删除
if (activeEl) activeEl.classList.remove("active")
// 给当前移入的元素添加高亮
e.target.classList.add("actives")
var spanEl = e.target.firstElementChild
if (spanEl) spanEl.style.transform = `rotate(-180deg)`
// 赋值给下一次需要删除的高亮元素
activeEl = e.target
}
}
// 给li绑定移出事件
ulEl.onmouseout = function (e) {
var spanEl = e.target.firstElementChild
if (e.target.tagName === "LI") {
if (spanEl) spanEl.style.transform = `rotate(0deg)`
}
}

案例三案例三轮播图

<!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;
            box-sizing: border-box;
        }

        ul {
            list-style: none;
        }

        .main_wrapper {
            width: 605px;
            margin: 0 auto;
        }

        .main {
            height: 100px;
        }

        .news-section {
            display: flex;
            height: 342px;
            /* background-color: orange; */
        }

        .news-section .banner {
            width: 605px;
        }

        .news-section .banner .image-list {
            height: 298px;
        }

        .news-section .banner .image-list img {
            border-radius: 2px;
        }

        .news-section .banner .title-list {
            height: 44px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .news-section .banner .title-list li {
            background-color: black;
            height: 44px;
            width: 121px;
            line-height: 44px;
            text-align: center;
        }

        .news-section .banner .title-list li a {
            color: #B1B2BE;
            text-decoration: none;
        }

        .news-section .banner .title-list .active {
            background-color: #383838;
        }

        .news-section .banner .title-list .active a {
            color: #F3C258;
        }
    </style>
</head>

// 获取文字中的ul
var UlTitleList = document.querySelector(".title-list")
// 获取高亮的元素
var ItemActive = document.querySelector(".active")
// 获取图片的内容信息
var UlImgeList = document.querySelector("img")

// 当鼠标移入后要改变什么事件
UlTitleList.onmouseover = function (e) {
if (e.target.parentElement.classList.contains("item")) {
if (ItemActive) ItemActive.classList.remove("active")
// 加上高亮效果
e.target.parentElement.classList.add("active")
ItemActive = e.target.parentElement
setInterval(function(){
},2000)
var index = Array.from(this.children).findIndex(function (item) {
return item === e.target.parentElement
})
UlImgeList.src = `./img/${index + 1}.jpeg`
}
}

案例四案例四侧边栏

<!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>
    .tool-bar{
      position: fixed;
      top: 30%;
      right: 0;

      display: flex;
      flex-direction: column;
      align-items: center;
      width: 35px;
    }
    .item {
      position: relative;
      width: 35px;
      height: 35px;
      margin-bottom: 1px;
      background-color: #7a6e6e;
      border-radius: 3px 0 0 3px;
    }
    .icon {
      display: inline-block;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background-repeat: no-repeat;
      background-size: 50%;
      background-position: 50% 50%;
    }
    .name{
      position: absolute;
      z-index: -1;
      right: 35px;
      top: 0px;
      /* 动态的改变 */
      width: 0;
      height: 35px;
      line-height: 35px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      background-color: #7a6e6e;
      cursor: pointer;
      border-radius: 3px 0 0 3px;
      transition: width 0.2s ease;
    }
    .item:hover,.item:hover .name{
      background-color: #cd1926;
    }

  </style>
</head>
<body>
  <div class="tool-bar">
    <div class="item">
      <i class="icon"></i>
      <div class="name">购物车</div>
    </div>
    <div class="item">
      <i class="icon"></i>
      <div class="name">收藏</div>
    </div>
    <div class="item">
      <i class="icon"></i>
      <div class="name">限时活动</div>
    </div>
    <div class="item">
      <i class="icon"></i>
      <div class="name">大礼包</div>
    </div>
  </div>

var iconlist=document.querySelectorAll(".icon")
for(var i=0;i<iconlist.length;i++){
var icon=iconlist[i]
icon.style.backgroundImage=`url("./img/${i+1}.svg")`
}
var toolBael=document.querySelector(".tool-bar")
console.log(toolBael)
toolBael.οnmοuseοver=function(e){
OnmouseoverAndOnmouseOutAll(e,62,100,1)
}
toolBael.οnmοuseοut=function(e){
OnmouseoverAndOnmouseOutAll(e,0,200,10)
}

function OnmouseoverAndOnmouseOutAll(e,width,height){
// 执行的功能
if(e.target!==e.currentTarget){
// 什么事件改变盒子的宽度
if(e.target.classList.contains("item")){
e.target.children[0].style.width=`${width}px`
e.target.children[0].style.height=`${height}px`
e.target.children[0].style.margin=`${margin}px`

}else{
e.target.parentElement.children[1].style.width=`${width}px`
e.target.parentElement.children[1].style.height=`${height}px`
e.target.parentElement.children[1].style.margin=`${margin}px`
}
}
}