- 博客(23)
- 收藏
- 关注
RSS订阅原创 20javascript6 函数
1闭包函数概念：一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域 闭包=内层函数+外层函数的变量作用：封闭数据，提供操作，外部也可以访问函数内部的变量function outer(){ let a=10; // return 匿名函数 return function(){ console.log(a); }}let fn= outer()// 闭包其他形式代码function outer(){ let a= 10; // 新
2022-06-01 19:24:27
182
原创 19重绘和回流以及浏览器渲染
回流（重排）当render tree中部分或者全部元素的尺寸，解构，布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。会导致回流的操作：页面首次刷新浏览器窗口大小发生改变，元素的大小或位置发生改变改变字体的大小内容的变化（如：input框输入，图片的大小）激活css伪类（如：：hover）脚本操作DOM（添加或者删除可见的DOM元素）只要影响到布局了，就会有回流。重绘由于节点元素的样式的改变并不影响它在文档流中的位置和文档布局时（比如：color，
2022-05-22 19:28:18
150
原创 17javascript5事件对象以及冒泡捕获
1事件对象事件绑定的回调函数的第一个参数就是事件对象，一般命名为event，ev,eEvent 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。什么时候会产生事件Event对象呢？当用户单击某个元素的时候，我们给这个元素注册的事件就会触发，该事件本身是一个函数，而该函数的形参接收一个event对象，事件通常与函数结合使用，函数不会在事件发生前被执行。 const input = document.querySelector('[type
2022-05-22 19:27:19
161
原创 16javascript4其他事件
1页面加载事件事件名：load用于加载外部资源，如图片，外联css和javascript 加载完毕时触发的事件1.1监听页面所有资源加载完毕：给window添加load事件window.addEventListener('load',function(){//执行的操作})1.2监听页面DOM加载完毕：给document添加DOMContentLoaded事件当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无序等待样式表，图像等全
2022-05-22 19:26:40
537
原创 14JavaScript2
1事件监听事件是在编程时系统内发生的动作或者发生的事情，事件监听，就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出相应，也成为绑定事件或者注册事件。注册事件方法1：格式： 元素对象.addEventListener('事件类型'，要执行的函数)事件监听三要素：事件源（谁被触发了）事件类型（用什么方式触发）事件处理程序（要做什么事情）案例：随机点名案例<div class="btns"> <button clas..
2022-05-18 21:11:39
251
原创 13定时器setInterval案例
1setInterval作用setInterval(函数，间隔时间) 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数，用来停止对应setInterval的运行。在做轮播图，或者间隔一段时间需要重复运行的代码中需要使用。2使用方法返回值 = setInterval(函数，间隔时间) （默认间隔时间单位是毫秒）停止这个函数 clearInterval(返回值)
2022-05-11 11:45:00
319
原创 12获取dom元素
1什么是DOM（Document Object Model-文档对象模型）是用来呈现以及与仁义HTML或XML文档交互的API，DOM是浏览器提供的一套专门用来操作网页内容的功能。DOM对象：浏览器
2022-05-10 20:17:41
849
原创 11.flex布局解决浮动布局脱标问题
<!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>Dm.
2022-05-07 15:23:27
346
原创 10重学javascript1
1javascript变量的命名规则和规范 变量名区分大小写（y 和 Y 是不同的变量） 变量名包含字母、数字、美元符号（$）和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；变量也能以 $ 和 _ 符号开头（不过不推荐这么做） 禁止使用JavaScript关键词、保留字命名 当变量名是由两个或多个单词构成时，可以采用驼峰命名法。一般采用小驼峰命名法。 驼峰命名有两种形式： 小驼峰式命名法（lower camel case）：第一个单字以小写字母开始；
2022-05-06 21:56:02
94
原创 6响应式布局
1什么是响应式布局1.1.网页可以根据不同的设备或窗口大小呈现出不同的效果1.2.使用响应式布局可以使一个网页适配所有设备1.3.响应式布局的关键就是媒体查询1.4.通过媒体查询可以为不同的设备、设备的 不同状态来分别设置样式。案例1：通过媒体查询，控制不同视口宽度时的盒子大小<style> /* 当视口宽度大于500px时，才会生效*/ @media(min-width:500px) { .box { width: 200p
2022-04-28 20:57:17
185
原创 5.flex布局小结
1什么是flex布局Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。...
2022-04-26 23:45:00
199
原创 3开门大吉案例多种做法
<!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>...
2022-04-25 10:56:45
135
原创 1字体图标和平面转换
字体图标的使用本质上还是文字但是展示的是图标1.1优点1.灵活随机改变图标颜色和图标尺寸2.轻量化 体积小 渲染快3.兼容性好1.2使用方法（unicode的方法）1.引入样式表iconfont.css<link rel="stylesheet" href="./fonts/iconfont.css">2.复制粘贴图标对应的unicode编码到标签内3.设置文字字体 span {font-family：‘iconfont’；}iconf
2022-04-21 14:27:56
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人