DOM事件高级知识

最新推荐文章于 2024-07-16 16:43:05 发布
最新推荐文章于 2024-07-16 16:43:05 发布
阅读量149 收藏 1
点赞数
分类专栏： 学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ybs0211/article/details/108051005
版权

文章目录

1. 注册事件（绑定事件）

1.1 注册事件概述

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式
  • 利用 on 开头的事件onclick
  • <button onclick = "alert('hi~')"></button>
  • btn.onclick = function(){}
  • 特点：注册事件的唯一性
  • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数讲会覆盖前面注册的处理函数。
方法监听注册方式
  • W3c 标准 推荐方式
  • addEventListener() 他是一个方法
  • IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
  • 特点：同一个元素同一个事件可以注册多个监听器
  • 按注册顺序依次执行

1.2 addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener() 方法将指定的监听器注册到eventTarget（目标对象）上，当该对象出发指定的事件时，就会执行事件处理函数。

该方法接受三个参数：

  • type ：事件类型字符串，比如 click、mouseover，注意这里不用带on
  • listener ：事件处理函数，事件发生时，会调用该监听函数
  • useCapture ：可选参数，是一个布尔值，默认是 false。
案例理解
<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }
        // 2. 事件侦听注册事件 addEventListener 
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
        })
    </script>
</body>

1.3 attachEvent 事件监听方式（仅了解即可）

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent() 方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收两个参数：

  • eventNameWithOn ：事件类型字符串，比如 onclick、onmouseover，注意这里需要带on
  • callback ：事件处理函数，当目标出发事件时回调函数被调用
案例理解
<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>
</body>

2. 删除事件（解绑事件）

2.1 删除事件的方式

1. 传统注册方式

eventTarget.onclick = null;

2. 方法监听注册方式

eventTarget.removeEventListener(type, listener[, useCapture]);
eventTarget.detachEvent(eventNameWithOn, callback);

案例理解
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

3. DOM 事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即称为 DOM 事件流。
在这里插入图片描述

  • 事件冒泡：IE 最早提出，事件开始时由最具体的元素接收，然后逐渐向上传播到 DOM 最顶层节点的过程。
  • 事件捕获：网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

注意：

  1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
  2. onclick 和 attachEvent 只能得到冒泡阶段。
  3. addEventListener(type, listener[, useCapture])第三个参数如果时 true，表示在事件捕获阶段调用事件处理程序；如果时false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
  4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
  5. 有些事件是没有冒泡的，比如 onblur、onfocus、
    onmouseenter、onmouseleave
  6. 事件冒泡有时候会带来麻烦，有时候也会帮助很巧妙的做某些事件。
案例理解(重要)
<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  
        // document -> html -> body -> father -> son
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

4. 事件对象

4.1 什么是事件对象

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click',function(event){})
// 这个 event 就是事件对象，我们也可以写成 e 或者 evt

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

比如：

  1. 谁绑定了这个事件。
  2. 鼠标出发事件的话，会得到鼠标的相关信息，如鼠标位置。
  3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

4.2 事件对象的使用语法

eventTarget.onclick = function(event){
	// 这个 event 就是事件对象，我们也可以写成 e 或者 evt
}
eventTarget.addEventListener('click',function(event){
	// 这个 event 就是事件对象，我们也可以写成 e 或者 evt
})

注意：
这个 event 是形参，系统帮我们设定为事件对象，不需要传递实参过去。

当我们注册事件时，event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

4.3 事件对象的兼容性方案

事件对象本身的获取存在兼容性问题：
1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。

2.在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

解决：

e = e || window.event;

4.4 事件对象的常见属性和方法

在这里插入图片描述

案例理解(重要)

返回触发对象

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);
        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);
                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);
            })
            // 了解兼容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    </script>
</body>

阻止默认行为

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
        })
        // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>
</body>

5. 阻止事件冒泡

5.1 阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到 DOM 最顶层节点。

阻止事件冒泡

  • 标准写法：利用事件对象里面的 stopPropagation() 方法

e.stopPropagation()

  • 非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

6. 事件委托（代理、委派）

事件委托的原理(重点)

不需要给每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。

事件委托的作用

我们只操作了一次 DOM ，提高了程序的性能。

案例理解
<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            // e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

7. 常用的鼠标事件

7.1 鼠标事件

在这里插入图片描述
1.禁止鼠标右键菜单

contextmenu 主要控制应该如何显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e){
	e.preventDefault();
})

2.禁止鼠标选中(selectstart 开始选中)

document.addEventListener('selectstart',function(e){
	e.preventDefault();
})

7.2 鼠标事件对象

event 对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyBoardEvent。
在这里插入图片描述

案例理解
	<script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>
跟随鼠标移动的天使案例
	<style>
        img {
            position: absolute;
            top: 2px;
        }
    </style>
</head>
<body>
    <img src="img/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            // 1. mousemove 只要我们的鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标，
            //   把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是:'+ x + 'y坐标是:' + y);
            // 3.千万不要忘记给 left 和 top 添加 px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
        })
    </script>
</body>

8. 常用的键盘事件

8.1 常用的键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。
在这里插入图片描述
注意：

  1. 如果使用 addEventListener 就不需要加 on
  2. onkeypress 和见面两个的区别是，它不识别功能键，比如左右箭头，shift等
  3. 三个事件的执行顺序时：keydown – keypress — keyup
案例理解
<body>
    <script>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        // document.onkeyup = function() {
        //         console.log('我弹起了');
        //     }
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })
        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
            console.log('我按下了press');
        })
        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
            console.log('我按下了down');
        })
        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </script>
</body>

8.2 键盘事件对象

在这里插入图片描述
注意：
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

模拟京东按键输入内容
<body>
    <input type="text">
    <script>
        // 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
        // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
        // 搜索框获得焦点： 使用 js 里面的 focus() 方法
        var search = document.querySelector('input');
        document.addEventListener('keyup',function(e){
            console.log(e.keyCode);
            if(e.keyCode === 83){
                search.focus();
            }
        })
    </script>
</body>
模拟单号查询案例
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        // 如果用keydown 或者 keypress会出现问题，keydown按下时执行代码，但是字还没有输入到文本框内，keypress使用功能键会失效
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup',function(e){
            if(this.value == ''){
                con.style.display = 'none';
            }else{
                con.style.display = 'block';
                con.innerHTML = this.value;
            }
        })
        // 当我们失去焦点，就隐藏这个 con 盒子
        jd_input.addEventListener('blur',function(){
            con.style.display = 'none';
        })
        // 当我们获得焦点，就隐藏这个 con 盒子
        jd_input.addEventListener('focus',function(){
            if(this.value !== ''){
                con.style.display = 'block';
            }
        })
    </script>
</body>
三水沐吖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习（881）：阻止事件冒泡
歌谣的博客
04-17 182
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
Javascript中事件，事件流以及阻止事件冒泡的详解
weixin_44465584的博客
03-07 574
1.什么事件？什么是事件流 ？事件流的出现? 一.什么是事件？ 事件是文档或者浏览器窗口中发生的，特定的交互瞬间。 事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之间交互的桥梁。你若触发，我便执行——事件发生，调用它的处理函数执行相应的 JavaScript代码给出响应。典型的例子有：页面加载完毕触发...
javascript 事件冒泡及其阻止方法
友人C君的博客
03-04 728
什么是JS事件冒泡？： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 什么时候阻止事件冒泡...
理解DOM事件流的三个阶段
weixin_34365635的博客
02-20 788
本文主要解决两个问题： 什么是事件流 DOM事件流的三个阶段 起因 在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。在寒假深入学习JavaScript时，愈发觉得自己对DOM事件了解不够，遂打开我的《JavaScript高级程序设计》，翻到DOM事件那一章，开始第二次学习之旅。当然，DOM事件...
DOM事件的三个阶段及阻止事件冒泡
weixin_42442123的博客
11-06 1070
事件的三个阶段 捕获阶段 当前目标阶段 冒泡阶段 JS中注册事件的三种方式： onclick只有事件冒泡， attachEvent只有两个参数， 只有事件冒泡， addEventListener三个参数，最后一个参数默认false为事件冒泡，true为事件捕获。所以demo用的addEventListener这个方式 事件冒泡 html部分 &amp;lt;div id=&quot;box1&quot; style=...
JavaScript—DOM 高级事件知识内容整理
weixin_52984349的博客
08-25 223
JavaScript—DOM 高级事件知识内容整理
XML DOM 高级
奋斗的日子最甜美，在科技的海洋里，永无止境。
11-30 320
XML DOM 高级 XML DOM - 高级 在本教程的较早章节中，我们介绍了 XML DOM，并使用了 XML DOM 的 getElementsByTagName() 方法从 XML 文档中取回数据。 在本章中我们将结合一些其他重要的 XML DOM 方法。 您可以在我们的 XML DOM 教程 中学习更多有关 XML DOM 的知识。 获取元素的值
java高级知识点_JAVA高级阶段知识点汇总
weixin_34474777的博客
02-12 1562
一、集合框架和泛型1.定义集合框架用于存储一组长度不定的元素。2.常用的接口和类接口：Collection、List、Set、Map、Iterator类：ArrayList、LinkedList、HashSet、HashMapList接口和Set接口均继承自Collection接口。3.使用特点List：存储的元素不唯一、有序。Set：存储的元素唯一、无序。Map：元素以键值对的方式进行存储。4....
dom 事件冒泡、捕获 dom事件三个阶段
g291976422的博客
03-21 1485
本文主要解决两个问题： 什么是事件流 DOM事件流的三个阶段 起因 温故了一下我的《JavaScript高级程序设计》的时候，翻到DOM事件那一章，（说实话，现在无论是什么框架你都离不开操作DOM啊，毕竟这是你展示的最基本元素，就像人的细胞）。想起了dom事件流原理，好多人不明白，只知道click mouseout等实用场景，真要理解和更进一步的前端是要必须：理论+实践 并行的。 当然，DOM事件...
javascript DOM高级程序设计源码
04-22
《JavaScript DOM高级程序设计》是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍。这本书的源码提供了一种实践的方式，帮助读者更好地理解书中的理论知识，并且能够亲手实现书中提到的各种...
javascript DOM 操作基础知识小结
12-11
除了基本的节点操作，DOM还提供了更多高级功能，如选择器API（querySelector、querySelectorAll）、事件处理（addEventListener、removeEventListener）、遍历树（parentNode、childNodes、nextElementSibling等）和...
JavaScriptDOM高级程序设计
02-26
总的来说，掌握JavaScript DOM高级程序设计意味着你能够构建动态、交互性强的网页应用，理解和熟练运用这些知识对于任何前端开发者来说都是必备的。通过不断实践和学习，你可以进一步提升在DOM操作方面的技能，为...
JS中DOM元素的操作等基础知识笔记
01-08
【DOM高级操作】 高级操作包括遍历DOM树、事件监听、动画效果等。例如，通过`addEventListener`添加事件监听，通过改变样式属性实现动画效果。此外，还有涉及到文档片段（DocumentFragment）的批量操作，以提高性能...
JS DOM pink教程源码
08-13
总结起来，JS DOM教程源码涵盖了JavaScript对HTML文档进行操作的基础知识，包括元素选取、节点操作、属性管理、事件处理和样式控制等方面。通过学习和实践这些源码，开发者能够熟练地控制网页动态行为，打造更具交互...
更新商品前端接口编写
weixin_55639995的博客
07-12 413
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 761
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 538
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
最新发布
uu0216的博客
07-16 534
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 316
解决页面放大，图片模糊的问题
JavaScript DOM高级编程学习资源大全
"javascript.dom高级程序设计" 在深入探讨JavaScript DOM（文档对象模型）高级程序设计之前，首先要明白JavaScript是Web开发中的主要脚本语言，它允许我们与网页的各个元素进行交互。DOM作为HTML和XML文档的结构化...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值