- 博客(31)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 逐步解析防抖与节流
防抖防抖：事件被触发规定时间后再执行回调，如果频繁触发，则重新计算规定时间举个生活中的例子，外面很多便利店、酒店、餐厅等都会有自动感应门，人靠近感应门就会触发开门时间，一定时间后就会关门。假如有家店有个感应门，规定开门5秒后关门，现在陆续有客人进入这家店：第一批客人要进去，门开了，（5,4,3,2,1）5秒内没有人再进来，门关闭；第二批客人要进去，门开了，（5,4,3）等到第三秒又有一批客人要进，门没关，而是则重新计算5秒（5,4,3,2）,等到第四秒又有一批客人要进，门没关，而是又重新计算时间
2021-08-09 08:44:59
346
原创 函数的this与call、apply、bind方法
函数的thisFunction的prototype属性上有这三个方法：call()、apply()、bind()，这三个函数也常被我们拿出来讨论，因为这三个函数与this有关，那现在就来对这三个函数进行总结。语法：call(thisArg, param1, param2, ...)apply(thisArg, [param1, param2, ...])bind(thisArg, param1, param2, ...)相同点：三个方法接受的第一个参数都一样，都是函数内的this值不同点：
2021-07-26 16:19:04
107
原创 总结深拷贝的方法
1.JSON的方法 // JSON的方法返回一个深拷贝后的对象 function deepClone(obj){ let newObj = JSON.stringify(obj) return JSON.parse(newObj) } // 定义一个对象 let me = { name: '彭于晏', age: 18, habbits:['code', 'work_out', 'eat', 'sleep'] }
2021-07-19 21:59:36
239
1
原创 简单写写我的个人简历
前段时间花了一个星期用HTML+CSS+JavaScript简单做了一下自己的个人简历网页版，也算是对自己学的基础知识来了一个总结和查漏吧，部分效果使用了其他库比如JQuery、animate.css和Typed.js。以蓝白色为基础，可能不合大家的口味，就将就看看吧。首页部分：包括了顶部的导航栏部分和中间的背景图部分打字机效果使用了Typed.js特效，大家可以自行去安装使用；导航栏部分也可以点击滑动到响应位置，页面滑动到相应位置，导航栏部分也会有响应的显示效果；还有一个问题就是点击导航栏，下
2021-07-04 09:23:26
319
原创 学习vue的第二天
vue的条件判断v-if="布尔值" <div id="app"> // 通过布尔变量isShow来决定显示与否 <p v-if="isShow">彭于晏</p> <button @click="showPYY">点击显示/隐藏彭于晏</button> </div> <script> var vm = new Vue({ el
2021-06-23 00:36:30
48
原创 学习vue的第一天
①. 动态绑定属性：v-bind绑定属性值为某个标签的属性动态绑定值，在这个属性前加上v-bind:，简写形式 “ : ”。 <div id="app"> // 为img的src属性动态绑定一个变量 <img v-bind:src="imgURL" alt=""> // 为a标签的href属性动态绑定一个变量（简写） <a :href="baiduURL">百度</a> </div>
2021-06-21 23:41:43
103
原创 Promise学习
文章目录Promise的理解什么是PromisePromise的状态Promise的使用resolve方法reject方法all方法race方法Promise的理解什么是PromisePromise是JS解决异步编程的新的解决方案。Promise是一个构造函数，promise对象对异步操作以及获取的结果进行封装。Promise的状态pending 变为 fulfilled，表示成功pending 变为 rejected，表示失败Promise的状态改变只有这两种，不能从fulfilled
2021-06-19 22:59:34
77
原创 打通Ajax的任督二脉！
Ajax知识点梳理介绍AjaxHTTP协议什么是HTTP请求响应介绍AjaxAjax(Asynchronous JavaScript And XML)，异步的JavaScript和XML，通过Ajax可以在浏览器中向服务器发送异步请求而不需要刷新重新获取数据。这么说可能比较抽象，举几个实际案例：在搜索框中输入关键词而出现的关键字猜测提醒：京东的分类栏加载：当鼠标移入时会出现端在的加载画面，随后就出现而二级三级菜单这些都是Ajax通过向服务器端发送异步请求，然后服务器端返回给我们的数据，而这些
2021-06-18 21:38:47
71
原创 JS之面向对象
JS的面向对象关于类和对象如何理解类与对象对象类创建类和对象关于类和对象如何理解类与对象类：抽取公共属性和行为封装成一个类（模板），泛化的、抽象的对象：对类进行实例化，一个具体的对象，具体的、特指的类和对象的区别是什么呢？举两栗子：栗子一：A：其实养二哈挺好的，就是有点废家。B：确实确实，我家都快被我那只二哈拆完了。栗子二：A：最近想买手机了，你觉得华为mate40pro怎么样？B：我现在用的这部就是华为mate40pro，我觉得挺好用的，推荐。上面两段对话中，A说的“二哈”和“华
2021-06-16 18:13:20
68
原创 原型的一些操作方法
自定义对象的原型设置自定义了个父子对象，可以看到儿子的原型是指向Object构造函数的： let son = { name: 'son' }; let father = { name: 'father', myFn() { console.log(`${this.name}调用了father对象内的myFn方法`); } };
2021-06-15 16:42:56
959
原创 探究JS的原型
JS的原型与继承学习构造函数prototype原型对象对象原型构造函数我们创建对象有3种方法，通过Object对象进行创建、字面量形式创建、构造函数形式创建，而要批量创建对象，用构造函数时比较合适的： function User(name, age) { this.name = name; this.age = age; this.coding = function() { console.log
2021-06-15 16:41:37
111
1
原创 让你看到不一样的JS对象
JS知识点学习操作对象的基本方法访问对象属性添加对象属性删除属性对象的传址对象的展开语法对象的解构赋值操作对象的基本方法访问对象属性访问对象属性可以用 点“.”语法 和 中括号“[ ]”语法 访问： let uesr = { name: '彭于晏' } console.log(user.name); // 彭于晏 // 使用中括号要用字符串的形式访问 console.
2021-06-13 22:49:30
72
原创 就这次，把闭包给你整明白了！
闭包函数的环境与作用域理解什么是环境与作用域关于环境的生命周期闭包什么是闭包？闭包代码实例函数的环境与作用域理解什么是环境与作用域环境，用我们的生活举例子，环境就好像我们的周边设施，学校，超市，药店，公园等，各种设施构成了我们的生活环境。作用域，就好像这些周边设施一般都是只能服务于周边的居民，不可能说有人大老远千里迢迢来超市买瓶水再千里迢迢赶回去吧，所以说作用域指的就是这些设施的服务范围。说完了生活的栗子，再返回到代码上吧。环境可以理解为我们定义的一些变量（数据、内存），而作用域指的就是这些变量的
2021-06-12 15:26:31
79
原创 JS的函数知识点学习
JS的函数知识整理函数的定义全局函数与模块化函数默认参数arguments与...arguments回调函数函数的定义字面量形式： function fn() { // 函数语句 }匿名函数赋值方式： let fn = function(){ // 函数语句 {该函数存在变量提升，需要定义完函数后再执行，否则报错： fun(); let fun = function() { console.lo
2021-06-11 18:10:47
129
原创 关于数组的运用场景
数组运用的几个案例获取购物车商品的总价格商品的最高销量获取销量超过***的商品数组去重获取购物车商品的总价格 // 定义商品信息为元素的数组 let cart = [{ name: 'clothes', price: 430 }, { name: 'phone', price: 3599 }, { name: 'books',
2021-06-10 12:36:34
522
原创 JS数组的基操总结
JS数组的基本操作定义数组使用new构造函数定义使用字面量方式定义(更加简洁）数组的类型及类型转换数组的类型数组与字符串的转换查找数组元素索引号进行查找：indexOf(从头开始查找）：lastIndexOf(从尾开始查找):includes()find与findIndex方法数组添加元素通过下标追加元素push方法追加unshift在数组首位添加展开语法合并数组concat()合并数组删除数组delete运算符pop()方法删除数组最后一个元素shift()方法删除数组第一个元素splice数组切片sli
2021-06-10 00:00:39
136
原创 rem单位的使用
remrem（root em）是一个相对单位，rem是根据html的字体大小来改变样式的大小。 <style> html { font-size: 24px; } div { width: 10rem; height: 20rem; background-color: pink; } </sty
2021-06-07 23:05:38
796
原创 flex布局知识梳理
flex布局知识梳理flex的前言flex布局的基本概念flex布局的概念关于主轴与侧轴flex父元素属性1.flex-direction2.justify-content3.flex-wrap4.align-items5.align-content6.flex-flowflex子元素属性1.flex属性2.align-self属性3.order属性flex的前言当我们在制作页面的时候，使用传统的布局方式会比较繁琐，浮动定位等各种需要考虑；而flex布局就表现的极为简单，可以很轻松的解决盒子的伸缩和排列
2021-06-07 16:48:56
146
原创 logo的SEO优化，原来这样的logo才是一个好logo！
什么是SEOSEO（Search Engine Optimization），中文名叫搜索引擎优化。百度百科的解释：是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名一个具有注脚的文本。通俗的说法，就是当别人通过关键词进行搜索时，让你的网站优先出现在前面或者首位的一种技术和优化思路。关于网站logo的SEO优化当我们在写网站的时候，做到logo的时候，如果我们只是简单的放一个盒子再将logo图片放上去的话，SEO不会认为你的这个logo是一个好logo，就不会让用户在搜索关键字的时候让你的网站出
2021-06-06 23:07:02
349
原创 文字溢出了怎么办？省略号解决！
单行文字溢出省略号显示 <style> div { width: 100px; height: 100px; border: 1px solid black; } </style> <body> <div>我是一大段的文字，你能看得见我吗？</div> </body>首先我们先将文字设置为一行显示，不
2021-06-04 17:33:46
445
原创 CSS也能画三角形！
在画三角形之前，我们先看看三角形是怎么来的:我们先设定一个大小为0，但是大小相同但是颜色不同的4边框，看看会是什么样的效果：<style> div { width: 0px; height: 0px; border-top: 50px solid red; border-bottom: 50px solid pink; border-left: 50px s
2021-06-03 23:44:12
94
原创 解决！外边距合并-嵌套块元素塌陷
什么时候会出现外边距合并的现象呢？两个嵌套关系的块元素，如果父元素和子元素都有垂直外边距，那么父元素会塌陷外边距较大的值，这种现象也就是嵌套块元素塌陷。演示一下，我们定义两个嵌套关系的块元素，父元素贴着浏览器上边，子元素贴着父元素上边 <style> body { margin: 0; } .dad { width: 300px; height:
2021-06-03 20:32:35
263
原创 CSS的定位知识点总结
CSS定位的学习为什么要学习定位？什么是定位呢？static 静态定位（了解即可）relative 相对定位绝对定位 absolutefixed固定定位为什么要学习定位？在学习之前，我们要思考一下，定位出现的意义是什么，有什么用呢？我们学习定位之前学习了浮动，但是我们会发现许多效果难以实现，比如说京东首页的轮播图的左右箭头：然后往下拖，发现顶部和右侧的定位栏会固定在屏幕上：看完这些相比对定位的存在的原因有了一定的了解了吧。什么是定位呢？定位，可以让一个盒子在另一个盒子的内部自由移动，想定到
2021-06-03 13:50:57
156
原创 CSS的选择器总结
CSS选择器基础选择器标签选择器类选择器id选择器通配符选择器复合选择器后代选择器子选择器并集选择器伪类选择器链接伪类focus选择器CSS3新增选择器属性选择器结构伪类选择器伪元素选择器基础选择器标签选择器标签选择器是值用HTML标签名作为选择器，可以把某一类标签全部选择出来。语法格式：标签名{ 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }<style> div { color
2021-06-03 00:33:38
183
原创 JS中数据类型的存储和深拷贝与浅拷贝
关于数据类型及存储要了解深拷贝与浅拷贝之前，我们有必要了解一下JS中的数据类型我们知道JS数据类型分为2类：基本类型：也叫值类型，在存储时变量存储的是值本身。引用类型：在存储时变量存储的是地址。我们定义一个变量和赋值操作时，实际上就是开辟一个内存空间来存放变量，内存又分为堆和栈，堆用来存放引用数据类型，栈用来存放基本数据类型的值。关于2中类型的存储，下面的简图可以说明：首先我们定义了两个基本变量 name 和 age，并赋值，同时又定义了一个引用变量 arr数组，也做了赋值操作。这时操作
2021-06-02 13:37:35
140
原创 学习float清除浮动
为什么要清除浮动？我们在其他设备逛购物商城的时候，会看到有推荐商品，但是推荐的商品的数量不是固定的，有可能会增多也有可能会减少，我们希望商品能撑开商品展示页，高度随着商品的数量改变而适当改变，所以我们不能给商品展示页的高度写固定。我们给商品展示页里写入3个商品，但是我们没有给展示页高度，而里面的商品自动撑开了展示页，满足了我们的需求。<style> .shop_page { width: 500px; border: 4px
2021-06-01 16:09:17
108
原创 如何判断一个变量是不是数组
首先“拔草” typeof 操作符，因为用typeof去检测数组类型，将返回Object，无法判断。let arr = [1, 2, 3, 4]console.log(typeof arr);以下有几个方法可以判断： instanceof操作符let arr = [1, 2, 3, 4]console.log(arr instanceof Array); 对象的constructor属性let arr = [1, 2, 3, 4]console.log(ar
2021-06-01 13:33:37
316
原创 关于我对for...in 与 for...of 的理解
关于遍历前言 在刚学习JS时，我们接触更多的是普通的for循环WorldArray = ['Hello', 'World', '你好', '世界']for (let index = 0; index < WorldArray.length; index++) { console.log(WorldArray[index]); }但是我们可以看出来，这样的遍历比较麻烦繁琐，于是后来可以使用内置的更简单的forEach循环方法：WorldArray =
2021-05-31 16:24:48
89
原创 关于CSS的两种盒模型介绍
介绍盒模型所谓的盒模型，可以把HTML的布局元素看做是一个个盒子组成页面，盒子里装着各种需要内容。例如小米的官网，头部导航栏、logo、搜索框、侧边分类栏、轮播区域、还有下面的各种功能区其实本质上大部分是一个个盒子，然后在往盒子里扔些内容。 那么盒模型究竟是什么样的呢？我们来看一下盒子的“解剖图”：可以看到一个普通的盒模型是由 content（盒子内容）、padding（内边距）、border（边框）还有margin（外边距） 构成，也可以看出来padding、border和margin
2021-05-30 14:34:37
131
原创 前端琐碎知识之HTML
前端面试基础部分HTML一、HTML有几个标签可以逃过同源策略<img src="C:\Users\ChengNan-PC\AppData\Roaming\Typora\typora-user-images\image-20210529105426251.png" alt="image-20210529105426251" style="zoom: 50%;" />```html<script> localStorage.setItem('e', '4')
2021-05-29 12:10:32
124
原创 attribute和property的区别
关于attribute和property的区别attribute是HTML标签的属性property是JS获取DOM对象上的属性值<div id="div1" class="class1" title="title1" name1="name1"></div>在开发者工具中可以看出attributes是properties的一个子集，他保存了html标签上的一些标签如id、class、title以及自定义的name1属性。properties下包含很多DOM属性例如我
2021-05-28 17:44:12
2226
空空如也
在dom事件中普通函数与箭头函数this指向
2021-06-20
怎么样才能更正确又有效的写网页代码
2020-06-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人