自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(54)
  • 收藏
  • 关注

原创 vue的事件修饰符、按键修饰符和系统修饰符

**6种事件修饰符.stop.prevent.capture.self.once.passive<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop

2022-04-21 16:27:04 252

原创 结合JavaScript编译原理谈谈为什么let/const能实现块级作用域和阻止变量提升

那么,还是先来一道“开胃菜“:console.log(name1);var name1 = "demo1";console.log(name2);let name2 = "demo2";来,控制台要输出什么?很显然,控制台将第一次输出undefined。第一次非常容易理解:使用var 声明的变量会变量提升,控制台输出将在变量赋值之前,你可以理解成是下面这样的代码:var name1 ;console.log(name1);name1 = "demo1";第二次将直接报错,原因是es

2022-04-14 08:44:16 737

原创 二维数组转化为一维数组

如何将二维数组转化为一维 数组比如是这样子的:[[0, 1], [2, 3], [4, 5]] 如何转化为 [0, 1, 2, 3, 4, 5]方法一:使用ES5的reduce reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) 1:previousValue (上一次调用回调返回的值,或者是提供的

2022-03-29 08:53:47 1048

原创 get请求传参长度的误区、get和post请求在缓存方面的区别

**get请求传参长度的误区、get和post请求在缓存方面的区别**误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。参考答案实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器,浏览器或web服务器限制了url的长度。为了明确这个概念,我们必须再次强调下面几点:1.HTTP 协议 未规定 GET 和POST的长度限制2.GET的最大长度显示是因为 浏览器和 web服务器限制了 URI的长度

2022-03-03 08:55:17 200

原创 vue怎么给一个元素绑定多个点击事件

vue为一个元素绑定是可以多个点击事件,只是有顺序上的问题<template> <div> <button @click="btnClick1();btnClick2()">按钮</button> </div></template><script> export default { name:'App', data(){ return{ } }, methods:{ bt

2022-03-02 15:10:46 6072 1

原创 CSS画一条0.5px的实线

理论上1px已经是最小单位了,那如何画一条0.5px的线呢?有以下两种方法解决方法采用meta viewport的方式<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>这样子就能缩放到原来的0.5倍,如果是1px那么就会变成0.5px要记得viewport只针对于移动端,只在移动端上才能看到效果<!DOCTY

2022-02-25 09:00:52 559

原创 git的详细命令

获取 Git 仓库通常有两种获取 Git 项目仓库的方式:将尚未进行版本控制的本地目录转换为 Git 仓库;从其它服务器 克隆 一个已存在的 Git 仓库。两种方式都会在你的本地机器上得到一个工作就绪的 Git 仓库。在已存在目录中初始化仓库如果你有一个尚未进行版本控制的项目目录,想要用 Git 来控制它,那么首先需要进入该项目目录中。git init该命令将创建一个名为.git的子目录,这个子目录含有你初始化的 Git 仓库中所有的必须文件,这些文件是 Git 仓库的骨干。 但是,在这个时

2022-02-18 08:23:01 84

原创 vue项目启动失败

有时候 可能你修改项目文件里面的一些东西 导致项目启动失败解决办法使用 rm -rf node_modules 快速删除node_modulesrm -rf node_modulesrm package-lock.jsonnpm cache clear --forcenpm install重新安装一次,如果还是不可以的话,在把之前装的都清空还有就是 如果修改了config.js的文件 要重启vue的项目 否则也会出现问题...

2022-01-13 08:43:34 471

原创 js模块化:详解与面试

JS模块化1. 不得不说的历史背景JS本身简单的页面设计:页面动画 + 表单提交并无模块化 or 命名空间的概念但是因为JS的模块化需求日益增长幼年期: 无模块化开始需要在页面中增加一些不同的js:动画、表单、格式化多种js文件被分在不同的文件中不同的文件又被同一个模板引用 <script src="jquery.js"></script> <script src="main.js"></script> <scrip

2022-01-11 10:08:53 607

原创 promise A+ 规范

promise A+ 规范手写一个 promise知识要点:**promise A+ 规范:术语:**1.promise 是一个有 then 方法的对象或者是函数,行为遵循本规范2.thenable 是一个有 then 方法的对象或者是函数3.value 是 promise 状态成功时的值,也就是 resolve 的参数, 是任何合法的 JavaScript 值, (包括各种数据类型number, boolean, string, object, 也包括 undefined/thenable

2022-01-10 08:13:01 223

原创 浏览器内核大全

浏览器内核浏览器/RunTime内核(渲染引擎)Chrome谷歌之前Webkit,已改Blink内核FireFox火狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核谷歌浏览器用的是Webkit内核,后面与Opera共同开发了Blink内核...

2022-01-07 15:24:02 204

原创 vue的两个核心是什么

vue的两个核心其实就是 数据驱动和组件化1、数据驱动:在vue中,数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新,而vue只需要改变数据。2、组件化组件化开发,优点很多,可以很好的降低数据之间的耦合度。将常用的代码封装成组件之后(vue组件封装方法),就能高度的复用,提高代码的可重用性。一个页面/模块可以由多个组件所组成...

2021-12-17 11:56:21 1107

原创 Vue的双向绑定原理

Vue的双向绑定原理首先所谓的双向绑定建立在一个MVVM的模型基础上:数据层(Model):应用的数据及业务逻辑视图层(View):应用的展示效果,各类UI组件业务逻辑层(ViewModel):框架封装的核心,它负责将数据与视图关联起来而双向绑定其实就是指:数据变化后更新视图视图变化后更新数据当然,它还有两个主要部分组成监听器(Observer):对所有数据的属性进行监听解析器(Compiler):对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

2021-12-13 18:40:56 729

转载 js在字符串里面截取数字

js提取字符串中的数字方法很多,今天讲几种常用的方法。js提供的方法获取js字符串转换数字。方法主要有三种转换函数、强制类型转换、利用js变量弱类型转换。parseInt方法var str ="4500元";var num = parseInt(str);alert(num);//4500//此种并非所有字符串通用,如果在字符串前面有非法字符或非数字字符,就行不通了。var str ="价格:4500元";var num = parseInt(str);alert(num);//Na

2021-10-14 11:25:51 1419

原创 java面试题

1.接口和抽象类的区别① 抽象类里可以有构造方法,而接口内不能有构造方法。② 抽象类中可以有普通成员变量,而接口中不能有普通成员变量。③ 抽象类中可以包含非抽象的普通方法,而接口中所有的方法必须是抽象的,不能有非抽象的普通方法。④ 抽象类中的抽象方法的访问类型可以是 public ,protected 和默认类型,但接口中的抽象方法只有 public 和默认类型。⑤ 抽象类中可以包含静态方法,接口内不能包含静态方法。⑥ 抽象类和接口中都可以包含静态成员变量,抽象类中的静态成员变量的访

2021-10-13 16:39:52 258

原创 前端基础面试题293道

第⼀部分:基础篇 | FE-Interview第⼀部分:基础篇⼀、HTML、HTTP、web综合问题1 前端需要注意哪些SEO合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减⼩, title值强调重点即可,重要关键词出现不要超过2次,⽽且要靠前,不同⻚⾯ title 要有所不同; description 把⻚⾯内容⾼度概括,⻓度合适,不可过分堆砌关键词,不同⻚⾯description 有所不同; keywords 列举出重要关键词即可语义化的

2021-06-28 14:17:38 3737

原创 JavaScript本地储存:localStorage、sessionStorage、cookie的使用

JavaScript本地储存:localStorage、sessionStorage、cookie的使用JAVASCRIPTjavaScript有三种数据存储方式,分别是:sessionStorage localStorage cookier1.sessionStoragesessionStorage 仅在当前会话下有效,关闭页面或浏览器后被清除;setItem(key,value) 设置数据getItem(key) 获取数据removeItem(key) 移除数据clear()

2021-06-23 19:42:15 207 1

原创 常用的css属性

**字体属性:font**大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式 font-style:oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height:normal;(正常) 单位:PX、PD、EM粗细 font-weight:bold;(粗体) lighter;(细体) normal;(正常)变体font-variant: small-caps;(小型大写字

2021-06-22 11:08:36 184

转载 java基础面试题

JAVA专业基础试题题型:一填空题、二单选题、三多选题、四判断题、五名词解释题、六辨题、七简单题、八论述题、九材料分析题 (九类题型在本课程题库中都要涉及到)第一单元1 下列说法正确的是( C )。A. java Applet 程序必须在浏览器中执行B. java 应用程序必须在浏览器里执行C. java Applet 程序不一定在浏览器中执行D. java 应用程序可以在浏览器中执行2 Windows下配置环境变量时与其他的路径进行分割的符号是( A )A.; B.。 C.: D.%

2021-06-22 10:52:33 415

原创 移动web开发flex布局/伸缩布局

移动web开发flex布局/伸缩布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局1.2 flex布局操作方便,布局极其简单,移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局,还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大

2021-06-22 10:48:09 111

原创 移动web开发流式布局/百分比布局

移动web开发流式布局/百分比布局1.0 移动端基础1.1浏览器现状PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。总结:兼容移动端主流浏览器

2021-06-22 10:44:22 280

原创 js动态鲨鱼代码

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>动态鲨鱼</title> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0;

2021-04-22 16:00:34 1318

原创 面向对象和面向过程和call apply方法

对象内置对象 String Date Math Array Object ...自定义对象 函数 Function function f(){} f就是Function的实例面向对象编程面向对象编程 1)用抽象的方式创建基于现实世界模型的一种编程方式 2)将需求抽象为一个对象,在这个对象上分析他的属性和方法 3)将对函数的封装转化为对对象的封装面向过程编程 分析问题所需的步骤,用函数将这些步骤一步一步实现函数式编程创建的对象的常见的六种方法1.自变量方式创建

2021-04-20 09:07:31 86

原创 this的指向问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do

2021-04-01 19:00:14 78

原创 模拟京东放大镜

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2021-03-25 08:29:43 174 1

原创 阻止事件冒泡

常见事件对象的属性和方法阻止冒泡 dom 推荐的标准是 stopPropagation()stopPropagation() 停止传播的意思cancelBubble 取消泡泡的意思 这是一个非标准的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

2020-12-30 14:46:09 73

原创 js事件机制

捕获阶段和冒泡阶段想要看到效果需要把script里面的捕获或者冒泡暂时注释因为 JS 代码中只能执行捕获或者冒泡其中的一个阶段// dom 事件流 三个阶段// JS 代码中只能执行捕获或者冒泡其中的一个阶段。// onclick 和 attachEvent(ie) 只能得到冒泡阶段。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

2020-12-30 14:41:22 76

原创 百度浏览器奔跑的小熊

原百度浏览器,奔跑的小熊 通过动画的方式,让图片看起来像是在奔跑一样 原理其实很简单------图片的大小是1600px,一共就8个小熊,分成8个部分,让这八个部分在一定时间内从头到尾显示一遍,就形成了一个奔跑的小熊!以下是图片个和代码**图片****代码**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo

2020-12-28 15:54:30 3021 3

原创 js固定侧边栏页面被卷去的头部兼容性解决方案

页面被卷去的头部兼容性解决方案需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法:1.声明了DTD,使用document.documentElement .scrollTop⒉未声明DTD,使用document.body.scrollTop3.新方法window.pageYoffset和window.pageXoffset ,IE9开始支持注意:DTD就是我们html的 以下的代码就是我们解决兼容性问题用的 function getscroll() {

2020-12-28 13:32:17 159 1

原创 克隆节点cloneNode括号里面的值的问题

关于js克隆节点cloneNode()// 括号为空或者里面是flase 浅拷贝 只赋值标签不赋值内容// //括号为里面是true 深拷贝 赋值标签赋值内容这里我们选择克隆第一个li当做例子给大家展示 选择的是true,也就是深拷贝<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul&g

2020-12-25 14:08:14 208

原创 DOM节点

1.在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :nodeName : 节点的名称nodeValue :节点的值nodeType :节点的类型nodeName 属性返回节点的名称(只读)元素节点的 nodeName 返回值是标签名称 ( 大写 )例如: html body p属性节点的 nodeName 返回值是属性名称文本节点的 nodeName 返回值永远是 #text文档节点的 nodeName 返回值永远是 #doc

2020-12-24 10:35:08 82 1

原创 js内置对象Math、 Date 、Array、String

1 - 内置对象1.1 内置对象​ JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象​ 前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于 JS 独有的, JS API 讲解内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法),内置对象最大的优点就是帮助我们快速开发​ JavaScript 提供了多个内置对象:Math、 Date 、Array、String等1

2020-12-14 10:12:14 121 1

原创 js闪耀表格

闪耀表格<script> document.write('<table border="1" width="1200" height="300">'); for (var i = 0; i < 10; i++) { document.write('<tr>'); for (var j = 1; j < 10; j++) { document.wri

2020-12-11 15:09:42 68

原创 js时间电子表

动态时间电子表<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #time{ width:370px; height:60px; background:blue; color:white; margin: 120px auto; line-height

2020-12-09 16:04:18 180

原创 js水仙花案例

水仙花案例 <script> // 水仙花数:① 水仙花数是一个三位数② 水仙花数的个位十位百位的立方和等于原来的水仙花数.例如371。 3 的三次方 + 7 的三次方 + 1 的三次方 = 371 分析 // 以371为例 三位数的个位数字: // i%10 = 371%10 结果是1 这样就求出个位的数了! //三位数的十位数字: // i/10%10 = 371/10%10 因

2020-12-06 19:05:48 1185

原创 API与事件基础

1.1. Web API介绍1.1.1 API的概念API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,无需理解其内部工作机制细节,只需直接调用使用即可。举例解释什么是API。例如,​ C语言中有一个函数 fopen()可以打开硬盘上的文件,这个函数对于我们来说,就是一个C语言提供的打开文件的工具。​ javascript中有一个函数alert

2020-12-04 15:00:40 623

原创 js内置对象-Math-date-数组-字符

1 - 内置对象1.1 内置对象​ JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象​ 前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于 JS 独有的, JS API 讲解内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法),内置对象最大的优点就是帮助我们快速开发​ JavaScript 提供了多个内置对象:Math、 Date 、Array、String等1

2020-12-02 08:55:08 94

原创 数组和函数

1 - 数组1.1 数组的概念数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。1.2 创建数组JS 中创建数组有两种方式:利用 new 创建数组var 数组名 = new Array() ;var arr = new Array(); // 创建一个新的空数组注意 Array () ,A 要大写利用数组字面量创建数组//

2020-12-01 09:07:00 78

原创 作用域-预解析-对象

1 - 作用域1.1 作用域概述通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。JavaScript(es6前)中的作用域有两种:全局作用域局部作用域(函数作用域)1.2 全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。1.3 局部作用域作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以

2020-12-01 09:03:01 84

原创 for循环-双重for循环

for循环-双重for循环1 - 循环1.1 for循环语法结构for(初始化变量; 条件表达式; 操作表达式 ){//循环体}| 名称 | 作用 | 初始化变量 | 通常被用于初始化一个计数器,该表达式可以使用 var 关键字声明新的变量,这个变量帮我们来记录次数## 标题 || 条件表达式 | 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环

2020-11-30 08:50:44 4091

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除