前端
KK要继续努力
这个作者很懒,什么都没留下…
展开
-
vue中使用富文本编辑器
wangEditor官网地址:https://www.wangeditor.com/原创 2023-09-28 17:40:56 · 334 阅读 · 0 评论 -
本地创建的项目托管到git
这里可能会报错,报错为Updates were rejected because a pushed branch tip is behind its remote(更新被拒绝,因为推送的分支提示位于其远程之后),这时需要git pull拉取一下。这里的情况是本地先通过命令在电脑上指定文件夹创建好项目后,需要托管到git上,这里以gitee为例。如果本地先创建好了,可能会有几个文件冲突,先解决好冲突保存。8. 将远程仓库的文件拉到本地项目中。7. 与远程仓库建立连接。原创 2023-05-28 21:20:43 · 940 阅读 · 0 评论 -
查漏补缺(十一)
查漏补缺(十一)原创 2023-03-18 19:33:21 · 395 阅读 · 0 评论 -
查漏补缺(十)
查漏补缺(十)原创 2023-03-11 19:24:15 · 75 阅读 · 0 评论 -
格式化数字
格式化数字原创 2023-03-09 07:59:33 · 60 阅读 · 0 评论 -
toLocaleString
toLocaleString原创 2023-03-08 23:38:31 · 142 阅读 · 0 评论 -
JS延时加载
延迟加载原创 2023-02-28 11:56:04 · 991 阅读 · 0 评论 -
ES6和commonJS导入
ES6、commonJS导入导出原创 2023-02-19 18:38:14 · 575 阅读 · 0 评论 -
浏览器event事件点击X、Y值
event对象原创 2023-02-07 11:02:17 · 139 阅读 · 0 评论 -
元素计算距离与event事件对象
元素计算距离与event事件对象元素1. offsetLeft/offsetTop当前元素相对于父元素左边/上边的偏移量。只读属性,父元素不能是static。当前元素如果是fixed定位,返回的是元素与可是窗口的距离。2. style.left/style.top当前元素相对于父元素左边/上边的偏移量。注意offsetLeft/offsetTop与style.left/style.top的区别:offset是只读属性,style.left是可读可写属性;offset返回值是Number类原创 2022-04-22 17:55:32 · 589 阅读 · 0 评论 -
前后端通信
前后端通信前后端通信就是前端(浏览器)携带数据向服务器发送请求,服务器对前端进行响应并携带数据。前后端通信方式使用浏览器访问页面link、img、script、a、form等HTML标签Ajax和FetchHTTP请求响应的过程HTTP方法get:获取数据post:创建数据put:修改数据delete:删除数据get和post的区别get获取数据,post是创建数据get通过地址在请求头中携带数据,post既可以通过地址也可以通过请求体携带数据get可以被缓存(由于原创 2022-04-05 13:26:28 · 1531 阅读 · 0 评论 -
JS实现私有属性
JS实现私有属性基于闭包function P(name){ var _name = name; this.getName=function(){ return _name; } }var p = new P("xxx");console.log(p._name); //undefinedconsole.log(p.getName()); //xxx原创 2022-03-25 14:08:27 · 362 阅读 · 0 评论 -
ES6新增方法
ES6新增方法includes()格式:arr.includes(查找值,开始检索的位置)//找到相应值返回true,否则返回false'abc'.includes('a')padStart()和padEnd()格式:str.padStart(字符串总位数,添加相应字符串)/padEnd(字符串总位数,添加字符串)//从前开始补全字符串'x'.padStart(5,'ab') //ababx//从后开始补全字符串'x'.padEnd(5,'ab') //xabab注意:原字原创 2022-03-20 23:14:08 · 136 阅读 · 0 评论 -
Set与Map
Set与MapSet定义一组无序且不重复的数据集合方法与属性(一)方法add():给Set集合添加数据,只能添加一个值,可以连续使用,如:add(1).add(2))has():判断Set集合是否有这个值,有返回true,没有则返回falsedelete():删除Set集合的某个数据,一次只能删除一个值。删除不存在的数据,什么也不会发生,也不会报错clear():清空Set的数据forEach():遍历Set。s.forEach(function(value,key,set){},原创 2022-03-20 15:14:19 · 97 阅读 · 0 评论 -
查漏补缺(九)---程序篇
函数题目:输入一个字符串,返回该字符串出现最多的字母function strMax(str){ let obj={}; for(let i=0;i<str.length;i++){ let k = str.charAt(i); if(obj[k]){ obj[k]++; }else{ obj[k]=1; } } let a = 0; let temp = null; for(let j in obj){ if(obj[j]>a){ a=o原创 2022-03-18 21:38:37 · 57 阅读 · 0 评论 -
前端本地存储
前端的存储分类localStorage;sessionStorage;cookie;indexDB;webSQLcookiecookie的基本用法写入cookiedocument.cookie = 'username=xxx';document.cookie = 'userage=18';//不能同时设置,只能一个一个设置获取cookieconsole.log(document.cookie); //得到所有cookie,没个以“: ”分隔cookie的属性原创 2022-02-21 17:12:40 · 635 阅读 · 0 评论 -
颜色字符串转换
颜色字符串转换题目:将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffffrgb 中每个 , 后面的空格数量不固定十六进制表达式使用六位小写字母如果输入不符合 rgb 格式,返回原始输入解答:function rgb2hex(sRGB) { var reg = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/; var arr = sRGB.match((reg)); if(!arr){转载 2021-06-17 15:45:45 · 614 阅读 · 0 评论 -
邮箱字符串判断
邮箱字符串判断题目:判断输入是否是正确的邮箱格式,输出true表示格式正确解答:function isAvailableEmail(sEmail) {//([\w+\.])+表示多个字母、下划线、数字、点 var reg = /^([\w+\.])+@\w+([.]\w+)+$/;//或者// /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ return reg.test(sEmail);}知原创 2021-06-17 13:53:38 · 691 阅读 · 0 评论 -
统计字符串中每个字符出现的次数
统计字符串中每个字符出现的次数题目:统计一个字符串中每个字符出现的次数,并返回出现次数最多的字母以及相应次数解答:利用reduce函数,将每个字符看成一个空箱子,遍历到就把值传到空箱子中,最后判断出空箱子里有多少var str="helloworld";var arr=str.split("");var result=arr.reduce( function(prev,elem){//到这个数时为这个数添加1次 if(prev[elem]===undefined){原创 2021-06-17 10:45:05 · 2495 阅读 · 0 评论 -
实现对象深拷贝
对象深拷贝function deepClone(o){ if(Array.isArray(o)){ var result = []; for(var i=0;i<o.length;i++){ result.push(deepClone(o[i])); } }else if(typeof o == 'object'){原创 2021-06-15 17:16:58 · 112 阅读 · 0 评论 -
JS面向对象编程三大特征
JS面向对象编程三大特征JS面向对象的三大特征为封装、继承、多态。下面分别进行介绍:封装继承多态原创 2021-06-15 16:16:55 · 682 阅读 · 0 评论 -
JS创建对象的方式
JS创建对象的方式JS创建对象一共有3种方式,分别为:用{}直接创建var obj={ 属性名:值, 方法:function(){}}用new创建var obj = new Object();obj.属性名=值;obj.方法=function(){};构造函数的方式创建function obj(形参1,形参2,...){ this.形参1=实参1; this.形参2=实参2; this.方法=function(){};}问题:怎么创建一个对象?知识点:面原创 2021-06-10 14:11:00 · 60 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型盒子模型定义在css中,将html元素看做盒子,这个盒子具有内容(content)、内边距(padding)、边框(border)、外边距(margin)等属性,这些属性组成CSS盒子模型。盒子模型的计算方式盒子的宽度/高度=内容(width/height)+内边距(padding)+边框(border)+外边距(margin)问题:简述盒子模型,计算盒子模型的宽高度知识点:盒子模型及其运用...原创 2021-06-07 16:17:05 · 74 阅读 · 0 评论 -
BFC详解
BFC原创 2021-06-07 15:35:48 · 1010 阅读 · 0 评论 -
标准浏览器事件模型和IE事件模型的区别
标准浏览器事件模型和IE事件模型的区别标准浏览器事件模型指addEventListener事件,IE事件模型指的是attachEvent事件。标准浏览器事件模型和IE浏览器事件模型一共有5种区别,分别为:适用的浏览器不同:标准浏览器事件模型适用于Chrome、Firefox、IE9及其以上、Safari、Opera等浏览器,IE浏览器事件模型只适用于IE7、8参数数量不同:标准浏览器事件模型有3个参数(第3个参数判断是捕获还是冒泡),IE事件浏览器模型只有2个参数,所以事件捕获阶段有兼容性问题th原创 2021-05-25 11:03:41 · 406 阅读 · 0 评论 -
轮播图
轮播图<style> div{ width: 100px; height: 90px; margin: 0 auto; } div img{ width: 100px; height: 90px; }</style><script> window.onload = fu原创 2021-05-25 09:23:32 · 91 阅读 · 0 评论 -
事件冒泡、事件捕获与事件流(事件委托、代理)
事件冒泡、事件捕获与事件流事件冒泡、事件捕获与事件流事件冒泡与事件流息息相关,事件冒泡指的是当一个元素接收到事件的时候,会把他接收到的所有一层一层传给它父级,一直到顶层window,就像泡泡从下往上冒一样事件捕获指的是当一个元素接收到事件的时候,会从具有相同事件的父级依次从上到下进行传递,与事件冒泡的顺序是相反的事件流又叫事件委托、事件代理,是利用事件冒泡,指定一个事件程序从而能够管理某一类型的所有事件。使用事件流不仅原来的元素可以获得相同的事件,新增加的节点也会具有相同的事件,事件流可以减少js原创 2021-05-17 15:05:34 · 200 阅读 · 0 评论 -
px,em,rem的区别
px,em,rem的区别px,em,rem概述px指的是像素,相对于显示器分辨率而定。适用于边框等不变化的属性;em是相对于父节点的字体大小进行变化。适用于响应式布局;rem是相对于根节点的字体大小进行变化。适用于响应式布局区别px设置完成后不会随着屏幕大小的变化而改变,是固定值;em的改变是相对于父节点font-size大小的改变,与其他节点无关;rem的改变是相对于html根元素的font-size大小的改变,与其他节点无关媒体查询中使用rem;//em<style&原创 2021-05-17 13:55:10 · 357 阅读 · 0 评论 -
缓存
缓存浏览器缓存浏览器缓存及其优缺点浏览器缓存是指将用户请求过的静态资源(html、css、js、图片等)存储到电脑磁盘上,待下次请求时,直接从本地磁盘上读取。浏览器缓存的优点读取资源快,加快客户端请求网页的速度减少服务器的负担,提高网站性能减少冗余数据传输浏览器缓存的缺点浏览器缓存没有清理机制,占用磁盘空间服务端代码改变后,浏览器端可能还是以前的样式缓存规则强缓存协商缓存浏览器缓存的过程当用户请求资源时,先去磁盘内部寻找缓存数据表,如果数据中显示为强缓存规转载 2021-05-13 13:51:10 · 85 阅读 · 0 评论 -
HTML5原生实现动画
HTML5原生实现动画HTML5原生实现动画一共有4种方式,分别为:CSS3transition、animation、translate、@keyframescanvas实现动画SVGrequestAnimationFrame原创 2021-05-08 14:42:24 · 221 阅读 · 0 评论 -
HTML5、CSS3新特性
HTML5、CSS3新特性HTML5新特性新增了一些语义化标签hearder:头部footer:尾部section:文档中的节、区块nav:;导航栏rt:ruby注释上面部分rp:不支持 ruby 元素的浏览器所显示的内容ruby:ruby注释aside:侧边栏article:文档、页面或者是应用程序当中的独立完整可以被外部引用的内容。可以以一篇文章、一篇帖子、一段评论或者是独立的插件形式出现。除了内容主题以外,一个article元素通常会有自己的标题及脚注。新增canva转载 2021-05-06 21:54:10 · 112 阅读 · 0 评论 -
CSS3圆角效果
CSS3圆角效果border-radius属性实现css3的圆角效果,border-radius属性是以下4种属性的简写:border–top-left-radius(左上)border-top-right-radius(右上)border-bottom-right-radius(右下)border-bottom-left-radius(左下)border-radius的具体用法border-radius直接写的方式当border-radius的值只有1个时,代表4个方向的圆角值转载 2021-04-29 12:38:02 · 166 阅读 · 0 评论 -
css3动画实现一个从下往上的弹框
css3动画实现一个从下往上的弹框<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .pop{ width: 300px; height: 200px; border: 1px solid #000000; border-radius: 5px; positio原创 2021-04-28 15:46:24 · 6000 阅读 · 0 评论 -
CSS动画、JS动画优缺点
CSS动画、JS动画优缺点CSS动画css动画使元素从一种样式逐渐转变为另一种样式。css动画有3种实现方式,transition实现渐变动画;transform转变动画;animation实现自定义动画。(一)transition有4种属性,分别为:transition-property规定设置过渡动画的属性,如width,height等transition-duration设置动画执行一个周期的时间transition-timing-function规定动画执行的速度曲线原创 2021-04-26 21:52:33 · 743 阅读 · 0 评论 -
JS实现jQuery的attr()与on()方法
JS实现jQuery的attr()、on()方法这里用原生JS实现的attr()、on()方法,与jQuery里的attr()、on()方法一样能够进行链式调用。回顾jQuery中的attr()与on()方法attr()设置或返回相应元素的属性值,与原生JS中的setAttribute()方法相似on()在被选元素上添加事件及其事件行为(此方法在jQuery1.7后逐渐代替bind()、live() 和 delegate() 方法)原生JS实现attr()方法利用setAttribute原创 2021-04-25 14:51:19 · 1465 阅读 · 0 评论 -
原生JS实现事件绑定
原生JS实现事件绑定原生JS实现事件绑定一共有3种方法,分别为:直接在html标签内绑定<input type="text" onclick="alert(123)">在js代码中绑定(这种方法只能给一个对象绑定一个函数)obj.onclick = function(){};通过事件监听的方式实现事件绑定(可以给一个对象的同一个事件绑定多个函数)//标准浏览器obj.addEventListener("click",function(){},false)原创 2021-04-21 17:24:47 · 444 阅读 · 0 评论 -
CSS响应式布局
CSS响应式布局原创 2021-04-19 14:56:52 · 192 阅读 · 0 评论 -
CSS兼容性问题
CSS兼容性问题浏览器兼容性问题比较多,一时也无法总结全面,这篇文章实时更新,在学习前端的过程中遇到一个问题总结一个问题。在IE6下,内容会撑开设置好的宽高(子元素如果比父元素高会撑开父元素)解决办法:计算一定要精确,不要让内容的宽高超出我们设置的宽高在IE6及其以下的浏览器,如果有元素浮动,里面的子元素需要实现由内容撑开宽度的效果(而这个子元素刚好又有高度)解决办法:给里边的块元素都加浮动(这个问题解决后可能还需解决正常浏览器下的父级没有高度包不到浮动子元素的问题).box {原创 2021-04-16 17:22:12 · 409 阅读 · 0 评论 -
判断两个对象相等的方法
判断两个对象相等的方法使用JSON.stringify()方法将obj或array转换为字符串(但是这种方法当对象中属性的顺序不同时会判断为false)var a = { name: 'xxx', sex: 'man', age: 15 } var b = { name: 'xxx', sex: 'man', age: 15 } var c = { name: 'xxx',转载 2021-04-15 11:31:31 · 1329 阅读 · 0 评论 -
CSS选择器及其权重优先级
CSS选择器及其权重优先级CSS选择器CSS选择器一共有12种,分别为:id选择器class选择器标签选择器通用选择器并集(分组)选择器/* 用逗号分隔 */p,.main{ color:red;}交集选择器/* 中间没有连接符号 */p.main{ color:red;}后代选择器子选择器伪类选择器伪元素选择器属性选择器a[href][title] { color:red;}兄弟选择器/* 1. 相邻选择器只能选中紧跟后边的那一个标原创 2021-04-13 21:46:10 · 221 阅读 · 0 评论