笔记
文章平均质量分 62
前端OnTheRun
这个作者很懒,什么都没留下…
展开
-
2023-06-22 使用事件委托来为所有子节点绑定事件,e.target和this的区别,vue获取DOM节点的常见方法
文章目录1.使用事件委托为子节点绑定事件2.e.target和this的区别3.vue中如何获取DOM节点?方法一:通过事件源来获取当前点击的节点方法二:通过ref来获取当前点击的节点方法三:使用自定义指令来获取当前点击的节点1.使用事件委托为子节点绑定事件 1 2 3 4 5原创 2023-06-22 12:13:16 · 685 阅读 · 0 评论 -
2022-09-30 解决弹性布局flex中,align-item无法居中的问题
文章目录问题出现解决方法效果height:100%和height:100vh的区别问题出现 .container{ display: flex; justify-content: center; align-items: center; } #box{ width: 100px; height: 100px; background-color: #1890FF; }原创 2022-09-30 14:26:50 · 1044 阅读 · 0 评论 -
2022-09-01 什么是双飞翼布局?什么是圣杯布局?如何实现双飞翼布局和圣杯布局?它们有什么区别?
一.圣杯布局1.圣杯布局的效果和要求效果要求2.圣杯布局的实现方式[重要]2.1.使用浮动实现圣杯布局思路代码效果2.2.使用弹性盒实现圣杯布局思路代码效果2.3.使用定位实现圣杯布局思路代码2.4.使用网格布局grid实现圣杯布局思路代码二.双飞翼布局1.双飞翼布局的效果和要求效果要求2.圣杯布局和双飞翼布局的区别[重要]一.圣杯布局1.圣杯布局的效果和要求效果在这里插入图片描述要求头部和底部固定高度,宽度占100%中间的container是一原创 2022-09-01 15:00:44 · 105 阅读 · 0 评论 -
2022-09-03 常见布局:两列布局和三列布局以及品字布局的分类和实现
文章目录一.常见两列布局(左栏固定宽度,右栏自适应)写法一:左边设置固定宽度并浮动,右边自适应写法二:flex布局二.常见三列布局(部分固定宽度,部分自适应)1.浮动布局;两边固定宽度并左右浮动,中间自适应2.所有子元素都左浮动,且两边定宽,中间自适应3.行内块级显示--给每一块元素设置为行内块级元素4.父元素:display:flex,子元素全部flex:1;为flex:1,1,0%。自适应5.父元素flex布局+左右定宽+中间元素flex:1;6.绝对定位一.常见两列布局(左栏固定原创 2022-09-03 15:58:30 · 130 阅读 · 0 评论 -
2023-03-24 什么是服务器渲染?什么是预渲染?服务器渲染和预渲染的区别是什么?
文章目录0.客户端渲染什么是客户端渲染?客户端渲染的优缺点是什么?优点缺点客户端渲染的使用场景是什么?1.服务器渲染什么是服务器渲染?服务器渲染的优缺点是什么?优点缺点服务端渲染的使用场景是什么?2.预渲染什么是预渲染?预渲染的优缺点是什么?优点缺点预渲染的使用场景是什么?3.服务端渲染和预渲染的异同相同点不同点预渲染和服务器渲染的流程比较预渲染的流程服务器渲染的流程总结4.参考博文0.客户端渲染什么是客户端渲染?客户端渲染(CSR)又称为前端渲染,原创 2023-03-24 18:51:48 · 435 阅读 · 0 评论 -
2021-09-16 html5新增标签:video标签和audio标签的用法和示例
文章目录一.video标签1.介绍2.常用属性3.示例二.audio标签1.介绍2.常用属性3. 示例一.video标签1.介绍video标签是HTML5新增标签,用于定义视频(如电影片段或者其他视频流)您的浏览器不支持 video 标签。2.常用属性width:播放器宽度height:播放器高度src:视频的URL地址poster:视频的图片封面URL地址aut原创 2021-09-16 20:18:59 · 170 阅读 · 0 评论 -
2023-03-22【总结:常见性能优化(三)】对于vue项目你有哪些常见的优化的方案?—— 在基础的Web技术层面对Vue项目进行优化
文章目录三.基础Web基础优化1.使用gzip压缩网页大小什么是gzip?在express中开启gzip压缩2.使用浏览器缓存来提高页面加载速度3.使用CDN从服务器中获取数据4.使用谷歌浏览器的Performance面板来查找性能瓶颈5.参考博文三.基础Web基础优化1.使用gzip压缩网页大小什么是gzip?gzip是GNUzip的缩写,用于UNIX系统文件的压缩,在http协议上的gzip编码是一种用来改进web应用程序性能的技术web服务器(比如阿帕奇,nginx)和客户原创 2023-03-22 18:58:01 · 103 阅读 · 0 评论 -
2023-03-21【总结:常见性能优化(二)】对于vue项目你有哪些常见的优化的方案?—— 在Webpack层面对Vue项目进行优化
文章目录二.在Webpack层面对Vue项目进行优化1.使用webpack对图片进行压缩vue项目中的图片处理如何使用image-webpack-loader压缩图片?2.减少ES6转成ES5的冗余代码为什么会出现冗余代码?解决冗余代码的方法原理插件3.提取公共代码为什么要提取公共代码?配置插件4.使用模板预编译5.提取组件的CSS6.优化SourceMap打包后用于线上环境的代码出现bug时不好定位和调试解决方法:sourceMap解决不好调试代码的问题7.构建结果输出原创 2023-03-21 10:59:57 · 245 阅读 · 0 评论 -
2023-03-20 【总结:常见性能优化(一)】对于vue项目你有哪些常见的优化的方案?—— 在Vue代码层面对Vue项目进行优化
文章目录零.前言一.在Vue代码层面对Vue项目进行优化1.分场景使用v-if和v-show面试题:v-if和v-show的区别?使用场景2.分场景使用computed和watch面试题:computed和watch的区别?使用场景3.为v-for添加数组的item作为key值,并避免同时使用v-if面试题:v-for为什么要添加key?面试题:v-for为什么要使用数组的item作为key而不是index?面试题:v-for和v-if的优先级哪个更高?4.仅仅用于数据展示的组件不原创 2023-03-20 19:51:07 · 279 阅读 · 0 评论 -
2023-01-26 JS设计模式-单例模式:单例模式的原理和实现,懒汉模式和饿汉模式,单例模式实现登录框
1.什么是单例模式?介绍单例模式是最简单的设计模式之一,属于创建型模式,单例模式提供了一种创建对象的最佳方式特点-单例模式的类(单例类)只有一个实例对象这个单例对象必须由单例类创建单例类对外提供一个访问这个单例的全局访问点结构单例类:包含一个实例且能自行创建这个实例的类访问类:使用单例的类2.如何实现一个单例模式?思路通过单例模式的特点:一个类只有一个实例,先判断实例存在与否,若存在,则直接返回若不存在,则创建了再返回*在JS中单例作为一个命名空间提供者,从全局命名空原创 2023-01-26 13:45:29 · 968 阅读 · 0 评论 -
2021-05-16 bind,call和apply的异同与用法
1.bind,call和apply的共同点:1.1.第一个形参改变当前this指向,第二个(以及之后的)形参用来传参1.2.三者只有格式的不同,功能是相同的2.bind,call和apply的不同点:2.1.bind需要执行语句(在后面额外加括号),call和apply是自执行2.2.bind和call第二个(和之后的)形参用来传参,apply的第二个参数是一个数组2.3.bind和call第二个参数可以是arguments,而apply不可以—————————————原创 2021-05-17 08:16:09 · 97 阅读 · 0 评论 -
2022-12-10 in运算符的用法
用法一:.检测第一个运算数是否是第二个运算数(对象)的属性名 var obj = { x: 1, y: 2 }; console.log("x" in obj, "y" in obj, "z" in obj); //true true false用法二:检测第一个运算数是否为第二个运算数(数组)的索引var arr = [1, 2, [3, 4], 5];console.log(1 in arr, 2 in原创 2022-12-10 22:18:39 · 55 阅读 · 0 评论 -
2022-12-11 isPrototypeOf、instanceof、hasOwnProperty的用法和示例
1.instanceof运算符用法一:instanceof返回一个布尔值,表示对象是否为某个构造函数是的实例function Person() { this.age = 18};var p = new Person();console.log(p instanceof Person);//true;instanceof左边是实例对象,右边是构造函数它会检查右边构造函数的原型对象是否在左边对象的原型链上,即console.log(Person.prototype.isPrototypeOf(p))原创 2022-12-11 10:38:39 · 113 阅读 · 0 评论 -
2022-12-12 如何判断一个变量是一个对象还是一个数组?
2.instanceOfinstanceof运算符返回一个布尔值,表示对象是否为某个构造函数的实例var obj = {name: "zhangsan"};var arr = [1, 2, 3];console.log(arr instanceof Array); //trueconsole.log(arr instanceof Object); //true(万物皆对象)console.log(obj instanceof Array); //falseconsole.log(obj in原创 2022-12-12 15:44:27 · 332 阅读 · 0 评论 -
2022-11-21 vue3有哪些新增特性?
一.vue3快速上手1.vue3带来了什么?性能的提升源码的升级更好地支持Typescript新的特性特性1.Composition API(组合API)特性2.新的内置组件特性3.其他改变2.vitevite是新一代前端构建工具,有如下优势[使用vite创建一个vue3项目:`create-vite-app vue3_vite`](https://blog.csdn.net/x550392236/article/details/120323139)对比:使用脚手架vue-cli创建原创 2022-11-21 19:27:47 · 1341 阅读 · 0 评论 -
2022-11-09 git笔记:git第二次提交,git多人提交
1.在空文件夹下$ git clone https://gitee.com/xxxx/xxxx.git, 李四,把代码下载进李四文件夹2.创建并进入李四分支:$ git checkout -b "lisi",可以git branch看看3.李四写了一天的代码,把今天的代码上传到lisi分支: git add. git commit -m "成员李四的第一天代码" git push origin lisi,这时候因线上没有该子分支,所以会出现提示 git push --set-upstream o原创 2022-11-09 10:25:59 · 1392 阅读 · 0 评论 -
2021-07-27 axios的定义和基本用法
定义axios是一个被vue 官方推荐的,基于promise的http库特性支持nodejs,支持promise,可以拦截请求和响应,自动转换json数据使用get请求post请求(默认发送json数据)*还支持put请求和delete请求axios响应结果的属性data:实际响应的数据header:响应头status:响应状态码statusText:响应状态信息xhr例子...原创 2021-07-27 10:21:39 · 228 阅读 · 0 评论 -
2021-08-24 Sass学习笔记(六) sass的安装和使用
安装命令:npm install -g sass使用新建一个scss文件style.scssul{ list-style-type: none; color:red; li{ background-color: seagreen; border:solid; }}新建一个css文件index.css//不用写代码输入命令:sass xxx.scss:aaaaa.csssass style.scss:index.css发现scss文件被解析成css文件index原创 2021-08-24 19:47:18 · 434 阅读 · 0 评论 -
2021-06-15 Sass学习笔记(五) 使用gulp-sass插件写css样式
下载相关插件1.下载全局node,npm,和sass2.输入命令:npm init,初始化项目环境,生成package.json文件3.输入命令:npm i gulp-sass -D,下载gulp-sass插件搭建环境配置新建一个gulpfile.js文件gulpfile.js:// sass转css//引入sass文件const sass = require("gulp-sass");function sassFn() { return src("./sass/*")原创 2021-06-15 08:49:39 · 171 阅读 · 1 评论 -
2021-07-24 JS难点整理:函数防抖&函数节流,闭包和原型链的概念和用法
一.函数防抖和函数节流二.闭包定义描述原理1.计算机的回收机制2.函数的定义作用域形成闭包的三个条件示例闭包的特点优点:缺点:使用闭包的目的闭包的两个应用场景1.循环中的事件获取循环每次执行的计数器2.给内置方法的缓存调函数传参三.原型链1.对象的__proto__1.1.万物皆对象,每个对象都有一个属性,这个属性叫做隐式原型,即__proto__1.2.一个对象的隐式原型指向其构造函数的原型链属性(__proto__指向prototype)1.3.这种指向使得对象原创 2021-07-24 11:43:49 · 137 阅读 · 0 评论 -
2021-09-05 [复习]如何使用git将项目代码上传到github或码云gitee上
0.下载和安装1.本地1.1.准备,打开和初始化1.2.配置和提交1.3.日志和版本号2.上传到在线仓库(github或码云gitee)3.下载(另选不同的文件路径)4.分支:逻辑(非物理)副本原创 2021-09-05 22:23:17 · 62 阅读 · 0 评论 -
2022-04-17 Sass学习笔记(二) Sass的语法:变量,条件分支,循环,mixin
文章目录1.变量常见使用场景语法示例2.条件分支常见使用场景语法示例3.循环常见使用场景语法1.@for 指令2.@each 指令示例一:for循环li节点的样式示例二:each..in节点的样式4.混合(Mixin)语法示例5.知识点5.1.索引函数`$idx:index($list,$item)`5.2.css的循环是从1开始的5.3.浏览器兼容性5.4.html的p标签中不能再嵌套其他标签原创 2022-04-17 00:34:08 · 287 阅读 · 0 评论 -
2022-04-15 Sass学习笔记(一) 概念,安装,引入和使用示例
文章目录概念学习手册下载使用示例css/mysassdoc.scssmysassdoc.css其他拓展名的文件后缀是.sass的文件后缀是.min.css的文件概念sass是目前使用最广泛的css拓展语言,是css的预编译工具经过sass编写的代码需要先解析成相对应的css文件,浏览器才能获得样式学习手册官网文档菜鸟下载1.按照官网的说明下载2.直接在vscode应用商店下载Easy Sass插件在这里插入图片描述使用在一个单独的css文件夹下创建一个扩展名原创 2022-04-15 21:57:52 · 113 阅读 · 0 评论 -
2022-04-14 前端开发框架Bootstrap笔记(三) bootstrap组件的使用(以轮拨图组件为例)
1.折叠组件位置组件/According步骤1.引入文件2.创建container容器3.粘贴折叠组件代码4.把标题和内容改成自己的文本,class名不能改代码原创 2022-04-14 19:30:32 · 134 阅读 · 0 评论 -
2022-04-12 前端开发框架Bootstrap笔记(二) 栅格系统(Grid system)的用法和网格选项以及示例
文章目录学习文档介绍原理用法1.导入bootstrap.min.css文件2.创建container容器3.设置名为col-md-的div,当尾数为1时,表示每个div的宽度占1/12,所以每行最多可以放置12个子div。知识点1.网格选项:.col-xs(sm,md,lg)-数字2.col-md-offset-3.col-md-push-*和col-md-pull-*4.列嵌套完整代码html结果原创 2022-04-12 20:35:30 · 273 阅读 · 0 评论 -
2022-04-10 前端开发框架Bootstrap笔记(一) 介绍下载和引入以及示例
文章目录介绍下载如何学习:引入文件示例结果介绍Bootstrap 是全球最受欢迎的前端框架,用于构建响应式、移动设备优先的网站。下载bootstrap5.1.3如何学习:看文档引入文件bootstrap.css和bootstrap.bundle.js原创 2022-04-10 19:04:25 · 365 阅读 · 0 评论 -
2022-06-21 jQuery自定义插件的定义和使用(以选项卡为例)
文章目录jQuery插件的概念插件引入时必须遵守的规定自定义选项卡插件tabs引入样式和js改进:改进默认选中的方式和获取节点的方式改进:将js和css放到单独文件中并在新的html中引入结果改进:html只保留框架,里面的li节点通过动态获取并初始化vue组件:把css,js都组装在一起的插件,只需输入标签名原创 2022-06-21 20:05:35 · 411 阅读 · 0 评论 -
2022-06-16 jQuery.extend()方法的定义使用
jQuery.extend()方法定义jQuery.extend()方法用于将一个或多个对象合并到目标对象(第一个形参)中语法 $.extend( target [, object1 ] [, objectN ] )深度合并deep为true:且多个对象的某个同名属性也都是对象,则该"属性对象"的属性也将进行合并。$.extend( [deep ], target, object1 [, objectN ] )示例//obj2 合并到 obj1 中var obj1 = {name:原创 2022-06-16 21:35:06 · 55 阅读 · 0 评论 -
2022-04-24 jsonp跨域的原理和例子
1.什么是jsonp2.为什么要跨域3.[面试题]jsonp跨域的原理是什么?4,跨域例子代码结果5.接口名必须前后端名称一样例子结果6.jsonp的缺点6.1.产生大量无用的script标签6.2.只能GET请求,不能POST,PUT,DELETE7.jsonp跨域案例:同步百度的搜索栏8.jQuery的jsonp跨域例子结果原创 2022-04-24 23:46:53 · 139 阅读 · 0 评论 -
2022-04-25 GET请求取出json文件中数据并渲染,POST发送新数据进入json文件中以及json-server的应用
一.取出json文件中数据目标代码使用ajax发送GET请求代码结果二.json-server的下载和使用1.json-server:基于一个json文件就可以创建很多个后端的模拟接口2.下载命令3.开启服务4.结果:分析:地址栏输入 http://localhost:3000的结果:地址栏输入 http://localhost:3000/data的结果:[node的退出]如何退出集成终端中的node.js?原创 2022-04-25 22:49:12 · 141 阅读 · 0 评论 -
2022-06-08 jQuery笔记(二) jq操作class,操作属性,操作偏移量
1.jQuery操作class1.1.为节点添加和删除一个class代码结果1.2.添加删除class的使用场景:选项卡的快速切换代码(思路:链式操作+隐式操作)1.3.节点是否存在该class以及切换toggleClass代码2.jQuery操作属性attr()设置获取和删除元素属性代码prop()只能操作原生属性代码结论3.jQuery操作偏移量offset():获取距屏幕左上角的left和top值,若传参就是设置获取和设置没有定位的元素的偏移量设置和获取带有定位的元素原创 2022-06-08 00:13:46 · 175 阅读 · 0 评论 -
2022-03-30 函数封装:cookie的存取
设置cookie*需考虑要可能存在的有效期代码function setCookie(key, val, exp) { //cookie名,cookie值,有效期 let time = ''; if (exp) { var date = new Date(); //创建事件对象date var d = date.getTime(); //令d为当前时间 date.setTime(d + exp * 60 * 1000); //设置有效期原创 2022-03-30 22:49:40 · 105 阅读 · 0 评论 -
2022-06-07 jQuery笔记(一) jq基本使用,引入,选择器,事件,显隐滑动淡进淡出效果,动画和停止动画,回调,链式操作
1.第一个jQuery例子2.jQuery库功能3.script标签的简化4.引入jQuery5.jQuery语法6.文档就绪事件7.jQuery选择器8.jQuery事件事件:页面对不同访问者的响应事件处理程序:当html发生某些事件时调用的方法事件语法:与DOM事件等效的方法9.jQuery效果9.1.显示与隐藏9.2.淡入淡出9.3.滑动10.jQuery效果:动画10.1.animate()可操作多个属性10.2.animate()可操作相对属性值10.3.ani原创 2022-06-07 21:51:43 · 271 阅读 · 1 评论 -
2022-05-05 获取指定元素的CSS非行内样式:getComputedStyle()方法
function getPos(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];// IE }else{ return getComputedStyle(obj)[attr]//通用 } }原创 2022-05-05 22:34:39 · 124 阅读 · 0 评论 -
2022-05-15 获取节点:getElementsByTagName和querySelectorAll的异同
知识点节点对象的遍历,一般使用forEach输出结果为NodeLIst才可以直接遍历相同点都是伪数组,只有长度和下标,不能使用数组方法,比如数组方法push()等等不同点getElementsByTagName获取的节点,console.log()输出的是(节点列表)NodeLIst(3)[li,li,li],需要通过Array.from转化成真数组才能进行节点遍历querySelectorAll获取的节点,console.log()输出的是(节点集合)HTMLcollection(3)原创 2022-05-15 14:45:35 · 237 阅读 · 0 评论 -
2022-03-29 cookie的存取以及设置带有效期的cookie
存document.cookie=“key1=value2”;document.cookie=“key1=value2”;读取console.log(document.cookie);//读取全部cookie查看当前浏览器下的cookie列表:F12>应用>cookies设置有效期代码:// 设置一个一分钟后过期的cookievar d = new Date(); //实例化日期对象d.setTime(d.getTime() + 1 * 60 * 1000); //getTime原创 2022-03-29 22:52:11 · 407 阅读 · 0 评论 -
2022-03-28 【前后端交互】如何使用php操作SQL数据库并把数据返回给JS前台
一.如何编写和运行数据库中的php文件?1.连接数据库2.指定目录3.打开php文件二.如何连接MySQL数据库?1.Navicat数据库管理客户端2.与phpStudy相连接3.创建数据表4.增删改查1. 插入数据insert2. 修改数据update3. 删除数据delete4. 查询数据select三.如何使用php操作SQL数据库并把数据返回给JS前台(重点)?1.非查询操作步骤代码2.查询操作步骤代码查询结果3.常见API原创 2022-03-28 23:34:28 · 614 阅读 · 0 评论 -
2022-03-17 css3滤镜属性(filter)的用法和示例
1.none 默认值,没有效果。2.blur(px) 给图像设置模糊度,(值是css长度值)值越大越模糊;3.brightness(%) 给图像设置亮度,(值是百分比)值越大越亮;4.contrast(%) 给图像设置对比度。(值是百分比)百分比越高,对比度越明显,如果值是0%时,元素只有浅灰5.opacity(%) 给图像设置透明度。(值是百分比)值越小越透明四.filter:alpha()属性基本属性filter:alpha(opacity,finishopacity,style,star原创 2022-03-17 21:51:28 · 228 阅读 · 0 评论 -
2022-03-08 CSS3新增了哪些选择器?nth-child和nth-of-type的区别是什么?
文章目录一.CSS3新增选择器属性选择器结构伪类选择器伪元素选择器示例:使用::after给元素加一个遮罩层二.nth-child和nth-of-type的区别区别示例结果分析参考文档一.CSS3新增选择器属性选择器E[att]:具有att属性的E元素E[att=val]:具有att属性且值为val的E元素E[att^=val]:具有att属性且值以val开头的E元素E[att$=val]:具有att属性且值以val结尾的E元素E[att*=val]:具有att属性且值包含原创 2022-03-08 20:04:01 · 86 阅读 · 0 评论 -
2022-03-01 Node.js Express框架学习笔记(五) 使用express.static方法托管静态文件
1.静态文件图像、CSS 文件和 JavaScript 文件之类的文件属于静态文件2.内置中间件express.static可以使用 express.static 中间件来设置静态文件路径语法:express.static(root, [options])如:托管public文件下下的静态文件app.use(express.static('public'))托管后,可以通过浏览器地址栏访问public文件夹下的静态文件http://localhost:3000/images/kit原创 2022-03-01 21:47:04 · 72 阅读 · 0 评论