前端总结
关注
分享
扫一扫
文章平均质量分 69
Html,CSS,JS,Jquery等前端内容，根据自己项目需求，总结解决办法，记录踩过的坑，供以后查询
韦_恩
【知乎：韦恩少爷】
1.测绘硕士研究生毕业、注册测绘师、软件设计师；
2.擅长C#/.Net、Android、Java、Vue、JavaScript、CAD、ArcGis等主流开发技术栈；
3.不定期分享技术干货（踩坑记录）与日常电脑使用技巧；
【流水不争先，争的是滔滔不绝】
展开
-
JS深拷贝与浅拷贝（附带通用深拷贝function方法）
所谓深拷贝与浅拷贝，乍一听我也蒙了，仔细一看其实就是C#中值类型复制和引用类型复制的区别。深拷贝就是引用类型复制时不仅仅将引用复制，同时还将数据复制了一份，从而得到了liang'gen原创 2021-05-31 14:30:33 · 1125 阅读 · 0 评论 -
js中获取html元素之document.documentElement
document.documentElementDocument.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。对于任何非空 HTML 文档，调用 document.documentElement 总是会返回一个 <html> 元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。参考文档html中document.body 与 document.d原创 2021-05-18 16:05:09 · 17677 阅读 · 0 评论 -
js中获取dom元素高度
目录1.dom元素的宽高2.鼠标事件中的常用高度宽度：3. 总结：4.参考博客：1.dom元素的宽高javascript中获取dom元素高度和宽度的方法如下：网页可视区域宽： document.body.clientWidth网页可视区域高： document.body.clientHeight网页可视区域宽： document.body.offsetWidth (包括边线的宽)网页可视区域高： document.body.offsetHeight (包括边线的高)网页正文全原创 2021-05-18 15:53:43 · 23259 阅读 · 0 评论 -
闭包--没有那么复杂！
一弄JS，就总有人在提闭包、闭包的，此前不了解，上网上搜，很多讲的也过于难懂，感觉没有必要那么复杂，今天就把我对于闭包的理解总结一下，力求简单、通俗、易懂目录1.什么是闭包2.闭包有什么用？3.闭包带来了什么问题呢？4.总结1.什么是闭包通俗的理解就是:子函数使用着父函数作用域内的变量，导致父函数作用域内的变量无法回收释放的这种情况。<script>function a(){ let num=0; return ()=>{ ..原创 2021-04-19 16:34:10 · 661 阅读 · 10 评论 -
JavaScript的事件循环机制学习总结（宏任务微任务）
JS事件循环机制即使你不知道，理论上讲也不影响写代码，但是你知道了的话会更加清楚的明白为什么要这么做，同时也为你更加深入的学习打下基础，最关键的是面试火箭型题目爱问。在查阅了几个大佬的文章后对这个问题也有了一定的认识，因此总结一下，力求采用全面且通俗易懂的方式让大家明白。目录1.线程与进程2.浏览器内核（浏览器渲染进程）3.事件循环机制4.宏任务队列与微任务队列5.示例代码：6.事件循环机制总结7.参考内容1.线程与进程启动程序时，系统会在内存中创建一个新的进程。.原创 2021-04-18 17:36:01 · 328 阅读 · 2 评论 -
快速上手正则表达式RegularExpression（正则表达式常用笔记整理）
背景： 在学习JavaScript的时候，接触到了正则表达式，以前写C#的时候光知道但是并没有总结如何自己写，也没有研究正则表达时候具体如何应用（毕竟网上一搜一大堆），今天就这个问题我还是写一篇博客总结一下，针对正则表达式常用概念、写法以及应用进行简单汇总，避免后面忘记。目录1.基本概念2.正则选项3.正则转义4.常用方法5.谓语（修饰符）6.正则量词（指定数量）7.元字符[ ]8.实例练习9.总结1.基本概念正则表达式归根到底就是一...原创 2021-03-21 00:04:17 · 619 阅读 · 0 评论 -
CSS属性box-sizing:border-box 用法
响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margins）.假设所有的列都需要4%的外边距，我们需要为所有的外边距保留20%（4%*5（5列）=20%）的占宽比；然后我们从总宽比（100%）里面减去20%，得到的就转载 2021-03-04 19:35:18 · 3628 阅读 · 2 评论 -
HTML5点击文字label同时选中checkbox（在span 标签内设置什么属性能使复选框选中）
方法1 ：将input和label放在同一个标签p中同时lable的for属性的值等于input的id属性值就可以实现点击label同时控制input 。<input type="checkbox" id="c2"><label for="c2">内容2</label>方法2：abel联动checkbox时，若label包含在checkbox外层时label不需for属性，设置label的display属性为block时可以使整个div联动。原创 2021-02-23 14:27:57 · 1692 阅读 · 0 评论 -
深入理解js_for循环条件中使用var为什么会出问题？（js块级作用域理解）
初学JavaScript时，都会听前辈建议不要用var声明变量，es6以后要用let，道理是啥也没当回事，直到for循环时候才发现循环条件for(var i=0;i<arr.length;i++)中的i是一个i，这就导致做点击事件的时候，无论谁点击，结果i都是退出循环后最终的i固定不变。其实这个问题在C#中压根不是问题........最后查了下，再加上技术群大佬们的指点，终于理解了原因。接下来就举例子给大家详细说明下。开门见山，先说核心结论。若不理解请继续往后读，相信读完全文再回头看你一定会深有体原创 2021-02-22 10:14:49 · 6938 阅读 · 18 评论 -
js事件源this（javascript中点击事件传入this的用法）
在script中有几种绑定事件的方法，有的在绑定函数中传入this参数，有的没有，那么，它们之间到底有什么区别呢？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action="/index.html" method="pos转载 2021-02-21 15:31:09 · 1849 阅读 · 0 评论 -
利用CSS与JS实现登录框与遮罩层屏幕居中（CSSposition定位分类总结）
position 属性指定了元素的定位类型。position 属性的五个值：static，relative，fixed，absolute，sticky今天想巩固下js基础，从头写一个登录，却发现CSS样式定位没有搞清楚（以前都用的ui框架），emm......只能先了解下再来记录，下文呢就先对定位进行说明，随后给出利用JS和CSS写登录框及遮罩层的代码样例。目录1.static 定位2.fixed 定位3.relative 定位4.absolute 定位5.sticky ...原创 2021-01-30 09:40:22 · 912 阅读 · 2 评论 -
CSS去除input和button默认黑色边框
今天在练习用纯JS写登录页面的时候遇到了样式问题，就是我设置边框是青色的，但是鼠标悬浮、和鼠标点击时候竟然多出了一个难看的黑色边框，以前都是用各种UI框架，从不会出现这个问题。经查才发现竟然有个CSS属性较outline。简单记录下方便下回用。具体如下图：1.问题描述图2.问题解决办法加上outline:none...原创 2021-01-29 23:30:26 · 5686 阅读 · 0 评论 -
vscode中自定义Vue3.x与Vue2.x用户片段模板
目录1.创建代码片段步骤2.Vue3代码片段模板3.Vue2代码片段模板4.语法说明1.创建代码片段步骤文件--->首选项--->用户片段，如下如所示之后就可以进入自定义代码片段界面，输入该片段名字（这个名字仅仅是区分不同代码片段的，并不是快捷键prefix前缀）下面给出vue2和vue3代码片段，直接复制粘贴就可以。2.Vue3代码片段模板{ "Print to console": { "prefix": "vuecli3", "body":原创 2021-01-23 15:48:52 · 2482 阅读 · 0 评论 -
通过浏览器Request Method:OPTIONS探索CORS跨域问题
事情是这样的，今天在做登录练习的时候F12查看Network，发现有两个login（如下图所示），可我明明就请求了一次啊？经过我网上研究学习才知道这是cors跨域浏览器触发options预检请求才导致的。接下来就对整体进行总结说明。目录1.现象分析2.CORS跨域2.1简单跨域请求2.2复杂跨域请求3.总结1.现象分析我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求，请看下图：.原创 2021-01-15 11:49:39 · 1994 阅读 · 1 评论 -
Vue动态加载ECharts图表数据小结
刚接触echarts只是知道他能辅助前端做数据展示，但是他的demo数据都是写死的，而正常数据都是通过axios请求服务器动态填充获取的啊，为此还一顿研究.....（真是傻了）。因为它本身是很简单的，echarts就是通过option进行无脑堆叠的，option本身就是json，你可以随意设置，设置好了之后重新刷新就行了啊。。。。。。。。。。下面简单说一下我的程序吧。动态数据基本分三步：①在data中定义空的option：{}②在created中为option图表设置赋值（数据项可为null）.原创 2020-12-30 16:55:30 · 5204 阅读 · 4 评论 -
CSS设置 background-image透明度小技巧
在做数据总览得时候看到网上示例在div容器里加背景图还能，感觉大气又不单调，就想给自己得项目也尝试下，先来看看我想达到的样子（网上看到的）：网图不清楚没办法，但是就是这种类似水印得效果。具体怎么实现呢，一开始就会认为使用background-image就可以了，背景图片是能上来，但是无法设置透明度。有关background得设置看着两个：博客园的：https://blog.youkuaiyun.com/gf771115/article/details/79754431w3cschool的：.原创 2020-12-28 15:40:36 · 38396 阅读 · 6 评论 -
token与session原理及应用
对于初学者来说，对Token和Session的使用难免会限于困境，开发过程中知道有这个东西，但却不知道为什么要用他？更不知道其原理，今天我就带大家一起分析分析这东西。 一、我们先解释一下他的含义：1、Token的引入：Token是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token便应运而生。2、Token的定义：Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服..转载 2020-12-22 11:27:51 · 630 阅读 · 0 评论 -
uni-app存储全局变量有哪些方法（uni.switchTab跳转无法传参解决办法）
前言：uniapp中页面跳转可以说主要有两种方式，第一种是uni.navigateTo,第二种是uni.switchTab,这两个的区别在于：navigateTo是保留当前页面，跳转到应用内的某个页面，并且跳转的页面不能在pages.json页面中注册，他是可以以querystring的方式带参数的（例如：'path?key=value&key2=value2'）。switchTab是跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，跳转的页面需在pages.json页面原创 2020-12-14 20:16:28 · 2033 阅读 · 0 评论 -
uni-app（微信小程序）编写小程序加载map地图总结
因为自己想在手机端开发一个应用要应用Vue框架，所以就想到了uni-app，其中一个模块就要加载地图并获取位置信息。这个uni官网给了api，调用也还方面，现就开发中的思路和几个关键方法进行说明，由于uni-app最开始就是以微信小程序为主的，所以他和微信开发者工具基本很类似，他们两个可以互相参考着学习。这里我还是以uni-app为主。这里要特别注意的一点就是：绘制地图和获取位置信息是两件事。先获取位置信息，再将位置信息展现在地图上。1.绘制地图在手机端直接将<map></原创 2020-12-09 15:41:25 · 10442 阅读 · 4 评论 -
css中background:url背景图片如何铺满并正常显示
.box{ height: 300px; width: 300px; background:url('../imgs/108.png') no-repeat center 0px; background-position: center 0px; background-size: cover; text-indent: -999px;}说明：url(‘图片路径’)——图片路径的位置；no-repeat—— 图片不重复；center 0p...原创 2020-08-23 11:19:22 · 20007 阅读 · 0 评论 -
利用ArcGIS API for JavaScript 4.x实现空间查询总结
实现空间查询的整体思路：1.实例化图形图层，用于放绘制的图形//实例化一个图形图层const layer = new GraphicsLayer();2.创建全国矢量图层并加载到MapView中//创建全国矢量图层（feature）var countrylayer = new FeatureLayer({ url: "https://xxxxxx.arcgis.cn/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7..原创 2020-07-14 17:06:17 · 4331 阅读 · 15 评论 -
jquery动态添加表格时表头被替换了的解决办法
在通过jquery动态append表格的单元行tr，表头莫名被替换掉了，后来找到了原因：忘了表格有thead和tbody标签的作用了如果此处不用tbody作为接收tr的容器，动态生成表格时就会将表格的表头替换掉，注意：不要将table标签直接作为接收容器效果图：动态展示新闻的时候，就不会覆盖表头了。...原创 2020-03-25 21:37:52 · 582 阅读 · 0 评论 -
jquery动态添加表格数据注册事件无效的处理办法
今天在做分页的时候遇到了一个问题，就是append动态添加的tr行实现表格行添加，但是在删除某一行的时候发现注册的jquery事件不好使了，可原来静态的时候明明是好使的。经过一番寻找，终于明白了怎么回事，其实就是执行顺序的问题。原因：append中的节点是在整个文档加载完之后开始添加，因此页面不会为append的元素初始化添加点击事件解决办法：使用事件委托的方式，将指定的事件绑定在docu...原创 2020-03-25 21:22:40 · 701 阅读 · 0 评论 -
bootstrap轮播图改进（如何避免资源浪费）
我们用bootstrap轮播图框架如下<!-- start轮播图 --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol clas...原创 2020-03-11 08:42:51 · 435 阅读 · 0 评论 -
Jquery异步删除$(this).parent().parent()无效的解决办法
今天遇到了一个问题，Jquery异步删除无效，我是这么写的（看下图）$(this).parent().parent().remove()直接这么写，数据库删除是没有问题的，但是网页却无法动态删除，只能刷新页面才能显示最新的结果，这显然不是我想要的结果。实际上只需要这么改（先中间折腾下），定义一个变量var tr来接收一下，之后再通过tr.remove()就好了。var tr = $...原创 2020-03-24 10:39:29 · 3270 阅读 · 0 评论