js
前端J先生
三千弱水,只取一瓢饮,独爱一人,岗位千千万,惟爱前端!!!
展开
-
Mysql安装步骤
无原创 2023-02-28 16:10:14 · 178 阅读 · 0 评论 -
高德地图和百度地图去掉左下角标记
这是在vue中的用法,在原生js中去掉。原创 2023-02-27 14:54:17 · 861 阅读 · 0 评论 -
npm镜像源
【代码】npm镜像源。原创 2023-02-26 17:35:51 · 262 阅读 · 0 评论 -
Vue手写封装模态弹出框(若水封装,亲测可用)
组件代码<template> <!-- 遮罩层 --> <div v-show="isMask" class="mask" @touchmove.stop @mousewheel.stop> <!-- 内容 --> <slot></slot> </div></template><script>export default { props: {.原创 2022-05-31 16:47:20 · 1202 阅读 · 0 评论 -
使用setTimeout模拟setInterval
这里说一下为什么要用setTimeout模拟setInterval场景再现如果使用setInterval,里面的回调函数中,需要执行比较长的事件,例如setInterval一个1秒钟的时间,然后callback中需要执行3秒,下一个setInterval并不会等待上一个的setInterval的callback执行完毕才执行,这样就有可能出现同一时间触发多次setInterval的callback,然后导致页面的奇怪现象。另外这样也容易造成内存溢出。而使用setTimeout代替setInterv.原创 2022-05-12 10:00:36 · 2811 阅读 · 0 评论 -
手写DOM监听器
网页加载的时候,DOM 节点的生成会产生变动记录,因此只要观察 DOM 的变动,就能在第一时间触发相关事件,也就没有必要使用DOMContentLoaded事件。(function(win){ 'use strict'; var listeners = []; var doc = win.document; var MutationObserver = win.MutationObserver || win.WebKitMutationObserver; var observer.原创 2022-03-30 10:31:13 · 214 阅读 · 0 评论 -
target和currentTarget的区别
event对象中的target和currentTarget的区别event.target:返回触发事件的元素event.currentTarget:返回绑定事件的元素根据场景不同需要使用不同的对象进行实现原创 2022-01-20 11:21:01 · 318 阅读 · 0 评论 -
js事件记录(如有更新请留言我去补充)
鼠标事件click:单击鼠标按钮时触发dblclick:当用户双击鼠标按钮时触发mousedown :当用户按下鼠标按钮时触发mouseup:当用户松开鼠标按钮时触发mousemove:当鼠标指针在元素上移动时触发;mouseover:当鼠标移到某个元素上方时触发;mouseout:当鼠标移出某个元素上方时触发;mouseenter:在鼠标光标从元素外部首次移动至元素范围内触发,不参与冒泡;mouseleave:鼠标移出;mouseupoutside:鼠标按下,移出对象松开;原创 2021-09-09 10:29:26 · 333 阅读 · 4 评论 -
页面中的位置:client、page、screen、offset、以及元素视图位置的区别和方法
client、page、screen、offset区别clientX 鼠标相对于浏览器左上角x轴的坐标 ; 不随滚动条滚动而改变 ;clientY 鼠标相对于浏览器左上角y轴的坐标 ; 不随滚动条滚动而改变 ;pageX 鼠标相对于浏览器左上角x轴的坐标 ; 随滚动条滚动而改变 ;pageY 鼠标相对于浏览器左上角y轴的坐标 ; 随滚动条滚动而改变 ;screenX 鼠标相对于显示器屏幕左上角x轴的坐标 ;screenY 鼠标相对于显示器屏幕左上角y轴的坐标 ;offsetX 鼠标相对于事.原创 2021-09-09 10:18:26 · 1014 阅读 · 0 评论 -
使用npm init需要注意的事情以及pageck.json文件介绍
npm init命令创建一个pageck.json文件,其中下一步会提示你这些事情;一般都是直接下一步下一步,这些都不看的pageck name: (默认项目名字) =>也可以写其他别名version:(1.0.0)=>默认是1.0.0 也可以写其他版本description: 默认空 =>描述entry point:(index.js) =>入口文件默认是index.jstest command: =>测试代码git repository: =>是否原创 2021-08-24 22:08:35 · 926 阅读 · 0 评论 -
rgb的颜色转换以及十六进制转为十进制的那些事
RGB颜色rgb 颜色为三原色的意思, 分别为 red 红色 green 绿色 blue 蓝色取值范围为: 0-255十六进制//十六进制为十六个数,分别为0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f//遵循逢十六进一//十六进制的值只要每俩位为一样的都可以简写#ffaacc; 简写:#fac;//十六进制转换位十进制//取第一位*16+第二位的数字例如#ff0011;//这里的f相当于15F*16+F=255;F*16=240+15=255;0*16+原创 2021-06-20 19:28:46 · 2966 阅读 · 0 评论 -
VsCode开发者插件
文件头部注释代码块插件koroFileHeader文件路径 时间 信息等原创 2021-05-24 12:25:14 · 256 阅读 · 0 评论 -
无限调用接口且不卡死页面的方法
setInterval无限调用除非手动清楚,而setTimeout是每调用一次就清除一次 setInterval(()=>{ setTimeout(()=>{ // 写调用接口方法 }, 0); },500);原创 2021-05-10 17:08:38 · 923 阅读 · 0 评论 -
设置input框只能输入6位为数字的支付密码
<input type="text" maxlength="6" onkeyup="value=value.replace(/[^\d\.]/g,'')" />原创 2021-05-05 10:07:18 · 2111 阅读 · 0 评论 -
专门删除input原生的number框的加减键
这是专门删除input原生的number框的加减键 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield;}原创 2021-04-30 18:49:34 · 365 阅读 · 1 评论 -
layui省市区三级联动
实现原理:通过省区的id进行调用市区的下拉列表,在通过市区的id调用县区的下拉列表进行显示,牵一发而动全身,如果是赋值的话,就采用form,val()最后赋值//通过三级联动进行调用这是html代码<div class="layui-form-item"> <label class="layui-form-label required">地区选择</label> <div class="layui-input-inline" style=.原创 2021-04-18 14:45:01 · 2781 阅读 · 8 评论 -
取消原生input的属性number的加减框
消除普通浏览器的采用这种 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 兼容ie浏览器采用这种 input[type=number] { -moz-appearance:textfield; .原创 2021-04-11 16:34:36 · 504 阅读 · 0 评论 -
前端模块化开发规范
前端日益渐增的复杂化,使我们前端越来越偏向于代码复用性考虑,采用了模块化开发,但是模块化开发有以下几个规范,我将一一讲解.前端模块化开发规范分为CommonJs,Amd,Cmd,es6模块化.commonJSCommonJS规范是在node模块系统基础上创建出来的,CommonJS在服务器中使用,不能在浏览器环境中使用。CommonJS规范规定每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(module.exports)是对外的接口。加载某个模块,其实是加载.原创 2021-03-13 12:58:47 · 341 阅读 · 0 评论 -
JavaScript的ES5模块化开发
ES5模块化开发在没有es6之前采用es5的时候也是需要模块化开发的,下面就详细讲解一下es5模块化开发.//html代码(在底部引入js文件)<scrpit src='aaa.js'></script><scrpit src='bbb.js'></script>现在我们bbb里面使用aaa的代码aaa.js//创建闭包环境是防止变量污染,全局变量命名冲突,如果没有返回值最好采用下面这种写法,防止代码没有结尾//引起文件互相干扰等一系原创 2021-03-12 23:05:44 · 509 阅读 · 0 评论 -
浏览器本地存储操作
localStorage PC浏览器(本地永久保存,除清空外)sessionStorage PC浏览器(关闭窗口就清空数据)浏览器存储操作localStorage 永久存储localStorage.setItem(key,value) 保存数据localStorage.getItem(key) 获取数据localStorage.removeItem(key) 删除数据localStorage.clear(); 删除全部数据 sessionStorage临时存储sessionSt原创 2021-02-23 18:29:56 · 392 阅读 · 0 评论 -
for循序为何要用let?
在ES5当中使用for循环都是采用var,而在ES6中都是采用的let,并且我们更推荐于let,这是为何?因为var是在js语言设计者Brendan Eich设计的一种缺陷,这种缺陷不能更改,并且作者在十年前就提出了修复此缺陷.在进行讲解的时候,小伙伴们需要知道在js语言中,if和for是没有作用域的,只有function才拥有,var是全局变量,let是块级作用域,const是常量(不可改变的变量称为常量);可以把let看做成更完美的var//ES5中使用for循环点击事件 //bug:每次点击.原创 2021-02-17 18:20:32 · 1516 阅读 · 4 评论 -
在线引入前端任何框架或库
点击进去搜索在线引入库或框架很多前端小伙伴在引入前端框架和库的时候需要耗费很长时间进行搜索进行引入,很耗费时间而这个网站帮忙给大家解决了这个难题,如果感觉可以点个关注可好...原创 2020-12-28 12:40:45 · 262 阅读 · 0 评论 -
为什么不推荐使用var,而是推荐你使用let
//因为var创建的变量是挂载在window顶级对象上面的,全局变量比较多的情况下通通都会挂载到window顶级对象上面,如果跟之前定义的对象重复则会改变之前定义的值,变量造成污染原创 2020-12-18 19:32:23 · 1791 阅读 · 1 评论 -
JavaScript模块化的那些事最骚操作
模块化是一个很重要的编程思想,如果没有模块化,把代码写到一个文件里会造成代码很难阅读,并且文件体积也会变大,模块化就是把功能相似的代码放到一个文件中,然后通过模块导出让别人文件可以使用的代码,其他文件就可以通过导入进行使用模块中的导出的代码,这样就可以提高代码的复用性和封装性导出模块 export导出代码具体点叫导出模块//es6原生支持模块化的加载export 关键字 导出模块export function formdata(){console.log('我是菜菜')}导入模块.原创 2020-12-16 19:29:42 · 189 阅读 · 0 评论 -
JavaScript的异步操作
JavaScript的代码一般都是同步执行的,但是在一些情况下是异步执行的,在需要耗费时间的代码上他会持续等待,完成之后再继续往下执行,异步就是把代码放到另一个地方执行,执行完成后再把结果返回同步代码中,剩下的代码继续执行setTimeout 把代码推迟执行//一秒后执行 他会返回一个id,可以把id存储成一个变量 var timer=setTimeout(()=>{},1000) //停止setTimeout clearTimeout(timer)setinterval 每隔一段.原创 2020-12-15 22:24:05 · 365 阅读 · 0 评论 -
JavaScript的异常捕获一看就懂系列
异常是指程序发生了错误,无法继续运行,js中如果发生错误则不会在往下执行捕获异常之后程序就可以继续正常运行了//捕获异常 这是系统抛出的异常try 监控出现错误的代码catch 抛出错误或者异常finally 无论是否出现错误都会执行try{错误代码块} catch(err){//打印异常信息console.error(err)}finally {}主动抛出异常throw 关键字 抛出异常function (){throw '404';}抛出的是一个错误对象e.原创 2020-12-15 21:38:40 · 476 阅读 · 0 评论 -
Js内置对象那些可怕的事
内置对象NumberparseInt() 整数parseFloat() 浮点数isNaN() 判断是不是NaN 返回布尔值toFixed(value) 设置保留几位小数,且会四舍五入返回字符串Number.MAX_SAFE_INTEGER;最大数Number.POSITIVE_INFINITY; 无限正数大Number.NEGATIVE_INFINITY; 负数无限大Math内置对象、数学函数Math.PI 圆周率Math.abs() 计算绝对值Math.sin() 计算圆周.原创 2020-12-15 13:43:22 · 119 阅读 · 0 评论 -
JavaScript的正则解读
正则表达式正则表达式是用来表达字符串的规格和模式的,可以用来判断字符是否符合用途和规则,比如验证邮箱验证手机号等创建正则表达式字面量创建正则表达式,斜杠中间写条件var str=//;RegExp创建正则表达式,以字符串的形式写条件var re=new RegExp('wh')执行正则表达式//传递一个变量,需要执行正则判断的数据,返回正则匹配到的内容str.exec(value)//传递一个变量,需要执行正则判断的数据,返回true或者falsestr.test(v.原创 2020-12-14 23:53:04 · 143 阅读 · 0 评论 -
JavaScript之字符串系列(菜菜笔记)
字符串的定义字符串是编程语言里最常用的类型,用来显示文本信息//创建字符串单引号let a='12121';双引号let b="fajjf";模板字符串let c=`大大`;new String创建new String('你好')//String{0:'你',1:'好'}转义字符一般键盘上无法打印出来或有冲突的字符都可以采用转义字符//如果都是用了双引号,由于第一个双引号会以最近的那个结尾就用到了转义let a="你说:"狗子不爱你了""可以使用转义let a.原创 2020-12-13 23:03:10 · 133 阅读 · 0 评论 -
JavaScript对象系列(菜菜出品,必看!!!)
创建对象的几种方式,创建对象是基于对象原型进行创建//字面量创建对象//对象是采用key:value键值对方式进行存储值,可以通过key来获取到他的值,多个属性采用逗号分开//如果有下划线和中划线之类的可以让字符串当key,访问带有特殊字符的必须以花括号进行访问//如果key和value里面的值都一样可以写成一个,函数也一样let obj={a:2,b:32,'a-vb':5};let obj1=new Object();obj1.name='112'//对象的值可以是任意数据类型,值.原创 2020-12-10 22:51:23 · 114 阅读 · 0 评论 -
JavaScript的数组教程(最详细,更新至es6新语法)
创建数组的几种方式,最全面//第一种 字面量创建var arr1=[1,23,4];//第二种 new Array() 这是一个构造函数创建方式var arr2=new Array(1,223,34);//第三种 Array 也是构造函数方式创建var arr3=Array(23,21,333);//第四种 Array.of()var arr4= Array.of(2,34,2);//第五种 Array(数量).fill(value)var arr5= Array(4).fill(1.原创 2020-12-10 12:54:01 · 289 阅读 · 0 评论 -
JavaScript回调函数(菜菜必看系列!!!)
回调函数是把函数当做参数进行传递,并执行,一般都是作为最后一个参数进行传递的,这样可以需要的时候就传递进去,不需要的时候不传递function request(a,b,cb){console.log(a)cb()console.log(b)}request(1,2,()=>{console.log('hahha')})...原创 2020-12-10 12:32:20 · 380 阅读 · 0 评论 -
JavaScript函数科里化
科里化>科瑞把一个接受多个参数的函数,变成一系列接受一个参数的内部函数,这样他们的值就能保留//普通函数function add(a,b,c){return a+b+c;}console.log(add(1,2,3))科里化函数function addcurren(a){retun addsix(b){return addhi(c){return a+b+c;}}}console.log(addcurren(1)(2)(3))因为每次return出来的都是.原创 2020-12-09 20:49:30 · 254 阅读 · 0 评论 -
javascript闭包的理解(菜菜必看系列!!!)
函数内在定义函数这样就形成了一个闭包环境,内部函数可以访问外部函数作用域的变量,如果外部函数不暴露这个内部函数,外界就不知道这个内部函数的存在,只能在自己内部使用//计算数字的平方function sum(a,b){ function sque(x){ //计算平方return x*x;}return sque(a)+sque(b)}console.log(sum(2,3))函数内部调用函数就叫闭包如果把内部函数返回出去,就变成了一个高阶函数一个函数返回另一个函数叫做高阶函数.原创 2020-12-09 20:25:47 · 98 阅读 · 0 评论 -
JavaScript递归的理解(最详细)
工作中闭包使用很多,递归很少用到,但是也是都要掌握的闭包:原创 2020-12-09 19:40:00 · 3141 阅读 · 5 评论 -
JavaScript的函数默认值
函数默认值,如果当前不给值则应该采用默认值,我们在封装请求经常用到function query(name='前端菜菜'){console.log(`你好${name}`)}query()原创 2020-12-09 16:09:10 · 589 阅读 · 0 评论 -
JavaScript的注解
javascript的注解操作,主要应用于大型项目中单行注释//块级注释/**/// FIXME: 或 // TODO: 标注需要复查的问题 // FIXME: shouldn't use// TODO: identify versions@license文件注释 标注文件信息,介绍、版本信息、版权声明、开源协议、修改时间等说明。/* @license 文件信息 */文档注释 描述与指定所有参数和返回值的类型和值的注释标签 /** 文档信息 */.原创 2020-12-07 22:51:54 · 6476 阅读 · 1 评论 -
JavaScript的@param注解
@param是对函数参数进行解释作用,大型项目所用/**//大括号写类型@param{number}a 第一个参数是数字类型@param{number}a 第二个参数是数字类型@returns 返回俩个参数的和*/function add(a,b){return a+b;}结果...原创 2020-12-07 22:27:13 · 28269 阅读 · 9 评论 -
JavaScript的节流和防抖
一句话了解节流和防抖,防抖就是多次函数执行只执行一次,节流就是每隔一段时间函数就执行一次。防抖:多次事件触发,知道不被调用时,最后一次调用。节流:每隔2秒就执行一次,2秒自动执行一次。...原创 2020-12-04 19:27:53 · 79 阅读 · 0 评论 -
阻止form默认提交行为(亲测最详细!!!)
解决问题思路:form表单默认具有提交刷新页面的行为,通过让他向当前页面提交就不会产生刷新的行为,如果要跳转页面,可以让如果数据正确跳转页面,不正确向本页面提交,通过采用iframe可以页面嵌套的方式进行解决<form action="" target="tset"> <input type="submit" value="确定提交" class="info_btn" /></form>form表单解决默认提交有好几种,这是第一种还有通过默认点击事件阻.原创 2020-12-04 18:56:28 · 3496 阅读 · 0 评论