web前端菜鸟-CSDN博客

原创 JavaScript面试题

js中有哪些数据类型？6种：int（数值）、string（字符串）、boolean（布尔）、null（空）、undefined（未定义）、object（对象）typeof和instanceof区别？typeof 判断变量数据类型，返回字符串a instanceof b 判断b是不是在a的原型链上，返回布尔值怎么判断两个对象相等？两者是否为对象所有的key是否都相同所有的key对应的值是否都相同js中函数定义方式及调用方式？定义函数声明 function..

2021-02-20 09:08:40 444

原创 es5新增方法

数组新增方法：forEach遍历数组数组名.forEach(function(value, index, array) {//参数一是:数组元素//参数二是:数组元素的索引//参数三是:当前的数组})//相当于数组遍历的 for循环没有返回值filter过滤数组数组名.filter(function(value, index,array) {//参数一是:数组元素//参数二是:数组元素的索引//参数三是:当前的数组return value >= 20; //

2021-02-07 10:41:47 312

原创 es6语法

ECMAScript2015以后的版本可以统称为 es6letlet声明的变量只在所处于的块级有效不存在变量提升，可以防止循环变量变成全局变量暂时性死区以下代码的运行结果为:? var arr = []; for (var i = 0; i < 2; i++) { arr[i] = function () { console.log(i); } } arr[0](); // 2 arr[1](); // 2 let arr = [];

2021-02-07 10:19:32 323

原创对象深浅拷贝

浅拷贝Object.assign(浅拷贝到的对象,要浅拷贝的对象)深拷贝function deepCopy(newobj, oldobj){ for(var k in oldobj) { // 1.获取属性值 var item = oldobj[k]; // 2.判断这个值是否是数组 if(item instanceof Array) { newobj[k] = []; deepCopy(newobj[k], item) } else if (item insta

2021-02-04 09:23:28 166

原创闭包

什么是闭包闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。作用：延伸变量的作用范围。分析以下代码的运行结果 var name = "The Window"; var object = { name: "My Object", getNameFunc: function() { return function() { return this.name; }; }

2021-02-04 09:22:38 93

原创 JavaScript函数中的this指向

函数的定义方式function fn(){}var fn = function(){}var fn = new Function('参数1','参数2'..., '函数体')第三种函数定义方式可以看出：使用了Function构造函数创建了一个函数，说明函数也是属于对象函数的调用方式普通函数调用 fn();对象调用 obj.fn();构造函数调用 new Fn();绑定事件函数 btn.onclick = function() {};定时器函数 setInter

2021-02-04 09:11:38 458

原创 js使用原型实现继承

// 借用父构造函数继承属性 // 1. 父构造函数 function Father(uname, age) { // this 指向父构造函数的对象实例 this.uname = uname; this.age = age; } Father.prototype.smoke = function() { console.log('来了老弟,抽根烟'

2021-02-03 10:51:10 606

原创构造函数和原型

在es6之前是没有class这个关键字，我们用构造函数创建实例对象function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);讲两个概念：静态成员和实例成员实例成员就是构造函数内部通过this添加的成员，只能通过实例化的对象来访问静态成员在构造函数本身上添加的成员，只能通过构造函数来访问 function Star(uname, age) { this.

2021-02-02 16:05:18 139

原创 JavaScript面向对象版tab 栏切换

功能需求点击 tab栏,可以切换效果.点击 + 号, 可以添加 tab 项和内容项.点击 x 号, 可以删除当前的tab项和内容项.双击tab项文字或者内容项文字可以修改里面的文字内容index.html文件<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link

2021-02-02 14:07:25 802

原创 react面试题

react的生命周期react中state和prop的区别，改变state将对页面有什么影响state是组件的私有数据，可读可写，props是只读属性，一般来自外部（比如父组件）props放初始化数据，是一个父组件传递给子组件的数据流，这个数据可以一直传递到子孙组件，组件本身不能修改自己的props。而state代表的是一个组件内部自身的状态，改变一个组件自身状态，从语义上来说，就是这个组件内部已经发生了变化，有可能需要对此组件以及组件所包含的子组件进行重渲染在react中如何获取真..

2021-02-01 15:24:05 710

原创 Component和PureComponent的区别

引出PureComponentComponent存在2个问题：只要执行setState(),即使不改变状态数据, 组件也会重新render()只当前组件重新render(), 就会自动重新render子组件 ==> 效率低以上问题出现原因是Component中的shouldComponentUpdate()总是返回true那么只有当组件的state或props数据发生改变时才重新render()解决方法办法1: 重写shouldComponentUpdate()方

2021-01-13 10:00:16 415

原创安装了typora打开一片空白（已解决）

安装了typora之后，打开却是一片空白？？？解决方法：鼠标Typora图标右键选择属性选择兼容性菜单，把“以兼容模式运行这个程序” 勾上，确定。重新运行typora即可。

2021-01-11 15:38:17 8105 1

原创凡科前端校招面试

笔试：简述css3的弹性布局，以及适用场景浏览器渲染原理及流程实现深拷贝和浅拷贝实现call 、apply、bind实现promise实现reduce解释box-sizingcss优化提高性能方法看程序写结果一面：自我介绍元素隐藏的方式（多个）实现一条直线效果的方式（多个）BFC平时看书吗addEventListener有几个参数事件委托的优缺点setTimeout返回值是什么假如要做一个公众号的“已关注”和“关注”按钮，切换效果延迟10秒，应该怎么去排查bug

2020-12-15 09:17:30 599

原创五、TypeScript 数组

TypeScript 数组1. 数组概述2. 创建数组3. 数组长度和索引3.1 概述3.2 数组长度4. 取值和存值4.1 取值4.2 存值4.3 添加元素5. 遍历数组现在我们来学习TypeScript 数组，学完这一节，我们要知道，如何使用数组；如何创建数组；如何获取数组中的元素；如何遍历数组。1. 数组概述首先，什么是数组呢？我们为什么要使用数组呢？带着这两个疑问，我们来思考以下问题：问题1：存储一个人的名字，怎么存？你可能会觉得这个问题很简单，人的名字应该是字符串，那么声明

2020-07-29 17:28:54 4529

原创四、TypeScript 语句

TypeScript 语句1. 条件语句1.1 概述1.2 if 语句1.3 else 语句2. 三元运算符3. 循环语句3.1 概述3.2 for 循环3.3 for 循环的基本使用3.4 for 循环的执行过程3.5 断点调试3.6 break和continue现在我们来学习TypeScript 语句，通过本次学习，要求达到以下目标：能够使用条件语句能够使用三元运算符简化条件语句能够使用循环语句能够使用断点调试1. 条件语句1.1 概述生活中，我们打开网站看电影，电影分两类：1

2020-07-17 14:40:13 512

原创三、TypeScript运算符

TypeScript运算符1. 运算符概述2. 算术运算符2.1 概述2.2 加号的其他作用2.3 加号引发的思考3. 赋值运算符4. 自增和自减运算符5. 比较运算符6. 逻辑运算符这一节我们来学习typescript中的运算符。学完typescript中的运算符之后，要求我们能够掌握运算符的使用。1. 运算符概述如果你在这之前学习过其他的语言，例如Java、PHP、JavaScript等，那么你对运算符应该很了解了。没学过也不要紧，运算符就类似于我们经常用到的加减乘除等。运算符也称为

2020-07-15 16:38:37 1070 1

原创二、TypeScript变量和数据类型

TypeScript变量和数据类型1. 什么是变量2. 变量的使用2.1 基本使用2.2 简化形式变量的使用总结3. 类型注解3.1 什么是类型注解3.2 作用4. 变量的命名规范4.1 变量的命名规则4.2 变量的命名规范总结：案例5. 数据类型概述6. 基本数据类型6.1 数字类型6.2 字符串类型6.3 布尔类型6.4 undefined、null总结下面我们开始学习typescript中的变量和数据类型，这是typescript中最基础，也是最重要的部分。通过本次学习，我们要达到以下目标：掌握

2020-07-14 17:58:07 337

原创一、TypeScript 初体验

TypeScript 初体验1. TypeScript 概述1.1 什么是JavaScript1.2 TypeScript 是什么1.3 TypeScript 相比 JS 的优势2. 开发工具准备2.1 开发工具介绍2.2 安装 VSCode2.3 安装 Node.js2.4 安装解析 TS 的工具包3. 第一个 TS 文件3.1 步骤3.2 简化执行TS的步骤4. 注释和输出语句4.1 注释4.2 输出语句从今天开始，我们来正式学习typescript。首先我们来认识和体验一下typescript，本次

2020-07-14 13:39:30 561

原创 Ajax

AjaxHttp协议概述http协议请求的常用方法http协议状态码PostmanAjax入门ajax的优缺点Ajax原理三、封装一个Ajax方法回调函数PromiseAjax第三方模块Axios下载并引入AxiosAxios的常用方法jQuery中的ajax方法跨域请求jsonp原理使用jQuery跨域请求数据设置响应头Http协议概述水果列表：使用postman实现后台数据的添加（post）、删除（delete）、修改（put）、查询（get）。http协议请求的常用方法get方法：获取数据

2020-07-13 14:35:54 125

原创 node

Node命令行工具windows命令node 命令（安装之后才能使用）node概述什么是Node？npm概述cnpm在node中执行JavaScript文件node常用命令npm安装第三方模块npm项目初始化node基础模块化开发ES2015的模块化语法外部模块核心模块fspathhttpKoa框架基础Koa框架概述安装Koa创建服务器路由静态文件Nunjucks模板入门模板引擎概述安装nunjucks配置模板引擎结合路由渲染模板处理表单数据表单概述获取get请求的数据Nunjuck模板语法循环语句分支

2020-07-13 13:56:32 126

原创 jQuery

jQueryjQuery概述什么是jqueryjQuery代码的编写jQuery选择器jQuery常用方法jQuery常用方法DOM操作jQuery动画方法jQuery插件swiper使用bootstrap下载bootstrap常用功能栅格系统常用样式常用组件常用插件jQuery概述什么是jqueryjQuery是JavaScript的一个库，用于操作DOMjQuery代码的编写引入jQuery<body> <script src="script/jquery.js"&g

2020-07-13 10:54:17 90

原创 JavaScript

JavaScriptJavaScript介绍变量数据类型四则运算函数对象自定义对象this关键字方法传参数组遍历数组数组的常用方法内置对象Math （数学运算）Date（处理日期和时间）正则表达式正则表达式语法设定匹配范围匹配数字匹配字母匹配多位匹配指定位数ES2015基础语法变量和常量变量常量模板字符串解构赋值函数进阶立即执行函数闭包函数默认值箭头函数面向对象基于原型的面向对象（es6以前）ES2015（es6）中的面向对象DOM基础获取元素样式操作绑定事件操作属性DOM操作节点的分类创建并添加文本

2020-07-12 16:37:11 122

原创前端基础

前端基础目录前端基础HTML一、常见的html标签及属性二、表单与表格表格：表单：三、其他CSS一、 css引入样式的方法二、CSS选择器三、选择器权重四、CSS常用属性DIV + CSS一、盒子模型二、元素分类三、元素类型转换四、浮动布局五、定位H5C3一、css3新增属性二、css3过渡效果谁做过渡给谁加transition可设置多个属性值transition可设置多个属性的过渡效果将transform指定为过渡属性，可实现形变的过渡效果过渡属性可以设置为all三、动画效果flex布局一、flex容器

2020-07-12 10:19:23 898

转载一、安装和引入Vue.js

目录一、vue概述使用vue还是jQuery二、第一个Vue项目三、绑定属性四、绑定事件事件修饰符详解一、vue概述目前前端开发最火热的三大框架分别是React、Angular和Vue。Angular是谷歌公司开发的前端框架，在国外的用户比国内用户多很多，国内始终是不温不火的状态。React和Vue的国内用户比较多。可能是因为Vue简单易用，而且是由华人开发，所以Vue在国内的受众非常多。从本章我们开始学习Vue的相关知识。使用vue还是jQueryjQuery仍然有自己的优势，例如我们制作一些

2020-05-18 16:34:45 1483

转载十六、事件流

目录一、绑定事件二、事件冒泡与事件捕获三、事件委托一、绑定事件想要给一个元素绑定事件，我们有两种方法：使用内联事件或事件监听器。在之前的课程中，我们一直使用的是内联事件来为元素绑定事件，例如一个按钮的点击事件，代码如下btn.onclick = function(){} //绑定鼠标单击事件我们还可以用使用事件监听器为元素绑定事件，代码如下btn.addEventListener("click",function(){});下面我们用两种方法为按钮绑定事件示例连接<button

2020-05-16 12:26:51 232

转载十五、DOM操作

目录一、节点的分类二、文本节点三、创建和添加元素节点四、删除元素节点一、节点的分类元素节点属性节点文本节点上一节课我们讲解了获取元素节点，操作属性节点。本节课我们讲解添加和删除元素节点和编辑文本节点。二、文本节点在html中我们有一个h1标签和一个按钮，h1标签内已经有了一段文本。当我们点击按钮的时候，在h1标签中插入“hello world” 示例代码如下:示例连接<h1>内容：</h1><button>添加文本节点</button>

2020-05-15 15:13:12 107

转载十四、DOM基础

目录一、DOM的基本概念二、样式操作三、绑定事件四、操作属性五、数学计算案例一、DOM的基本概念本章节可谓是相当重要了,是让JavaScript灵动起来必不可少的一步文档对象模型定义了树状结构定义了接口，可以用来操作树状结构二、样式操作我们可以通过DOM提供的querySelector方法来获取元素，然后进一步操作它的样式示例代码如下:<h1>DOM样式测试</h1><script> var h1 = document.querySelec

2020-05-15 15:12:15 242

转载十三、面向对象

目录一、面相对象概述二、基于原型的面向对象三、ES2015中的面向对象一、面相对象概述首先面向对象是一种编程思想，是一种通过多个对象互相协作完成处理流程的编程思路【是对现实世界中一类事物的抽象，在编程中可以理解为是一种建立现实世界事物的模型】推及到广义上，面向对象已经越了程序设计和软件开发，我认为面向对象又是一种思维方式，不局限于编程语言，甚至不局限编程本身，它把复杂的需求、业务逻辑抽丝剥茧、逐个分析。主要分为：类的声明定义、对象的创建使用、面向对象拥有的特征【三大特征：封装、继承、多态】封装：体

2020-05-15 15:11:04 208

转载十二、函数进阶

目录一、概述二、立即执行函数三、闭包四、函数默认值五、箭头函数箭头函数简写箭头函数中的this一、概述在此前的内容中，我们已经学习了函数的基本用法，例如如何定义函数，如何调用函数，以及函数的形参、实参、返回值等内容。本节内容会继续讲解ES2015为函数赋予的新特性。立即执行函数闭包函数默认值箭头函数async函数二、立即执行函数立即执行函数顾名思义，就是声明之后立刻执行的函数，实例代码如下所示：(function(){ console.log("hello world");

2020-05-15 15:09:56 80

转载十五、媒体查询

目录一、响应式页面概述二、媒体查询max-width三、响应式页面四、响应式页面的缺点一、响应式页面概述在我们学习媒体查询之前，先来了解一下什么事响应式页面响应式页面这个是bootstrap的中文文档网站，大家可以用chrome浏览器来模拟手机端的浏览效果，可以看到手机端和电脑端访问同一个网页时，都能获得比较好的浏览体验。也就是说，一套代码可以同时适应多个设备。这样的网页就是响应式网页。这样的网页，就是基于媒体查询实现的。这里需要特别注意的是，我们访问同一个网站的地址，用手机可以正常浏览，用电脑

2020-05-11 15:59:37 472

转载十四、grid布局

目录一、grid布局概述grid布局与flex布局对比grid布局基本概念二、grid容器设置gird容器grid-template-columns属性与grid-template-rows属性grid-column-gap属性与grid-row-gap属性justify-items属性与align-items属性justify-content属性与aling-content属性三、grid项目justify-self属性与align-self属性grid-column-start属性与grid-colum

2020-05-11 15:32:49 435

转载十三、flex布局

目录一、flex布局概述二、flex容器flex-directionjustify-contentalign-items三、flex项目align-selfflex一、flex布局概述此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，本节我们一起学习弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。本节会针对flex布局的常用属性，讲解如何将flex布局应用到实际项目中。二、flex容器将一个元素设置如下属性.box{ display: fle

2020-05-10 10:57:39 247

转载十二、css3动画效果

目录一、动画效果定义动画设置动画让动画更连贯循环动画停止动画一、动画效果动画效果与过渡效果的区别在于，过渡效果一般用于用户与浏览器有交互的情况下，网页出现一些动态的变化。动画效果可以实现网页没有任何交互的情况下，自己就会展示动态效果。海盗船示例定义动画通过@keyframes可以定义动画效果，示例代码如下所示。.box { width: 200px; height: 200px; background-color: #00f; animation: anim 5s

2020-05-09 20:19:03 226

转载十一、css3过渡效果

目录一、过渡效果概述二、过渡效果应用改变宽度的过渡效果过渡效果的带参数设置设置多个属性的过渡效果三、形变的过渡效果一、过渡效果概述CSS3的过渡效果可以让一个元素的某一个或多个css属性从一个值平滑过渡到另一个值。可以用一个transition来实现元素的过渡效果。二、过渡效果应用改变宽度的过渡效果通过transition属性，可以设置元素的过渡效果，当某个属性被设置成过渡属性之后，这个属性的值如果发生变化，就会以动画的形式从初始状态过渡到结束状态，代码如下所示。.box { width

2020-05-09 16:30:21 728

转载十、css3新增属性概述

目录一、css3新增属性概述二、圆角三、阴影四、形变旋转缩放位移一、css3新增属性概述在此前我们讲解的css课程中，课程内容是以css2版本为基础的，本章开始我们讲解css3版本的新特性。在css2的时代，由于css的功能局限性，我们制作的很多网页效果都是利用一些取巧的方法，例如实现一个圆角的页面，我们需要把圆角的部分用图片代替，而制作动画效果，都需要使用JavaScript来完成的，这不仅增加了代码编写的难度，还降低了web开发人员的工作效率。在css3中我们可以使用大量新增的属性，例如圆角，阴

2020-05-09 10:46:54 313

转载九、HTML5新增标签

目录一、html5概述二、html5布局标签三、html5媒体标签音频标签视频标签一、html5概述html5是超文本标记语言（html）的第五次重大修改，可以简单的理解为是html的第五个大版本。我们平时所说的html5其实是包含了html5，css3的新特性，以及新增的JavaScript接口。本节的主要内容是讲解html5中新增加的布局标签和媒体标签。二、html5布局标签在此前我们学习的内容中，网页布局一直都是使用div作为容器，html5新标准中，为了让容器元素有语义，让网页更具可读性，

2020-05-08 20:38:30 235

空空如也

空空如也