![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
涵。
这个作者很懒,什么都没留下…
展开
-
HTML拖拽
拖拽的流程:鼠标按下(mousedown)→鼠标移动(mousemove)→鼠标松开(moveup)原创 2023-08-01 09:53:14 · 928 阅读 · 0 评论 -
使用unocss进行css原子化开发
【代码】使用unocss进行css原子化开发。原创 2023-03-07 12:03:12 · 721 阅读 · 0 评论 -
jsPlumb画布缩放
想实现画布缩放,但是激活元素时位置一直不对,然后一行代码解决了。原创 2022-11-24 15:16:04 · 1116 阅读 · 0 评论 -
画布拖拽实现
【代码】画布拖拽实现。原创 2022-11-24 10:25:58 · 488 阅读 · 0 评论 -
display、visibility、opacity的区别
来隐藏元素,但是在实际使用中会有问题。原创 2022-11-15 16:24:29 · 415 阅读 · 0 评论 -
js高级程序设计学习
http头部只有以下字段:Accept、Accept-language、content-type、content-language、Last-Event-Id。3、预检请求通过后,就会发出正常的http请求,通过预检请求后的请求会带上origin字段。2、服务器收到预检请求以后,确认允许跨源请求,就可以做出回应。1、复杂请求会在正式通信之前进行一次预检请求。请求方式为:get、post、head。原创 2022-10-07 19:23:13 · 583 阅读 · 0 评论 -
ajax fetch和axios的区别
使用js执行异步网络请求,而不需要刷新整个页面,ajax使用XMLHttpRequest对象取得新数据。原创 2022-10-03 21:22:41 · 79 阅读 · 0 评论 -
js运行机制与线程
如果在一个线程中对DOM元素进行了某些操作,在另一个线程中又删除了该DOM元素,那么就会产生冲突ajax可以实现局部刷新,并且在请求处理时仍然可以响应用户操作浏览器是多进程的,没打开一个页面,就会新增一个进程,浏览器会给新增页签分配内存和cpu:1、浏览器进程2、GPU进程3、渲染进程4、插件进程5、网络进程:1、GUI渲染线程:与js引擎互斥,当执行js引擎线程时,GUI会pending,当任务队列空闲时才会继续执行。原创 2022-10-03 20:23:43 · 767 阅读 · 0 评论 -
自适应布局踩坑
当进行页面缩放时,不同块之间是保持一样的比例进行缩放的,也就是之前页面能显示三个模块,而采用em进行放缩可能在第一框视图只能显示两个模块,但是采用vh三个模块都能显示,并且仍旧按照之前的比例。我们通常会遇到这样一个场景,头部或底部元素高度不确定,中间内容的高度也不确定,这时如果不加以设置,那么内容可能会超出容器大小,或者容器的大小会发生变化。设置这三种值会发生什么,当我们放大页面时,由于设置的高度为固定大小,那么页面是放不下的,页面会出现滚动条,而我们希望的是它能进行局部滚动。设置为vw、vh的好处?原创 2022-09-07 11:07:27 · 230 阅读 · 0 评论 -
Element-plus样式穿透踩坑
解决办法:在元素外层添加div,添加类名select,使用select :deep()进行样式穿透。希望使用:deep()进行样式穿透,但是直接使用没有效果。原创 2022-09-06 10:05:14 · 1254 阅读 · 0 评论 -
Nuxt+vue3+Element-plus+TypeScript
进公司实习一段时间了,想用学到的东西进行独立开发,踩坑不少,做个总结。原创 2022-08-08 15:37:32 · 1149 阅读 · 1 评论 -
Reflect中的方法
Reflect与Object中的方法类似,vue3采用proxy和reflect实现的双向绑定,因此,就学习一下Reflect中的方法,加深理解。原创 2022-08-04 10:48:59 · 168 阅读 · 0 评论 -
Nuxt3学习
配置pages文件,nuxt会自动创建路径的映射关系。原创 2022-07-29 09:49:22 · 592 阅读 · 0 评论 -
ES6中的Generator函数
前言:笔试题碰到个yield搞懵了,现在来看看是什么http://www.ruanyifeng.com/blog/2015/04/generator.html函数前面加*号表示可以暂停执行function *gen(x){ var y=yield x+2 return y}var g=gen(1)g.next() // {value:3 , done:false }g.next() // {value:undefined , done:tue }g.next(2) // 可以将参数作.原创 2022-05-17 19:18:15 · 53 阅读 · 0 评论 -
数据结构与算法
1 栈先进后出1.1 栈的操作push:添加一个元素到栈顶pop:移除栈顶元素,同时返回被移除的元素peek:返回栈顶元素isEmpty:如果栈没有任何元素就返回truesize:栈元素的个数toString:将栈结构内容以字符串形式返回1.2 栈结构的实现function Stack(){ this.items=[] Stack.prototype.push=function(element){ this,items.push(element) } Stack.protot原创 2022-04-26 22:26:19 · 1454 阅读 · 0 评论 -
cookie实现登录功能
本文来自于以下链接https://www.cnblogs.com/theflight/p/13472667.html1 如何设置cookiedocument.cookie='name=xie'//设置cookie的过期时间,这里设置为7天let data=new Date().getTime()let new_data=new Date(data+7*24*60*60*1000)document.cookie='name=xie;'+'expires='+new_data.toUTCStr.原创 2022-04-11 14:05:19 · 2374 阅读 · 0 评论 -
使用element-ui按需引入资源
因为按需引入组件有很多,如果全部放在main.js文件中就不太好看,所以对其单独封装1 按需引入import {Container} from 'element-ui'export default{ components:[ Container ]}2 注册全局组件import Vue from 'vue'import Element from './Element'Element.components.forEach(item=>{Vue.use(item)})原创 2022-04-09 20:02:12 · 1168 阅读 · 0 评论 -
浏览器DOM API
来源于以下链接,这里仅供个人复习使用前端面试每日一题:https://q.shanyue.tech/一本正经前端面试清单: http://huasenjio.top/article/interview1、cookiecookie是服务器保存在浏览器的一小段文本信息,浏览器在向服务器发送请求时会自动附上这段信息。常用场合:对话管理:保存登录、购物车等需要记录的信息个性化:保存用户偏好,浏览器字体大小、背景色追踪:记录和分析用户行为注:cookie不可跨域,即每个cookie都绑定单一原创 2022-03-23 14:25:48 · 201 阅读 · 0 评论 -
Grid布局
写在父盒子上(1)grid-template-columns:100px auto 100pxrepeat(3,1fr)repeat(auto-fill,100px)minmax(150px,1fr)//网格线grid-template-columns:[c1] 100px [c2] 100px [c3] 100px [c4](2)grid-template-rows(3)row-gap/column-gap:间距(4)grid-template-areas:'a b c' 'd e原创 2022-03-22 11:08:11 · 61 阅读 · 0 评论 -
Flex布局
布局原理当父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效给父盒子添加的属性(1)flex-direction:设置主轴方向row:从左向右row-reverse:从右向左column:从上向下column-reverse:从下向上(2)justify-content:设置主轴上的子元素排列方式flex-start:从主轴头部开始flex-end:从主轴尾部开始center:在主轴居中对齐space-around:平分剩余空间spa原创 2022-03-21 20:37:39 · 183 阅读 · 0 评论 -
Ajax学习
1 原生请求步骤(1)创建XMLHttpRequest对象(2)准备发送:open()包含三个参数:method:get/posturl:链接的php文件(3)发送请求:send()get请求send()为空(4)监听函数xhr.onreadystatechange2 Readystate状态码(1)0表示为创建完对象(2)1表示准备发送请求(3)2表示服务器接收请求(4)3表示服务器处理请求(5)4表示服务器处理完毕,响应数据http协议状态码:xhr.status2XX原创 2021-12-28 22:34:48 · 259 阅读 · 0 评论 -
Bootstrap的组件
1 字体图标结构采用span来写注意:为避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容,设置了 aria-hidden=“true”2 下拉菜单需要和js配合才能实现功能dropdown类表示该容器会形成一个下拉菜单组件第一步:设置按钮类为dropdown-toggle第二步:data-toggle设置为dropdown第三步:下拉菜单中ul设置类为dropdown-menu实现分割效果:设置class=divider标题设置:在对应的li中添加类dropdown-header禁原创 2021-12-10 10:53:46 · 134 阅读 · 0 评论 -
Bootstrap的CSS样式
1 布局(1)container类能够实现响应式(2)contain-fluid类宽度始终为100%2 栅格系统(1)col-xs-1:手机(2)col-sm-1:平板(3)col-md-1:PC列偏移:col-md-offset-13 无样式列表(1)list-unstyled:去掉ul默认样式(2)list-inline:将ul子元素放于同一行4 表格类给table添加的类:(1)table:表格基础类(2)table-striped:隔行变色(3)table-hove原创 2021-12-08 11:13:15 · 2028 阅读 · 0 评论 -
JS对象与JSON字符串的转换
(1)parse方法将JSON字符串转换为JS对象(2)stringify方法将JS对象转换为JSON字符串原创 2021-09-07 20:24:29 · 67 阅读 · 0 评论 -
贪婪模式和懒惰模式
(1)贪婪模式:如果正则表达式中有表示数量的特殊符号,在匹配时会尽可能多的匹配字符.匹配任意字符 匹配前一个字符0次或无限次默认*.***是贪婪模式(2)懒惰模式:如果正则表达式中有表示数量的特殊符号,在匹配时会尽可能少的匹配字符.+? +表示匹配前一个字符1次或无限次.*? 非贪婪模式...原创 2021-09-07 16:23:04 · 188 阅读 · 0 评论 -
正则表达式
1、字面量形式创建正则表达式var 正则表达式名称=/表达式内容/修饰符修饰符:i表示不区分大小写2、利用构造方法创建正则表达式var 正则表达式名称=new RegExp(‘表达式内容’,‘修饰符’)3、test方法用于判断字符串是否符合正则表达式格式要求^:表示以某个字符开头:表示以某个字符结尾既有又有:表示以某个字符结尾既有^又有:表示以某个字符结尾既有又有则无论是内容还是字符的个数都要匹配*:表示前面的字符个数为0~∞+:表示前面的字符个数为1~∞?:表示前面的字符个数为0~原创 2021-09-06 20:08:36 · 142 阅读 · 0 评论 -
扩展函数的作用域
(1)apply函数.call(借用者,参数1,参数2,…)(2)call函数.apply(借用者,[参数1,参数2,…])原创 2021-09-06 19:39:50 · 57 阅读 · 0 评论 -
文档碎片:documentFragment
documentFragment是nodeType值为11,nodeName的值为#document-fragment将创建的节点都放在DocumentFragment的节点上,然后把DocumentFragment加入至DOM,只需要完成一次渲染就可以达到之前很多次渲染的效果原创 2021-09-06 19:25:13 · 172 阅读 · 0 评论 -
浏览器性能优化:回流(重排)与重绘
(1)回流(重排)当render tree的一部分因为元素的规模尺寸、布局和隐藏等改变而需要重新构建,这就称为回流。(2)重绘当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局...原创 2021-09-06 18:52:49 · 61 阅读 · 0 评论 -
script属性
1、defer属性等待DOM加载完毕后执行2、async属性DOM加载和js脚本加载异步执行,同时进行原创 2021-09-06 11:48:13 · 88 阅读 · 0 评论 -
window尺寸属性
(1)outerHeight属性:设置或返回一个窗口的外部高度,包括所有界面元素(包含边框)(2)outerWidth属性:设置或返回一个窗口的外部宽度,包括所有界面元素(包含边框)(3)innerHeight:返回窗口的文档显示区的高度(4)innerWidth:返回窗口的文档显示区的宽度...原创 2021-09-06 11:35:22 · 66 阅读 · 0 评论 -
window对象:三级联动
通过select选择内容,使得三个select内容相对应。如图所示首先对页面进行布局<select name="province" id="province"><option value="">请选择</option></select> <span>省</span> <select name="city" id="city"><option value="">请选择</option&g原创 2021-09-06 10:16:25 · 58 阅读 · 0 评论 -
document.documentElement和document.body的区别
document.documentElement返回的是html根节点document.body返回html的获取页面对象兼容写法:var obj=document.documentElement || document.body原创 2021-08-21 20:31:41 · 133 阅读 · 0 评论 -
js操作总结2
1、滚动事件(1)scroll事件:滚动条滚动时触发(2)scrollTop属性:用来设置或获取拉动滚动条时被卷去内容的高度(3)scrollLeft属性:用来设置或获取拉动滚动条时被卷去内容的宽度2、移动端事件(1)touchstart事件:当手指触摸到屏幕或指定元素时触发(2)touchmove事件:当手指在屏幕或指定元素上移动时触发(3)touchend事件:当手指在屏幕或指定元素上离开时触发(4)touchcancel事件:当触摸点被中断时会触发(5)touches:存放触摸点的集原创 2021-08-19 20:32:02 · 58 阅读 · 0 评论 -
js操作总结
1、获取兄弟元素的前后元素/*同级元素的前一个元素*/previousElementSibling/*同级元素的后一个元素*/nextElementSibling2、将字符串转化为整数parseInt()原创 2021-08-18 09:04:39 · 108 阅读 · 0 评论 -
解决marin-top父元素随子元素一起移动
当给子元素设置margin-top时,显示结果父元素也随子元素移动解决办法:法一:/*给父元素设置溢出隐藏*/overflow:hidden;法二:/*给父元素设置border*/border:1px solid #fff;法三:/*父元素或子元素浮动*/float:left;...原创 2021-08-17 14:51:41 · 110 阅读 · 0 评论 -
块级元素水平居中
通常使用margin:0 auto;但是也可通过弹性盒实现,给父元素添加弹性盒并设置justify-content,就能实现子元素水平居中 display: flex; justify-content: center;原创 2021-08-15 10:40:17 · 57 阅读 · 0 评论 -
前端CSS基础设置
CSS基础设置*{margin:0;padding:0;}a{text–decoration:none;{}li{line–style:none;}原创 2021-08-09 22:05:51 · 48 阅读 · 0 评论 -
移动端三栏布局问题
在web开发中,我们常用float使导航栏元素处于同一行,但是在移动端中,要使用弹性盒来处理设置父盒子属性开启弹性盒,子元素默认水平排列,子元素宽度默认由内容撑开display:flex;对于两端存在固定宽度子元素,中间盒子在没有内容填充的情况下,可通过在子元素中设置flex-grow瓜分父盒子剩余宽度/*表示将父盒子剩余宽度分成1份给子元素*/flex-grow:1;...原创 2021-08-15 10:19:56 · 145 阅读 · 0 评论 -
前端空隙问题
img、input、button之间存在白色空隙是由于其为inline-block,行内块元素会识别代码之间的空隙,将其转化为block元素即可原创 2021-08-14 19:47:20 · 108 阅读 · 0 评论