前端知识点梳理（一）

一、HTML

1. meta标签

记住2个属性：name和http-equiv

  • name：描述网页
<meta name="参数" content="具体的描述">
  1. http-equiv：文件头
    HTML中的meta标签及其使用方法

二、CSS

1. css实现水平居中的几种方式

css实现水平居中的几种方式
一、 行内

  1. text-align：center;

二、已知宽高块级元素（三的特例）

  1. margin-左+右:auto;
  2. 子绝父相，left50%,margin左（宽度/2）
  3. 子绝父相，top四相0，margin:auto;

三、未知宽高块级元素

  1. display:table或者用<table>; + margin:auto;
  2. 转为行内/行内块 + text-align：center;
  3. 父元素：display:flex;flex-direction；+子元素：align-self:center;/或者margin:auto;
  4. 父元素转行内/行内块或者浮动，父相；left:50%;+子元素相对，right:50%;
  5. 子绝父相，left:50%;transform:translateX(50%);

top、left、right、bottom设置为0，用于实现居中，填满父容器
未知宽高：是不知道宽高而不是没有。实例
css3：父元素display：flex；子元素：margin：auto；好用，有兼容问题
flex布局，兼容写法

带有box放后写：

.box{display: -webkit-flex;  /* 新版本语法: Chrome 21+ */display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */display: -moz-box;      /* 老版本语法: Firefox (buggy) */display: -ms-flexbox;   /* 混合版本语法: IE 10 */   }.flex1 {            -webkit-flex: 1;        /* Chrome */  -ms-flex: 1             /* IE 10 */  flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */-webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  -moz-box-flex: 1;       /* OLD - Firefox 19- */       }

2. css伪类

css伪类（:before和:after）
在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素

*1. 自适应两栏布局的4种方式

先决条件：

* {margin: 0;padding: 0;
}
html,
body {height: 100%;
}
.left {height: 100%;
}
.right {height: 100%;
}

一类：左浮动，右三变体

  1. 左：宽固定100px，float: left;
  2. 右：
    ①margin-left：左宽100px
    ②右浮动float: right计算右宽width：calc(100% - 100px); 注意：运算符号左右必须有空格
    ③右边创建BFC

二类：左定位，右三变体

  • 左：display: absolute; left: 100px;

三类：table布局

原理：子元素宽度之和等于父元素的宽度；如果有子元素未设置宽度，那么占据剩余所有宽度。如果子元素设置的宽度相加不等于100%，默认按子元素个数比例均分父元素宽度。
注意：

body {width: 100%; // 不然，右边的宽度无法计算display: table;
}
.left {display: table-cell;width: 100px;
}
.right{display: table-cell; //
}

四类：flex布局

同table，要想让自适应占满容器宽度，容器body必显式width: 100;

或者body不设宽高，为什么呢？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}body {display: flex;}.left{width: 200px;height: 100px;background-color: skyblue;}.right{flex: 1;height: 100px;background-color: pink;}</style>
</head>
<body><div class="left"></div><div class="right"></div>
</body>
</html>

*2. 自适应三栏布局的种方式

一类：左浮动+右浮动+中间不作为

二类：左中右定位，中间设置left right

三类：flex布局，中间flex:1

四类：表格布局

五类：网格布局

三、JS

1.this指向

哪个对象调用函数，函数里面的this指向哪个对象
this指向总结
箭头函数中的this指向问题详解

let obj1={a:222
};
let obj2={a:111,fn:function(){alert(this.a);}
}
obj1.fn=obj2.fn;
obj1.fn();//222

总结：
1. apply和call简单来说就是会改变传入函数的this，this指向括号里的参数；
2.setTimeout等window对象方法，参数若是普通函数，内部this指向window；参数若是箭头函数，则继承外部的环境。

2.js变量

2.1 js变量类型与声明

 1）全局变量 / 局部变量2）显示声明 / 隐式声明3）变量提升 / 函数提升

第一种声明方式：使用var关键字+变量名在函数外部声明就是全局变量;在函数内部则为局部变量；
第二种声明方式：没有使用var关键字声明，直接给变量名赋值，不管是在函数内部还是外部都是全局变量；
第三种声明方式： 使用window全局对象来声明，全局对象的属性对应也是全局变量；

在js函数中局部变量优先于全局变量

2.2 let

let定于的全局变量，不会变成window对象的属性
JavaScript中的let关键字

 <script type="text/javascript">var name ='gg';function func(){console.log(name);let name = 'jj';console.log(name);}func();	
</script>

上面定义一个全局变量name，接下来的func（）函数中使用let定义了同名的name变量，此时局部变量name会覆盖全局变量，但是由于使用let定义的变量不会提前装载，因此func（）函数在使用let定义局部变量之前访问name变量会导致错误–如果将func（）函数中的let改成var关键字定义，则会输出undefined，再输出局部变量name的值。

2.3 ES5变量提升

. js变量提升

注意： 当全局变量跟局部变量重名时，局部变量的scope会覆盖掉全局变量的scope，当离开局部变量的scope后，又重回到全局变量的scope。
1、所有申明都会被提升到作用域的最顶上
2、同一个变量申明只进行一次，并且因此其他申明都会被忽略；（如果局部和全局变量重名，优先使用局部变量）
3、函数声明的优先级优于变量申明，且函数声明会连带定义一起被提升；函数表达式函数不可提前执行（会报错），但会作为变量提升
在这里插入图片描述
如果函数声明和变量申明使用的是同一个变量名称，函数声明优先级高于变量声明的优先级。
在这里插入图片描述 在这里插入图片描述在这里插入图片描述

我们习惯将var a = 2;看做是一个声明，而实际上javascript引擎并不这么认为。它将var a和a = 2看做是两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务.
这意味着无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理，可以将这个过程形象地想象成所有的声明（变量和函数）都会被“移动”到各自作用域的最顶端，这个过程被称为提升。

2.4 类型转换

2.4.1 规则总结

以下是总结，记不住的话拿本子多抄几遍吧。
JS类型转换规则总结

1. Number(mix)函数

特例在于：

  • Number(null) = > 0
  • Number(false) = > 0
  • 复杂数据类型
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2. parseInt(string, radix)函数
  • （1）忽略字符串前面的空格，直至找到第一个非空字符
  • （2）如果第一个字符不是数字符号或者负号，返回NaN
  • （3）如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
  • （4）如果上步解析的结果以0开头，则将其当作八进制来解析；如果以x开头，则将其当作十六进制来解析
  • （5）如果指定radix参数，则以radix为基数进行解析

在这里插入图片描述

3. 变量.toString(radix)

变量类型除undefined、null
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.Boolean(mix)函数

以下值会被转换为false（6种数据类型）：false、空字符串、0、NaN、null、undefined，其余任何值都会被转换为true。
在这里插入图片描述

2.4.2 刷题
1.关系运算符
  • 当比较运算符（>大于号）两边都是字符串时，按照字符串对应的Unicode编码转为数字，进行比较；
  • undefined和null组合互等：
  • 在这里插入图片描述
  • NaN(2等或3等)NaN都为false
    js面试题大坑——隐式类型转换

3.函数

js创建函数的3种方法
1） 函数声明 ：常用function sum () { }
2） 函数表达式 : var sum = function () { }
3） 函数构造法 ：var sum = new Function(‘x’,‘y’,‘return x + y ;’)

3*.事件

1.定时器与点击事件

剖析setTimeout和click点击事件的触发顺序

2.事件循环

JS事件循环
事件循环优先级

执行顺序：同步任务>微任务>宏任务
微任务：
promise的.then里的内容
宏任务：
定时器

3.事件委托

4. 闭包

4.1 常见例子

*. for循环下，加入点击事件显示for的i值却总是获取最后的值

for(var i=0;i<5;i++){var input = document.createElement("input");input.value = "显示";input.type = "button";input.οnclick=function(){alert("此时的值："+i);}document.getElementById("a").appendChild(input);}

原因分析：

由于点击操作是在for循环完成后才进行的，而从i的作用域考虑，for循环完后的i已经是5了，所以无论点击哪个按钮，显示的只会是i的最后一个值5。
具体解析参考一：
在for循环中var和let的区别
参考二：
JS中for循环变量作用域

js循环给li绑定事件实现 点击li弹出其索引值 和内容

<script>//1. 用外层函数包裹要保护的变量和内层函数function outer(){var i=1;//2. 外层函数返回内层函数对象到外部return function(){console.log(i++);}}//3. 调用外层函数获得内层函数对象var getNum=outer();//getNum:function(){ console.log(i++); }getNum();//1getNum();//2i=1;getNum();//3getNum();//4
</script>

如果有人问你这个问题，编写一个输入一个字符串并逐次返回字符。 如果给出了新字符串，则应该替换旧字符串，类似简单的一个生成器。

 function generator(input) {var index = 0;return {next: function() {if (index < input.length) {index += 1;return input[index - 1];}return "";} }}

执行如下：

var mygenerator = generator("boomerang");
mygenerator.next(); // returns "b"
mygenerator.next() // returns "o"
mygenerator = generator("toon");
mygenerator.next(); // returns "t"

在这里，作用域扮演着重要的角色。闭包是返回另一个函数并携带数据的函数。上面的字符串生成器适用于闭包。index 在多个函数调用之间保留,定义的内部函数可以访问在父函数中定义的变量。这是一个不同的作用域。如果在第二级函数中再定义一个函数，它可以访问所有父级变量。

4.2 阅读

闭包

4.3 应用场景

闭包应用场景

5.js如何实现类的继承

js如何实现类的继承

6.js的new操作符做了哪些事情

js的new操作符做了哪些事情

7.JS基本数据类型和引用数据类型的区别及深浅拷贝

JS基本数据类型和引用数据类型的区别及深浅拷贝

8. ES6常用语法总结

ES6常用语法总结

9.promise

promise 例子很形象生动

10.原生ajax+封装ajax+使用方法

原生ajax+封装ajax+使用方法

11.git常用命令

git常用命令

12.垃圾回收机制

js的垃圾回收机制 可达性
什么是垃圾：
一般来说没有被引用的对象就是垃圾，就是要被清除， 有个例外如果几个对象引用形成一个环，互相引用，但根访问不到它们，这几个对象也是垃圾，也要被清除。

四、优秀博文

看到一个很好的团队，把其中不错的文章记录下来：
ES6十大特性
flex弹性布局
命名规范
自适应 > 响应式
响应式布局三要点：
1、流式布局 Liquid Layout
2、Media Query
3、viewport
自适应与响应式网页设计
《抓紧面试前的宝贵时间 快速搞定前端初级JavaScript面试》学习目录

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251359.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Babel 7 基础入门学习（详细版）

Babel 7 基础入门学习（详细版）

可以在我的GitHub上下载示例代码。 前言 之前一直想要系统的学习一下Babel的使用规则&#xff0c;看过阮一峰老师的《Babel基础入门》&#xff0c;无奈此教程是2016年出的&#xff0c;而Babel 7都已经出来啦&#xff0c;于是&#xff0c;在搜集了各种资料后&#xff0c;关于…
阅读更多...
Kubernetes学习之路（四）之Node节点二进制部署

Kubernetes学习之路（四）之Node节点二进制部署

K8S Node节点部署 1、部署kubelet &#xff08;1&#xff09;二进制包准备 [rootlinux-node1 ~]# cd /usr/local/src/kubernetes/server/bin/ [rootlinux-node1 bin]# cp kubelet kube-proxy /opt/kubernetes/bin/ [rootlinux-node1 bin]# scp kubelet kube-proxy 192.168.56.1…
阅读更多...
前端知识点梳理（二）

前端知识点梳理（二）

1.内核 浏览器内核&#xff08;Rendering Engine&#xff09;最初分为&#xff1a;渲染引擎&#xff08;layout engineer&#xff09;或&#xff08;Rendering Engine&#xff09;和js引擎&#xff1b;后来 JS 引擎越来越独立&#xff0c;内核就倾向于单指渲染引擎。浏览器she…
阅读更多...
微信小程序模仿开眼视频app（三）——信息卡片瀑布流和分类

微信小程序模仿开眼视频app（三）——信息卡片瀑布流和分类

《微信小程序模仿开眼视频app&#xff08;一&#xff09;——视频首页、视频详情、分类》 《微信小程序模仿开眼视频app&#xff08;二&#xff09;——搜索功能》 可到我的github账号上去copy文件 瀑布流部分 文件代码提示的挺详细的&#xff0c;这里主要点一下 社区与分类…
阅读更多...
javascript --- typeof方法和instanceof方法

javascript --- typeof方法和instanceof方法

ES5中: 原始类型包括:Number、String、Boolean、Null、Undefined 原始封装类型包括:Number、String、Boolean 引用类型包括:Array、Function、RegExp、Error、Date、Error 变量对象 原始类型的实例成为原始值,它直接保存在变量对象中. 引用类型的实例成为引用值,它作为一个指针…
阅读更多...
《JavaScript 高级程序设计》笔记 第1~5章

《JavaScript 高级程序设计》笔记 第1~5章

第1章 js是专为网页交互而设计的脚本语言&#xff0c;由3部分组成&#xff1a; ECMAScript&#xff0c;提供核心语言功能DOM文档对象模型&#xff0c;提供访问和操作网页内容的方法和接口BOM浏览器对象模型&#xff0c;提供与浏览器交互的方法和接口 js是一种脚本语言、解释…
阅读更多...
javascript --- js中prototype、__proto__、[[Propto]]、constructor的关系

javascript --- js中prototype、__proto__、[[Propto]]、constructor的关系

首先看下面一行代码: function Person(name){this.name name; } var person1 new Person; console.log(person1.__proto__ Person.prototype); console.log(person1.constructor Person);控制台打印如下: 可以看见,当使用构造函数(Person)构造一个实例(person1)时, 在后…
阅读更多...
前端知识点整理收集（不定时更新~）

前端知识点整理收集（不定时更新~）

知识点都是搜集各种大佬们的&#xff0c;如有冒犯&#xff0c;请告知&#xff01; 目录 原型链 New关键字的执行过程 ES6——class constructor方法 类的实例对象 不存在变量提升 super 关键字 ES6——...&#xff08;展开/收集&#xff09;运算符 面向对象的理解 关…
阅读更多...
重学《JavaScript 高级程序设计》笔记 第6章对象

重学《JavaScript 高级程序设计》笔记 第6章对象

第6章 面向对象的程序设计 ECMAScript中没有类的概念&#xff1b; 1.创建对象-历史 1.1 创建实例&#xff0c;添加方法和属性 → 对象字面量 缺点&#xff1a; 使用同一接口创建很多对象&#xff0c;产生大量重复代码 var person new Object() person.name "Y" pe…
阅读更多...
javascrip --- 构造函数的继承

javascrip --- 构造函数的继承

两点需要注意的. 第一是在构造函数声明时,会同时创建一个该构造函数的原型对象,而该原型对象是继承自Object的原型对象 // 声明一个构造函数Rectengle function Rectangle(length, width) {this.length length;this.width width; }// 即:看见function 后面函数名是大写,一般…
阅读更多...
javascript --- 使用语法糖class定义函数

javascript --- 使用语法糖class定义函数

本文讨论的是通过class声明的函数,有什么特点,或者说是指向了哪里. class A() {} // A是一个类// 要看class声明的函数指向哪里,只需将其[[Prototype]]属性打印到控制台,下面看看A和它的原型对象的指向 // 注:[[Prototype]]属性通过__proto__访问 console.log(A.__proto__…
阅读更多...
前端知识点整理收集（不定时更新~）二

前端知识点整理收集（不定时更新~）二

目录 require() 加载文件机制 线程和进程 线程 单线程 Nodejs的线程与进程 网络模型 初识 TCP 协议 三次握手 I/O I/O 先修知识 阻塞与非阻塞 I/O 同步与异步 I/O Git 基础命令 分支操作 修改远程仓库地址 远程分支获取最新的版本到本地 拉取远程仓库指定分支…
阅读更多...
SpringBoot零基础入门指南--搭建Springboot然后能够在浏览器返回数据

SpringBoot零基础入门指南--搭建Springboot然后能够在浏览器返回数据

File->new Project 修改默认包名&#xff0c;根据自己的喜好修改 选择初始化需要导入的包&#xff0c;尽量不要一开始就导入很多&#xff0c;特别是数据库&#xff0c;不然启动可能会有问题&#xff0c;创建好的目录如下&#xff1a; 配置文件写在application.properties下&…
阅读更多...
JavaScript算法相关

JavaScript算法相关

1. 排序 1.1.冒泡排序 每一轮比较&#xff0c;从左至右交换相邻&#xff0c;每轮结束&#xff0c;最后一个为最大下一轮&#xff0c;需要比较的个数 - 1 j < len - i (范围动态缩小)共 len - 1 轮比较 function bubbleSort(arr) {var len arr.length;for (var i 1; i &…
阅读更多...
数据结构基础知识

数据结构基础知识

排序 参考&#xff1a;https://www.bilibili.com/video/av38482633/?spm_id_fromtrigger_reload 目录 排序 插入排序 直接插入排序 折半排序 希尔排序 ​ 交换排序 冒泡排序 快速排序 选择排序 堆排序 流量单位计算 什么是计数排序 复杂度分析&#xff1a; 什…
阅读更多...
linux中安装软件，查看、卸载已安装软件方法

linux中安装软件，查看、卸载已安装软件方法

各种主流Linux发行版都采用了某种形式的包管理系统&#xff08;PMS&#xff09;来控制软件和库的安装。 软件包存储在服务器上&#xff0c;可以利用本地Linux系统上的PMS工具通过互联网访问。这些服务器称为仓库。 由于Linux发行版众多,目前还没有统一的PMS标准工具。 这里分别…
阅读更多...
html5 --- 使用javascript脚本控制媒体播放

html5 --- 使用javascript脚本控制媒体播放

H5中的标签(<audio…/> 和 <video…/>)对于JS中的HTMLAudioElement对象和HTMLVideoElement对象 对象有以下几个方法: play(): 播放 pause(): 暂停播放 load(): 重新装载音频、视频 canPlayType(type): 判断该元素可播放type类型的音频、视频 下面是一个简单的音乐…
阅读更多...
css3 --- 使用媒体查询进行响应式布局

css3 --- 使用媒体查询进行响应式布局

css3引入media,可以根据设备特性进行不同的布局, 本文展示的是根据不同屏幕的宽度进行不同的布局,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title> 针…
阅读更多...
node项目正常启动后不能访问（防火墙未放行端口）

node项目正常启动后不能访问（防火墙未放行端口）

今天打开个人站点&#xff0c;发现登陆不了&#xff0c;原以为是pm2的问题&#xff0c;先停了pm2用node app.js的方式运行后端代码&#xff0c;项目能正常启动但是依然不能登陆。 1 检查ecs的安全组规则&#xff0c;node项目端口3000、8888是否放行 2 确认node正常运行 输入…
阅读更多...
图片地址引用

图片地址引用

阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023