![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
文章平均质量分 66
半塘潮汐
这个作者很懒,什么都没留下…
展开
-
禁止浏览器返回事件
禁止浏览器返回事件转载 2023-03-06 10:49:27 · 297 阅读 · 0 评论 -
浏览器返回页面不刷新
浏览器返回页面不刷新原创 2022-08-09 10:03:27 · 711 阅读 · 0 评论 -
swiper子项可滚动
swiper-slide里嵌套滚动容器 【注】:需要滚动的slide的样式要添加 overflow-y:scroll;否则不生效`this.swiper.slides.on('touchstart', function (e) { startScroll = this.scrollTop; touchStart = e.targetTouches[0].pageY; }, true); th.原创 2022-05-21 09:56:14 · 1660 阅读 · 0 评论 -
JS 实现点击复制
引入clipboard.js文件<span class="orderIdTxt" id="orderId" >要复制的内容 类名与复制按钮的data-clipboard-target要相同</span><button data-clipboard-action='copy' data-clipboard-target=".orderIdTxt">复制</button><script>var clipBoard = new Clipboar原创 2022-04-26 17:50:25 · 606 阅读 · 0 评论 -
原生JS添加行内样式
设置行内样式<div style="color: blue;>内容内容内容</div>var divEle = document.querySelector('div');//获取标签var divStyle = divEle.style;//获取行内样式信息通过style设置style对象是CSSStyleDeclaration的实例,包含着通过HTML的style特性指定的所有样式信息但不包含与外部样式,或嵌入式样式层叠而来的样式divStyle.style.原创 2021-07-26 14:45:37 · 3634 阅读 · 0 评论 -
弹性盒子----子元素宽度失效
因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。该属性介绍:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。根据上述介绍可以理解为默认 1 为开启收缩所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto;解决了display:flex下的子元素设置宽度无效的问题。...转载 2021-07-19 13:55:14 · 2320 阅读 · 0 评论 -
将master分支合并到本地分支
切换分支到mastergit checkout master拉取master分支上的最新内容git pull切换到要合并的分支git checkout wangjy请求合并git merge master -m 合并原因原创 2021-07-06 17:19:04 · 947 阅读 · 0 评论 -
React
React 中 keys 的作用是什么?Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。render () { return ( <ul> {this.state.todoItems.map(({item, key}) => { return <li key={key}>{item}</li> })} </ul> )}在开发过程中,我们需要保证某原创 2021-06-15 08:54:11 · 82 阅读 · 0 评论 -
函数、闭包
js 中万物皆对象函数: 必须被调用才能执行函数分类:匿名函数、具名函数、自执行函数函数声明方式:通过 function 关键字声明函数: (函数声明式) function 函数名(){}通过函数表达式声明函数 (函数表达式) let 变量名 = function(){}两种声明方式的区别:函数声明式声明函数,可以在函数声明前后调用 : js 优先解析函数的声明和变量的声明函数表达式声明的函数,必须在函数声明后进行调用,如果在函数声明前调用会报错(原因是函数存在函数提原创 2021-05-31 16:05:21 · 211 阅读 · 0 评论 -
函数的继承
继承面向对象开发: 封装 继承 多态面向对象开发: 封装 继承 多态封装:一、函数方式二、闭包的方式三、对象的方式 (面向对象)1、工厂模式2、构造函数模式3、原型模式4、混合模式(构造函数+原型)多态:多态是指一个引用(类型)在不同情况下的多种状态。也可以理解成:多态是指通过指向父类的引用,来调用在不同子类中实现的方法es5的继承的方式 推荐 es6 的 classes5 类: 构造函数es6 定义类: class定义class , 生成实例化对象时依然通过ne原创 2021-05-31 16:04:00 · 1139 阅读 · 0 评论 -
深拷贝、浅拷贝
深拷贝和浅拷贝深拷贝:拷贝数据浅拷贝:拷贝的是地址, 而不是真正的数据json对象和对象的区别:json对象:json对象是一种轻量级的数据交换格式;专门进行网络传输数据, 服务器给客户端传递的数据都是以json字符串的形式传递json对象严格的语法格式: 键必须使用双引号进行包裹, 如果值是字符串类型,也必须是双引号对象(包含所有的对象):js中万物皆对象 , 只有对象才拥有属性和方法对象:数据类型 let obj = {name:’’, say:function(){}}防抖和节流都是性原创 2021-05-31 16:02:47 · 71 阅读 · 0 评论 -
防抖和节流
防抖和节流函数防抖 debounce:用户一直触发事件,事件处理函数是不会执行的,直到用户在指定的时间内不在触发该事件,则执行一次事件处理程序(防抖意味着事件处理程序只会执行性一次)函数节流 throttle:用户一直触发事件,事件处理函数会每间隔指定的时间后执行一次, 在指定的时间内不会反复执行;(节流意味着事件处理程序每间隔指定的时间执行一次)防抖和节流的区别:防抖是将多次执行变为最后一次执行,节流是将多次执行变为每隔一段时间执行防抖和节流的实现方式: 计时器和时间戳 (为了防止变量污染,通过闭原创 2021-05-31 16:02:05 · 108 阅读 · 0 评论 -
Promise(解决回调地狱)
Promise() 对象:存在三种状态:进行时 pending成功 resolve失败 reject状态的改变 只能从 pending 转换为 resolve; 或者 从pending 转换为 reject; 如果处于pending状态,永远不知道下一步转换为什么状态Promise() 接受一个函数作为参数; 函数存在两个参数(这两个参数是js原生提供的) 一个是resolve, 一个是rejectPromise()的执行机制:如果Promise()执行成功,则会调用执行 resolve()原创 2021-04-22 09:46:35 · 215 阅读 · 0 评论 -
宏任务与微任务
宏任务和微任务:宏任务: 主线程上的任务都是宏任务微任务: Promise 的then宏任务和微任务的分类宏任务:setTimeoutsetIntervaljs主代码setImmediate(Node)requestAnimationFrame(浏览器)微任务:process.nextTick (nodejs的方法)Promise的then方法async与promise结合使用async 函数调用的位置 很关键 : 该函数调用是在 promise() 实例化之前 (按照正常的分析原创 2021-04-01 20:34:38 · 102 阅读 · 0 评论 -
ES6class继承
class 类// function Dog(breed,color,age){// this.breed = breed;// this.color = color;// this.age = age;// }// Dog.prototype.bark = function(){// alert("汪汪汪")// }// var dog = new Dog("泰迪","棕色",5);// ------------- ES6写法 ------------原创 2021-03-16 18:50:48 · 83 阅读 · 0 评论 -
构造函数、继承
构造函数1.什么是构造函数定义:在js中,使用new关键字来调用的函数,被称为构造函数。构造函数的作用:创建对象。2.为什么要使用构造函数假如需要创建多个类似的对象,我们会书写很多重复的无意义代码。此时我们使用构造函数,方便快捷的创建一个对象。如何封装一个构造函数将一个对象的特征作为属性,将它的行为作为方法。function Dog(name,age,breed,color){ this.name = name; this.age = age; this.breed原创 2021-03-16 18:50:25 · 133 阅读 · 0 评论 -
js事件
文档碎片1.创建50W个节点,添加到页面上。50W个创建 50W次插入2.先创建50W个节点,将50W节点插入到一个节点中,再将这个节点插入到页面中。JS基本事件1.什么是事件一件事情发生了,对其进行处理或者响应。2. 事件的三要素事件源,事件类型,事件处理比如:点击右上角的X,页面关闭。 事件源:X,事件类型:点击 事件处理:页面关闭。谁引发的后续事件,谁就是事件源。事件源:DOM节点(一般为元素节点)事件类型事件处理 函数(代码块)事件类型:1.鼠标事件2.键盘事件原创 2021-03-01 12:10:45 · 223 阅读 · 1 评论 -
ES6数组、对象的扩展
数组的扩展forEach格式://第一个参数为函数 //函数的第一个参数 是遍历的当前元素 //函数的第二个参数 当前元素的下标 //函数的第三个元素 数组本身。//第二个参数为:函数中this指向。arr.forEach(function(item,index,arr){ },obj);var arr = [ "千与千寻", "肖申克的救赎", "谁先爱上他的", "哈尔的移动城堡", "海上钢琴师"]var lis =原创 2021-02-25 20:00:42 · 144 阅读 · 0 评论 -
ES6函数扩展
函数扩展1.函数参数的默认值ES6之前,不能为函数的参数设置默认值,只能在代码中进行判断function show(a,b){ if(typeof b === "undefined"){ b = 0; } console.log(a,b);}show(1);ES6的写法function show(a,b=0){ console.log(a,b);}show(1);设置默认值的参数应该在函数的最后面,否则默认值设置是无效的。 functio原创 2021-02-25 18:55:34 · 54 阅读 · 0 评论 -
ES6的变量定义let const
let1.ES6简介ECMA是一个标准 JavaScript是ECMAScript的实现。ES6是ECMAScript的一个版本,是2015年发布的,ES2015.2.let关键字ES6新增的关键字,用来声明变量。用法类似于var,但是所声明的变量,只在let所在的代码块有效。var a = []; for (var i = 0; i < 10; i++) { a[i] = function(){ console.log(i); }原创 2021-02-24 14:35:05 · 168 阅读 · 0 评论 -
jQuery
简介jQuery:(js query:查询 )前端出现之间就已经存在,(write less,do more)做的更多写的更少CRUD(增删改查):create read update delete核心工能:查询jQuery一个优秀的js函数库(封装了BOM、DOM)plugins:插件(依赖于jQuery的库)jQuery的不同版本:1.X兼容老版本IE文件更大2.X部分IE8及以下不支持文件小,执行效率更高3.X完全不在支持IE8及以下版本提供了一些新的API提供不包括原创 2021-02-24 09:44:05 · 93 阅读 · 0 评论 -
this指向
this指向1.this在每一个函数中,都有一个内置的变量 this。大部分情况下,这个this存储是当前函数的调用者。this的指向在函数定义的时候是确定不了的。只有函数执行的时候才能确定this到底指向谁。2.几种情况1.全局变量中指向windowfunction show(){ console.log(this);//window}show()2.在对象的方法中指向调用者 var o = { a:10, b:{ a:12,原创 2021-02-23 19:00:42 · 148 阅读 · 1 评论 -
正则基本用法
正则js 最初就是用来做表单验证的什么是正则表达式:regular expression js中RegExp类表示正则表达式 它是一个描述字符模式的对象正则作用:1.用来验证字符串是否符合规则2.从字符串中获取一部分符合规则的内容1.通过new关键字来声明一个正则对象第一个参数:正则的主体, 字符串第二个参数 :修饰符 字符串i 不区分大小写g 全局匹配m 换行匹配2.通过字面量来赋值var str = /主体/修饰符; var str = new RegExp("a原创 2021-01-21 18:52:06 · 414 阅读 · 0 评论 -
JSON字符串、存储方式
jsonjson字符串json格式的字符串“abc123truelkgsjhgo” 普通字符串“hgahgo” html格式字符串键值对格式 键和值都需要用双引号去包括‘“name”:“yasuo”’json用途:在网络传输时使用。 比如前后端交互。不能够传输对象和数组的。只能通过字符串形式去传输数据。所以说我们如果要传输对象和数组,我们需要将其转换为字符串。json格式就是满足对象和数组数据结构的一种字符串json的使用方法:JSON.parse()把json格式的字符串原创 2021-01-21 18:51:54 · 4855 阅读 · 1 评论 -
DOM节点操作
概念dom:docment object model 文档对象模型DOM 都是由节点组成的节点可以分为三大类:元素节点 html标签文本节点 标签中的文字(空格,换行)属性节点 标签的属性学习dom,就是学习对节点的操作修改:修改DOM节点的内容。遍历:遍历DOM节点下的子节点,方便下一步操作。添加:在DOM节点下添加一个子节点。删除:将该节点从HTML中删除。也相当于删除了它包含的所有内容以及所有子节点。DOM可以做什么:1.找对象(元素节点)2.设置元素节点的属性值、3。原创 2021-01-13 15:37:12 · 221 阅读 · 0 评论 -
BOM——location、history方法使用
https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1http https 传输协议www.baidu.com 域名?fr=aladdin 查询字符#2_1 hash(锚点定位)location对象:里面存储了和网页地址所有内容有关的信息。属性:href:地址信息。跳转页面:location.href = “XXX”;search:查询字符串 一般是用于传输数据,需要进行解析。原创 2021-01-09 12:17:39 · 291 阅读 · 0 评论 -
定时器、秒表、BOM、倒计时
定时器在js中定时器有两种1、setInterval()2、setTimeout()1、setInterval()格式:var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);【注意】可以写执行的代码,也可以直接传入函数。返回值:启动定时器时,系统分配的编号关闭定时器的方式:1.关闭页面。2.clearInterval();【注意】 clearInterval函数需要一个参数:定时器的编号。 // 定时器声明(执行语句,间隔时间),间隔多久执行一次原创 2021-01-08 19:30:01 · 387 阅读 · 1 评论 -
对象+Math以及Date方法
基础类型number string boolean null undefined引用类型数组 函数 对象对象是指一个具体的事物。万物皆对象。一个具体的事物一般都会有行为和特征。手机:行为:打电话 聊微信 玩和平精英 刷新闻特征:颜色 屏幕分辨率 摄像头像素对象的行为------js对象的函数对象的特征------js对象的属性JavaScript中的对象JavaScript中的对象可以看做生活中具体事物的抽象。js对象是属性+函数的集合属性:可以是基本数据类型,也可原创 2021-01-06 20:49:34 · 124 阅读 · 1 评论 -
函数及应用例子
函数作用1.简化代码2.方便维护3.提高开发效率4.提高了代码的复用性,减少代码冗余格式:function 函数名(参数…){函数执行的代码(函数体)}参数划分:形参:变量,没有固定值,可以被改变实参:常量,固定值,不可以被改变**【注意】**函数先定义后调用分类1.内置函数(官方提供的函数,系统自身拥有函数)alert();document.write();console.log();parseInt();parseFloat();2.自定义函数根据参数和返原创 2021-01-05 20:50:39 · 1336 阅读 · 0 评论 -
数组使用入门+冒泡、顺序排序
数组 array当我们需要处理一组数据时,一定性定义很多变量,比较难处理。这个时候我们就需要用到数组。概念:数组:一组数据的集合。其中每个数据被称为数组的元素。在数组中存放任意类型的数据。数组是将一组数据存储到单个变量名下的方式。数组声明三种声明:1.通过new关键字创建数组。2.省略new关键字创建数组3.字面量赋值// 声明数组 // var arr = new Array(10); // var arr = Array(10); //原创 2021-01-05 17:18:12 · 152 阅读 · 0 评论 -
流程语句
程序的三大流程语句顺序:从上往下执行选择:根据不同的情况,执行相应的操作循环:重复做一件事情1.顺序:最基本最简单的程序流程结构2.选择3.循环选择if(){…}else{…} 格式: if(条件表达式){ //条件为true时,执行的代码 }else{ //条件为false时,执行的代码 }【注】小括号中可以写任何表达式,但是推荐使用条件表达式。var grade = prompt("请输入你的成绩:");原创 2021-01-04 09:03:03 · 216 阅读 · 0 评论 -
rem+vw、vh+sass
remem:相对单位,它需要一个参考属性。当前元素的字体大小。rem:相对单位 root em。 参考值为:HTML根标签的font-size的值。iPhone5 320px 上面有640个像素点。 1px=1个物理像素点 1px=2个物理像素点。 160/320 一半iPhoneX 375px 187.5rem布局的原理:动态修改html根标签中的font-size值。实现方式:1.通过js2.通过vw。vm、vh百分比布局缺点:1.计算百分数不方便。2.多层嵌套时使用不原创 2020-12-25 08:52:45 · 376 阅读 · 1 评论 -
H5新增标签+BFC+三栏布局+移动端
H5标签在IE9(包括IE9)之前都需要转换成块级元素 display:block在移动端就不需要考虑兼容问题。 H5+css3可以放心的在移动端使用。1.nav 定义导航2.header 表示网页的头部。通常是一些导航信息或者标题。3.article 表示一块独立的部分。4.aside 对article的内容进行信息的辅助解释。次要信息,比如博客网站中的侧边公告,或者广告,分类等信息。5.section 文档中的一个节点或者区域。6.footer 页面的底部。通常是链接或版权信息7.hg原创 2020-12-25 19:10:08 · 336 阅读 · 0 评论 -
弹性盒子flex
声明定义使用display:flex或display:inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们,会遵循弹性布局。【注】一般是使用display:flex. inline-flex极少用。flex:如果没有为父元素设置宽,默认为100%;inline-flex:如果没有设置宽,,默认为所有子元素的宽的和。flex-direction 用于设置盒子中的子元素的排列方向。 row 从左到右水平排列子元素(默认值) column 从上往原创 2020-12-21 19:49:46 · 243 阅读 · 0 评论 -
css过渡+2D、3D转换+动画
w3c会员:各大互联网巨头它设定了整个平台的规则,监督整个过程。现在学习的是css2.1 但是到css3时,就要考虑兼容性问题。浏览器前缀谷歌 苹果 -webkit-火狐 -moz-IE -ms-欧朋 -o-sass过渡,2D转换transition 过渡之前:元素从一个状态到另外一个状态(hover)直接切换,从开始状态到结束状态瞬间完成,中间过程几乎不可见。css3新增了过渡这个属性,可以实现元素不同状态之间的平滑过渡。transition-property原创 2020-12-17 13:33:57 · 180 阅读 · 1 评论 -
CSS中添加背景图+盒子边框样式
background-image*设置图片为背景。*background-image:url("图片路径");background-size:设置背景图片的大小属性值:px 单词单词:都会让图片等比例缩放。cover 将盒子铺满背景图,但是不保证图片的完整显示。contain 将图片完整的显示,不保证铺满盒子。background-repeat设置背景图片是否重复以及如何重复,默认为平铺满。属性值:repeat:平铺 默认值no-repeat:不平铺repeat-x原创 2020-12-15 13:59:15 · 5574 阅读 · 0 评论 -
父盒子塌陷+定位
子盒子浮动后防止父盒子塌陷方法1:给父盒子设置高度不推荐 内容区固定方法2:让也父盒子浮动不推荐 影响后面的元素布局方法3:父框转化为行内块不推荐 后果与添加浮动一样,影响后面的元素布局方法4:在父框样式中使用over-flow:hidden不推荐 设置固定高度时,内容太多溢出,同时也超出了父框自适应子框的高度,此时溢出内容将会被隐藏方法5:专门清除浮动clear:both/left/right清除两边/左边/右边的浮动方法6:在父框最后添加一个空标签(样式使用cle原创 2020-12-14 09:01:51 · 655 阅读 · 0 评论 -
css基本类名命名(见名知意)
常用的CSS命名规则1.注释的写法:/* Footer /内容区/ End Footer */id的命名:(1)页面结构容器: container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center(2)导航导航:nav主导航:mainbav子导航:subnav顶导航:topnav边导航:原创 2020-12-07 17:08:55 · 644 阅读 · 0 评论 -
css盒模型基本概念+浮动
基本概念盒子:容器 盒子模型 英文:box model。最常见的盒子是div span盒子中的区域:content(内容区),宽和高指的是内容区的宽与高1.宽 width px content2.高 height content3.内边距 padding4.边框 border5.外边距 margin【注】标准盒模型的宽和高和盒子真实占有的宽高不是一个概念。背景色:background-color会渲染除了外边距的整个盒子(边框、内边距、内容区)盒子真实占有的原创 2020-12-09 20:52:46 · 170 阅读 · 0 评论 -
CSS样式基本属性(标签权重对比)
继承有一些属性给父类或祖先元素设置后,其后代元素也会继承该样式,这就叫做继承性。继承性是从当前元素开始,一直到最小的元素。后代元素能够继承来自祖先元素的文字样式。这些属性包括:color,text-开头,line-开头的,font-开头的。关于盒子、定位、布局的属性,不能被继承。样式表:行内式>内嵌式与外链式 (就近原则)样式权重选择器:ID选择器>类选择器>标签选择器复杂选择器权重的计算比较,数基础选择器的数量:ID选择器的数量 类选择器的数量 标签选择器的数量原创 2020-12-08 20:40:14 · 462 阅读 · 0 评论