例题
关注
分享
扫一扫
123
11adaacc
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
例题(2021.02.21/21:39)
文章目录CSSHTMLJS数组JS高级http请求ES6VueCSScss的居中方式 链接px、em、rem、%的区别 链接display的值和作用 链接css3的新特性 链接static、relative、absolute、fixed四种定位的区别 链接盒子模型（怪异模型） 链接boo原创 2021-02-21 22:18:28 · 280 阅读 · 0 评论 -
判断数据类型是数组还是对象
let arr=[1,2,3];let obj={"name":"abc"};console.log(arr instanceof Array);console.log(obj instanceof Object);原创 2021-02-21 21:33:44 · 276 阅读 · 0 评论 -
vue和react的区别
文章目录1. 数据2.虚拟Dom3.JSX和模板4.构建工具5.React.Native vs ???6.背后的团队转载自：参考1. 数据React:单项数据流Dom元素渲染依赖于state,但改变State并不会影响或者改变渲染出的Dom元素。只有通过setState才能重新走渲染流程。React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点React推崇的是函数式编程和单向数据流：给定原始界面（或数据），施转载 2021-02-21 21:21:01 · 259 阅读 · 0 评论 -
vue数据双向绑定的原理
vue底层实现双向数据绑定的原理01.Object.defineProperty()02.单向数据绑定03.双向数据绑定04.vue实现双向数据绑定原理01.Object.defineProperty()Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象prop 当前需要定义的属性名desc 属性描述符02.单向数据绑定数据原创 2021-02-21 21:15:25 · 260 阅读 · 0 评论 -
路由跳转的方式
路由跳转的方式01.router-link02.this.$router.push() (函数里面调用)03.this.$router.replace()04.this.$router.go(n)05.跳转方式的区别01.router-link<router-link to="/地址"></router-link>或者//此方法路由中要配置name属性<router-link to="{name:'地址'}"></router-link>rout原创 2021-02-21 19:16:14 · 580 阅读 · 0 评论 -
CSS的三种引用方式
CSS的三种引用方式1.内联样式(行间样式)2.内部样式3.外部样式4.link和@import的区别1.内联样式(行间样式)直接在标签内部通过使用style属性添加CSS样式<p style="color:red;font-size:12px;">这是一个段落</p>2.内部样式在<head>标签里面通过使用<style>标签来引进CSS样式<head><style>p{ color:red; font-size原创 2021-02-21 19:04:28 · 990 阅读 · 0 评论 -
H5新增的语义化标签
1.根据页面的结构section元素 表示页面中的一个区块article元素 表示一块与上下文无关的独立的内容aside元素 在article之外的，与article内容相关的辅助信息header元素 表示页面中一个内容区块或整个页面的标题footer元素 表示页面中一个内容区块或整个页面的脚注nav元素 表示页面中导航链接部分hgroup标题的一个分组2.媒体元素组合figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)&l原创 2021-02-21 18:47:56 · 234 阅读 · 0 评论 -
将json字符串转为对象
let jstr='{"name":"张三","age":"18"}'console.log(jstr)console.log(typeof jstr)let jobj=JSON.parse(jstr)console.log(jobj instanceof Object)原创 2021-01-29 01:38:17 · 210 阅读 · 0 评论 -
原生js实现获取li的索引
<body> <ul> <li>11</li> <li>22</li> <li>33</li> <li>44</li> <li>55</li> </ul> <script type="text/javascript"> //获取所有的li let lis=document.getElementsByTag原创 2021-01-29 00:48:23 · 856 阅读 · 0 评论 -
实现元素宽度跟随浏览器窗口变化
<body> <div id="left"></div> <div id="center"></div> <div id="right"></div> <script src="jquery-3.4.1.js"></script> <script type="text/javascript"> //浏览器窗口改变时触发 $(window).resize(()=&g原创 2021-01-29 00:38:00 · 621 阅读 · 0 评论 -
清除浮动的方法
给父元素加height——有局限性给父元素加overflow:hidden——有副作用给父元素加子元素 clear:both——语义有问题给父元素添加后置的内容生成" ",显示样式为table，清除浮动clear:both——无任何副作用...原创 2021-01-29 00:21:20 · 191 阅读 · 0 评论 -
css动画
用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #circle{ /*半径200*/ width: 400px; height: 400px; border-r原创 2021-01-29 00:18:53 · 327 阅读 · 0 评论 -
手机号的正则表达式(以1开头的11位数字)
let phone=13715945748;//乱写的let reg=/^1[3|4|5|7|8][0-9]{9}$/;console.log(phone,reg.test(phone)?'正确的手机号':"不正确的手机号")^1 以1开头[3|4|5|7|8] 第二位是3或4或5或7或8任意一位[0-9]{9}$ 以0-9任意9位数字结尾...原创 2021-01-29 00:12:17 · 20485 阅读 · 2 评论 -
前端面试题82----页面之间是怎么传参数的？
01.cookie传参书写cookie：res.cookie('cookie名字',cookie值(传递的参数),{maxAge:100000})获取cookie：req.cookies.cookie名字02.session传参书写session：req.session.session名字='session的值(传递的参数)'获取session：res.send(req.session.session名字)03.ejs传参res.render('页面',{"name":"传递的参数"})0.原创 2021-01-28 23:58:33 · 205 阅读 · 0 评论 -
localstorage和sessionstorage的区别
localstoragelocalStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据sessionstoragesessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的sessionstorage注意点：页面刷新不会消除数据只有在当前页面打开的链接，才可以访sessionStorage的数据只有当全部关闭页面和从其内部打开的所有页面 或者直接关闭浏览原创 2021-01-28 23:49:46 · 239 阅读 · 0 评论 -
JS内存泄露
JS内存空间分为栈、堆、池（一般归并到栈中）基本数据类型string、number、boolean、null、undefined保存在栈中复杂数据类型object保存在堆中常量存放在池中js中分配的内存的生命周期为：内存分配->内存使用->内存回收哪些操作会造成内存泄漏？内存泄漏指任何对象在不再拥有或不需要它之后依然存在，即这部分内存用完之后并没有返回到内存池。setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄漏闭包控制台日志循环（两个对象彼此引用且彼原创 2021-01-03 01:36:33 · 251 阅读 · 0 评论 -
减少页面加载时间的方法
方法1.重复的HTTP请求数量应尽量减少2. 压缩Javascript、CSS代码3. 在文件头部放置css样式的定义4. 在文件末尾放Javascript脚本5. css、javascript改由外部调用6. 尽可能减少DCOM元素7. 避免使用CSS脚本(CSS Expressions)10. 服务器启用gzip压缩功能11. Ajax采用缓存调用12. Ajax调用尽量采用GET方法调用13. 养成良好的开发维护习惯，尽量避免脚本重复调用14. 缩减iframe的使用，如无必要，尽量不要使用1.重复原创 2021-01-03 01:29:17 · 1009 阅读 · 0 评论 -
怎么理解模块化开发
文章目录01.什么是模块化02.实现模块化----使用函数封装03.实现模块化----使用对象封装04.实现模块化----立即执行函数写法05.实现模块化----放大模式06.实现模块化----宽放大模式（Loose augmentation）07.实现模块化----输入全局变量01.什么是模块化所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数02.实现模块化----使用函数封装function func1(){ //.原创 2021-01-03 01:25:58 · 1157 阅读 · 0 评论 -
前端面试题72----减少页面加载时间的方法
方法1.重复的HTTP请求数量应尽量减少2. 压缩Javascript、CSS代码3. 在文件头部放置css样式的定义4. 在文件末尾放Javascript脚本5. css、javascript改由外部调用6. 尽可能减少DCOM元素7. 避免使用CSS脚本(CSS Expressions)10. 服务器启用gzip压缩功能11. Ajax采用缓存调用12. Ajax调用尽量采用GET方法调用13. 养成良好的开发维护习惯，尽量避免脚本重复调用14. 缩减iframe的使用，如无必要，尽量不要使用1.重复原创 2021-01-03 01:10:41 · 399 阅读 · 0 评论 -
css选择器的权重
文章目录01.样式类型02.选择器类型03.权重计算规则04.比较规则05. !important01.样式类型行间：<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>内联：<style> h1 { color : #000 ; } </style>外部：<link rel="stylesheet" href="css/style.css">02.选择器类型1、ID #原创 2021-01-03 01:10:08 · 242 阅读 · 0 评论 -
transition transform translate 之间的区别
文章目录01.transform(转换) 和 translate02.transition(过渡)01.transform(转换) 和 translatetransform的中文翻译是变换、变形，是css3的一个属性，和其他width，height属性一样translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少例如：transform：translate(0,100%)表示从元素的当前位置延y轴原创 2021-01-03 01:08:40 · 2368 阅读 · 0 评论 -
实现轮播图的思路
图片轮播：设定两个类 .active{opacity:1} .opacity{opacity:0}将第一张图片添加class='active'设定一个定时器，每隔一段时间拿到当前轮播图片的index将此index图片移除类名active，添加类名opacity将下一张图片添加类名active轮播到最后一张图通过判断将index=0，跳转会第一张图上/下一张切换按钮绑定点击事件拿到当前正在轮播图片的index将本张图片移除类名active，添加类名opacity如果是上一张将ind原创 2021-01-02 23:57:45 · 483 阅读 · 0 评论 -
ajax
文章目录01.ajax简介02.ajax的优点03.ajax的缺点04.原生js实现ajax步骤05.使用原生js实现ajax01.ajax简介AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。02.ajax的优点通过异步模式，提升了用户体验优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用Ajax引擎在客户端运行，承担了一部分本来由服务器承担的原创 2021-01-02 23:56:21 · 176 阅读 · 0 评论 -
创建新数组，向数组插入数据
push以及unshift即可向数组插入元素如果要在指定的位置插入元素则可以用splicesplice接收多个参数，分别是索引，要删除的元素个数，新加的元素(可多个，用逗号隔开)； let myArray=[11,22,33]; console.log('原数组：',myArray); myArray.push(44,55); console.log('用push在数组后面插入元素：',myArray); myArray.unshift(66,77); console.log('用uns.原创 2020-12-24 00:26:21 · 1685 阅读 · 0 评论 -
实现冒泡排序
冒泡排序算法的原理如下：比较相邻的元素。如果第一个比第二个大，就交换他们两个。对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。针对所有的元素重复以上的步骤，除了最后一个。持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比比较let arr=[50,999,10,200,159,521,3,8,100];function aSort(arr){ //循环次数 let max=arr.length-1; //原创 2020-12-24 00:23:47 · 210 阅读 · 0 评论 -
实现连接两个数组并返回
concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组let arr1=[1,2,3,4];let arr2=['a','b','c','d'];console.log(arr1.concat(arr2));console.log(arr1);console.log(arr2);原创 2020-12-23 23:39:26 · 272 阅读 · 0 评论 -
MVVM和MVC区别？
文章目录1.MVC是什么2 MVC优点与缺点3.MVVM4.如何选择1.MVC是什么MVC 模式（Model–view–controller）是软件工程中的一种软件架构模式，它把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。MVC 模式的目的是实现一种动态的程序设计，简化后续对程序的修改和扩展，并且使程序某一部分的重复利用成为可能。除此之外，MVC 模式通过对复杂度的简化，使程序的结构更加直观。软件系统在分离了自身的基本部分的同时，也赋予了各个基本部分原创 2020-12-23 23:35:59 · 504 阅读 · 0 评论 -
图片预加载与懒加载
一、什么是图片预加载与懒加载：图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或原创 2020-12-23 23:26:03 · 369 阅读 · 0 评论 -
Session和Cookie的区别与联系
Session和Cookie的区别与联系一. 概念理解你可能有留意到当你浏览网页时，会有一些推送消息，大多数是你最近留意过的同类东西，比如你想买桌子，上淘宝搜了一下，结果连着几天会有各种各样的桌子的链接。这是因为你浏览某个网页的时候，WEB 服务器会先送一些资料放在你的计算机上，类似于你打的文字，选的一些东西什么的，Cookie 会帮你都纪录下来。当下次你再光临同一个网站，WEB服务器会先看看有没有它上次留下的 Cookie 资料，有的话，就会依据 Cookie里的内容来判断使用者，送出特定的网页内原创 2020-12-23 23:22:58 · 205 阅读 · 0 评论 -
float和absolute有什么区别？
1.文档流与非文档流一、首先，按照普通流和非普通流来分类：普通流：就是按照上下左右的顺序一行一行排列的，长度不够就会自动挤到下一行。非普通流：顾名思义就是脱离普通流的，在普通流上面是不占据位置的。css有position的样式，position包括：static，relative，absolute，fixed四种值。1）static是属于普通流；2）relative也是属于特殊的普通流；3）absolute和fixed以及float就是属于非普通流的，加载的时候，也会顺序加载，但是会脱原创 2020-12-23 23:21:48 · 504 阅读 · 0 评论 -
js的数据类型
文章目录一、7种数据类型二、隐式转换三、类型检测一、7种数据类型es6中新增symbol==》表示独一无二的值原始类型（基本类型）：按值访问，可以操作保存在变量中实际的值。原始类型汇总中null和undefined比较特殊。引用类型：引用类型的值是保存在内存中的对象。与其他语言不同的是，JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。所以引用类型的值是按引用访问的。二、隐式转换1、原创 2020-12-23 23:17:21 · 170 阅读 · 0 评论 -
bootstrap实现响应式的原理
使用bootstrap必须加入下面的代码<meta name="viewport" content="width=device-width, initial-scale=1.0">视口的 meta 标签，重写了默认的视口，并帮助加载与特定视口相关的样式。width 属性设置屏幕宽度。它包含一个值，比如 320，表示 320 像素，或者值为 ‘device-width’，用来告诉浏览器使用原始的分辨率。initial-scale 属性是视口最初的比例。当设置为 1.0 时，将呈原创 2020-12-23 23:06:21 · 665 阅读 · 0 评论 -
js的两种定时器(setTimeout和setInterval的区别)
setTimeout只在指定时间后执行一次setTimeout(function(){ alert('执行');},2000);setInterval以指定时间为周期循环执行setInterval(function(){ alert('执行');},2000);一般情况下setTimeout用于延迟执行某方法或功能，setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步清除Timeout的定时器,传入id(创建定时器时会返回一个id) clearTime原创 2020-12-23 22:59:57 · 401 阅读 · 0 评论 -
js的选择器
参考自：参考一、原生JS选择器JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()getElementById(ID): 返回对指定ID的第一个对象的引用，如果在文档中查找一个特定的元素，最有效的方法是getElementById()getElementsByName(name): 返回文档中na原创 2020-12-23 22:53:09 · 3313 阅读 · 0 评论 -
static、relative、absolute、fixed四种定位的区别
文章目录1.静态定位2.相对定位3.绝对定位4.固定定位1.静态定位静态定位（position：static）是HTML中的默认定位，符合常规文档流，这里没太多内容。2.相对定位相对定位（position：relative），对象相对于本身位置而言，进行上下左右的偏移，但注意，它不脱离文档流！如上图所示，红色div设置了相对定位，上左偏移位置（top：20px；left：20px；），但蓝色div仍然按照常规文档流保持原位置，说明红色div虽然位置偏移，但相对于本身的原位置仍然占领着。3.绝对原创 2020-12-17 18:22:18 · 1154 阅读 · 0 评论 -
盒子模型（怪异模型）
文章目录1.什么是盒子模型？2.盒子模型能够为我们解决什么问题?3.标准盒子模型和怪异盒子模型（IE盒子模型）4.两种模式的转换（通过box-sizing）1.什么是盒子模型？CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性：内容(content)，也就是元素的 width、height内边距(padding)边框(border)外边距(margin)2.盒子模型能够为我们解决什么问题?盒子模型主要是针对页原创 2020-12-17 18:18:45 · 753 阅读 · 0 评论 -
localStorage和sessionStorage区别
localStorage和sessionStorage区别localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sess原创 2020-12-17 18:13:32 · 277 阅读 · 0 评论 -
css3的新特性
文章目录1.css3选择器2.CSS3 边框（Borders）3.CSS3 背景4.CSS3 渐变5.CSS3 文本效果6.CSS3 字体7.CSS3 转换和变形8.CSS3 过渡9.CSS3 动画10.CSS3 多列11.CSS3 盒模型12.CSS3伸缩布局盒模型(弹性盒)13.CSS3 多媒体查询1.css3选择器选择器示例示例说明CSS.class.intro选择所有class="intro"的元素1#id#firstname选择所有id="firstna原创 2020-12-17 18:05:50 · 350 阅读 · 0 评论 -
js对数组的操作
文章目录1.数组方法2.join()1.数组方法数组原型方法主要有以下这些：join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增）reduce()和 reduceRi原创 2020-12-17 17:27:28 · 359 阅读 · 0 评论 -
前端面试题40----ajax
文章目录1.AJAX是什么？2.AJAX的优点3.AJAX的缺点4.原生JS实现AJAX1.AJAX是什么？AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数原创 2020-12-17 16:36:42 · 220 阅读 · 0 评论