前端学习之旅
文章平均质量分 53
学习前端知识,记录和分享在学习过程中的技术、心得、体会和个人总结的技巧。
那就叫菜鸟吧
这个作者很懒,什么都没留下…
展开
-
字符串作为对象的key
字符串作为对象的key原创 2022-12-06 23:29:21 · 1018 阅读 · 1 评论 -
Javascript中的预编译
js预编译分为全局预编译和函数预编译:全局预编译发生在页面加载完成时执行,而函数预编译发生在函数执行的前一刻。转载 2022-07-23 11:26:51 · 288 阅读 · 0 评论 -
伪类插入图片
.content::after { width: 64rpx; height: 64rpx; content: ''; position: absolute; background-size: 100% 100%; margin: 32rpx auto; left: 0; right: 0; background-image: url('图片链接');}原创 2022-05-30 17:38:25 · 484 阅读 · 0 评论 -
微信小程序在线客服聊天
1.分析小程序给我们提供的在线聊天功能,在界面中只能通过按钮开放能力来打开。只能在手机端中去使用,在模拟器中无法进行2.代码: <!--联系客服--> <button open-type="contact" class="grid-item1" > <view class="grid-item-img">原创 2022-05-16 16:10:53 · 1033 阅读 · 0 评论 -
BUG:ERROR Error: EPERM: operation not permitted, mkdir的解决方式
一直有这个bug,搞了我一个上午。现在总结:可以先查看node’版本是否匹配,不合适卸了重新装试试。实在不行,按照csdn的方法一个个去试。下面提供几种方式,引用链接去看。我尝试了csdn上很多解决方法,解决不了。可能这个问题有多种坑。一个解决方法补一个,不断尝试,坑对应上了,就解决了。方法一:引用链接运行npm命令报错:Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_global".原创 2022-05-11 18:06:57 · 2668 阅读 · 0 评论 -
JS数组整理
JS数组整理重点方法回忆:目录JS数组整理一. 创建一个数组:1.ES6 Array.of() 返回由所有参数值组成的数组2. ES6 Arrary.from() 将两类对象转为真正的数组二.方法:1.改变原数组的方法(9个):2.不改变原数组的方法(8个):3.遍历方法(12个):三.数组操作及面经1.数组去重Array.from()Array.of()arr.splice()arr.sort()arr.slice().转载 2022-02-28 09:17:12 · 252 阅读 · 0 评论 -
JS字符串整理
JS字符串整理常用方法方法记忆:获取指定下标的值:charAt(i)获取指定下标的值的unicode编码:charCodeAt(i)判断是否含有指定子串:includes判断是否以指定子串开头:startsWith判断是否以指定子串结尾:endsWith匹配指定的子串在字符串中的第一个下标:indexOf匹配指定的子串在字符串中的最后一个下标:lastIndexOf前闭后开截取字符串:slice()前闭后闭截取字符串:strsub()前闭后开截取两个指转载 2022-02-27 22:19:41 · 311 阅读 · 0 评论 -
使用js对class(类名)增删改查的好办法,不要只用会className和jQuery啦
js修改样式的方法1、对象.className(‘类名’)2、setAttribute(),getAttribute()和removeAttribute()3、JQuery的addClass()、removeClass() 使用js来对类名进行增删改查以便到达我们需要的功能,这是一个很实用的操作。 但当我们需要设置多个类名时,原生的可能比较多人熟知的className()就不能用了,因为它会覆盖,不能在原有的类名上增加,很鸡肋! 原生js的setAttribute()原创 2022-01-24 15:48:25 · 5128 阅读 · 0 评论 -
CSS水平居中和垂直居中
CSS水平居中和垂直居中最好用的还是flex布局,简单易记并且不需要考虑子元素是否设置固定宽高。居中,不管是水平,还是垂直,或者都考虑,绝对定位,margin、transform:translate()这些是主要记忆的属性,再根据具体情形分析设置基本没问题了下面是一些案例的关键代码:1.水平居中行内元素:对父元素设置text-align: center;块级元素:对自身设置margin:0 auto;flex布局中对父元素:.son{ display: flex;原创 2022-01-24 10:25:01 · 274 阅读 · 0 评论 -
表单的友好操作
当用户输入的字符数量达到最大时,将文本框的焦点自动聚焦到下一个文本框。原创 2022-01-17 23:29:35 · 231 阅读 · 0 评论 -
vscode vue2的vuex插件安装失败问题
学习vue2时,直接下载vuex插件有的会出问题2. 出现这种问题,取消https认证就可以了3.再安装ok了原创 2021-11-14 16:18:11 · 672 阅读 · 1 评论 -
Vue学习记录——vue-router 路由的使用(最简单版)
代码示例:创建好vue2项目后,在components下创建2个组件:home.vue和about.vue<template><p>{{page}}</p></template><script>export default {name:"about",data() { return { page:"关于页about" }},}</script><style><原创 2021-11-08 15:42:57 · 497 阅读 · 0 评论 -
Thymeleaf引入公共的head,添加私有的css和js
有时候,很多css文件是公共的,可以利用Thymeleaf的模板布局,把这些css文件抽出来,作为模板已引入到需要用到的页面。某个html文件专属的css文件,还可在引入模板的基础上单独引入该css文件。模板文件<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head th:fragment="head(title,links,scripts)"> <meta.原创 2021-10-18 20:37:34 · 884 阅读 · 0 评论 -
css(小技巧)隐藏滚动条且能继续滚动的方法
分析:对于父盒子:设置固定高度,超过的部分隐藏对于子盒子:宽度大于父盒子,高度为100%。水平超过的部分隐藏。垂直超过的部分自动。 <style> .father{ width: 270px; height: 200px; overflow: hidden; } .son{ width: 300px; height: 100%;原创 2020-10-23 23:36:11 · 157 阅读 · 0 评论 -
字体图标(以建两个css和伪元素选择器、unicode方式引入)
1,2.复制链接,进入链接3.chtrl+a,全选复制,在粘贴到自己建立的css包中,这里命名为iconfont.css;4.建一个css来使用iconfont.css,这里命名为fonts.css,两个css的content要一样。fonts.css要加上font-family:“iconfont”;以后项目需要增加图标,只需这几步,在iconfont.css复制新的内容进去,再使用即可。5.不用伪元素选择器,用unicode码,!记得加class=“iconfont”完成~原创 2020-10-03 15:50:07 · 257 阅读 · 0 评论 -
(JS练习一)JS的添加、删除功能练习
给一个表格用js实现:1.点击delete后跳出确认框,确认则删除本行,取消则不删除;2,在想添加员工的表格中输入信息,点击提交按钮,员工信息自动加入第一个表格。3,第一表格中新添加的员工信息也要有delete和确认功能。第1个功能:分析:delete是超链接,所以我们要绑定的是表一的所有超链接,但要删除的是超链接所在的行tr;a的父亲的父亲的是tr,然后tr自己删除自己 window.onload = function () { // 分析:delete是超链接,原创 2020-08-18 20:37:10 · 620 阅读 · 0 评论 -
(小技巧)HTML表格中设置极细边框线
(小技巧)HTML表格中设置极细边框线首先,先写好一个表格设置border=“1”后 <table border="1">是这样的边框很“厚”,很丑,但边框已设为1px,不能再减少px值。解决:设置样式: table { //合并边框 border-collapse: collapse; } table, th, td { //设置边框颜色、类型等样式 border: 1px原创 2020-08-17 10:02:13 · 3125 阅读 · 0 评论 -
CSS精灵图/雪碧图(sprite)的使用
精灵图的作用:减少页面的图片数量(不用在img包中添加很多小图标,只需一张包含很多图标的图片即可实现在某位置显示图上的某个图标);减少服务器接收和发送请求的次数,提高加载速度。精灵图:小背景或小图标整合到一张大图中。技术要领:1.测量想要显示的图标的大小,在图片的位置,到上边缘和左边缘的距离(可在ps中用矩形工具或切图工具测)2.设置一个跟图标大小一样或稍大的盒子,用来放图标;3.把精灵图作为背景,设置背景的位置(根据测到的“到上边缘和左边缘的距离”)来将图标放在盒子中。例子:精灵图原创 2020-08-01 23:06:34 · 672 阅读 · 0 评论