DOM - 随笔分类 - 香香鲲

DOM：多级菜单联动

摘要：菜单联动简单实现三级： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport 阅读全文

posted @ 2022-07-22 22:49 香香鲲阅读(35) 评论(0) 推荐(0)

DOM：滚动时固定导航栏

摘要：简单实现滚动时固定导航栏实例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi 阅读全文

posted @ 2022-07-22 19:52 香香鲲阅读(64) 评论(0) 推荐(0)

BOM操作

摘要：BOM操作了解 1.BOM BOM是browser object model的缩写，简称浏览器对象模型由一系列功能的对象构成，核心对象是window BOM缺乏标准(不过所有浏览器都支持)，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C//一定要记住,BOM不是W3C 阅读全文

posted @ 2022-07-21 20:51 香香鲲阅读(139) 评论(0) 推荐(0)

DOM：缓慢动画

摘要：缓慢动画缓动动画: 匀速改变元素的样式就是匀速动画非匀速的改变元素css样式的动画效果就是缓动动画计算公式：设定值=当前+(目标值-当前)*百分比阅读全文

posted @ 2022-07-21 20:45 香香鲲阅读(101) 评论(0) 推荐(0)

DOM：预加载和懒加载

摘要：预加载和懒加载预加载: 提前加载资源--同源加载的优化懒加载: 先不加载等条件成立时再加载懒加载的意义：懒加载的目的主要是作为服务器前端的优化，减少请求数或延迟请求数。预加载懒加载的区别：一个是提前加载，一个是延迟甚至不加载，懒加载可以缓解服务器对的压力。预加载会增大服务器的压力，比如阅读全文

posted @ 2022-07-21 20:28 香香鲲阅读(161) 评论(0) 推荐(0)

DOM：防抖和节流

摘要：防抖和节流使用场景：抽奖登录动画网络加载等待需要做防抖或者是节流操作 1、什么是防抖首先,先去解释一下什么叫做防抖,在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时 2、什么是节流当持续触发事件时，保证一定时间段内只调用一次事件处理函数。所以节流会稀释函数的执行频率防阅读全文

posted @ 2022-07-21 15:55 香香鲲阅读(60) 评论(0) 推荐(0)

DOM：事件代理

摘要：事件代理网页设计中的一种思想，利用事件对象中引用的目标对象这个技术来实现的无论事件触发时是不是目标对象的监听器在监听器内部的事件对象event中都可以访问这个事件的目标对象,利用这个特点去绑定事件给父级元素来代理子级元素的业务,这种设计就是事件代理。事件代理的优点： 1.可以大量节省内存阅读全文

posted @ 2022-07-21 14:26 香香鲲阅读(51) 评论(0) 推荐(0)

DOM：页面的渲染流程

摘要：页面渲染流程 1.页面呈现过程不同的浏览器略微会有些不同。但基本上都是类似的 ①.浏览器把html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树就是html结构，里面包含了所有的html tag，包括用JS添加的元素。 ② 阅读全文

posted @ 2022-07-20 14:57 香香鲲阅读(301) 评论(0) 推荐(0)

DOM：盒子模型

摘要：盒子模型 el.offsetWidth：本身宽度+边框线+左右内边距； el.offsetHeight：本身高度+边框线+上下内边距； el.offsetTop：相对第一个父级节点有定位属性的上偏移量； el.offsetLeft：相对有定位属性的父节点左偏移量； el.clientWidth：本身阅读全文

posted @ 2022-07-20 11:16 香香鲲阅读(60) 评论(0) 推荐(0)

DOM：事件响应链

摘要：事件响应链 1.事件的三个阶段: 先捕获，后目标，再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发事件经过所有元素都没有被处理,这个事件消失事件传递的过程只跟文档树的结构有关系跟界面显示的层叠效果没有任何关系事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事阅读全文

posted @ 2022-07-20 11:10 香香鲲阅读(53) 评论(0) 推荐(0)

DOM：事件对象

摘要：事件中的this和事件对象 this 1.行内: <button type="button" onclick="fn(this)">xxx</button> <script type="text/javascript"> function fn (e) { console.log(e,this)// 阅读全文

posted @ 2022-07-19 16:31 香香鲲阅读(33) 评论(0) 推荐(0)

DOM：事件类型

摘要：事件类型鼠标事件 onclick 、ondblclick 、onmousedown、onmouseup、onmouseover、 onmousemove、onmouseleave 、onmouseenter、 onmouseout 、onwheel 、onscroll 、onload 1、clic 阅读全文

posted @ 2022-07-19 15:49 香香鲲阅读(188) 评论(0) 推荐(0)

DOM：事件-绑定与解绑

摘要：事件事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能事件的三要素: 1 事件源 2 事件类型（点中，点中不松开，鼠标滚动...） click 3 事件处理程序handler 绑定事件 1.行内绑定方式在标签行内的事件值上写上标志"jav 阅读全文

posted @ 2022-07-19 11:02 香香鲲阅读(119) 评论(0) 推荐(0)

DOM：透明模态弹窗

摘要：简单实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte 阅读全文

posted @ 2022-07-16 17:43 香香鲲阅读(85) 评论(0) 推荐(0)

DOM：JSON数据导入并在网页显示

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2022-07-16 16:03 香香鲲阅读(198) 评论(0) 推荐(0)

DOM：元素的增删改查发、克隆

摘要：对文档树中的节点们可以用js进行增删改查：增： 1、创建元素:这个元素是不会渲染到页面上的,它不在DOM中传入字符串（标签的名字） var box=document.createElement("div") 2、添加到文档树中,x.appendChild(y) 把y节点对象添加到x节点中 bo 阅读全文

posted @ 2022-07-16 10:56 香香鲲阅读(190) 评论(0) 推荐(0)

DOM：信息录入系统

摘要：实现简单的信息录入系统：方案一：简单实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name= 阅读全文

posted @ 2022-07-16 09:35 香香鲲阅读(255) 评论(0) 推荐(0)

DOM：手机底部导航切换效果

摘要：总结了两种方法：方法一： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> </head> <body> <style> 阅读全文

posted @ 2022-07-14 23:25 香香鲲阅读(68) 评论(0) 推荐(1)

DOM：表单登陆验证

摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> </head> <body> <style> #p1, #p2 { vis 阅读全文

posted @ 2022-07-14 21:19 香香鲲阅读(46) 评论(0) 推荐(0)

DOM：点击图片更换背景图片（换肤）

摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> </head> <body>  <style> bo 阅读全文

posted @ 2022-07-14 19:53 香香鲲阅读(317) 评论(0) 推荐(0)

随笔分类 - DOM