前端面试总结


前端重要知识点总结,以供学习参考,持续更新,若有错,请各位大佬指点。


HTML/CSS部分


1.doctype的作用

告知浏览器的解析器用什么文档标准解析文档,浏览器模式分为标准模式和混杂模式,若未声明则按混杂模式解析,会导致无兼容性

2.块级元素、行内元素、空元素,块级、行内如何区分

块级元素:div p h1-h6 ul li ...

行内元素:a span img input textarea em  ...

空元素:img  br  hr  input  meta

区分块级、行内元素:块级元素独占一行,可设置width height;行内元素不可设置,且与其他行内元素位于同一行

3.css盒子模型

内容 padding margin border

4.css选择器

id选择器、类选择器、标签选择器、后代选择器、属性选择器、子选择器、伪类选择器、通配符选择器(*)

优先级:!important > 内联 >  id > class > tag > *

特指度:I-C-E计算公式

5.css定位

static:默认定位

absolute:绝对定位,相对于第一个非static定位的父级元素定位,原位置消失

relative:相对定位,相对于原来的位置定位,原位置仍保留

fixed:绝对定位,相对于浏览器窗口定位

6.display的值

none:元素消失

block:像块级元素一样显示

inline:像行内元素一样显示

inline-block:对象呈行内元素显示,但是内容作为block对象呈现

list-item:元素像列表一样显示(取列表的list-style-type)

7.display:none和visibility:hidden的区别

display:none指的是元素彻底消失

visibility:hidden元素还占空间,留一片空白区域

8.transition过渡

9.src和href的区别

src(source)用于替代当前元素,href(hypertext reference)建立一个引用连接。

10.localStorage、sessionStorage和cookie的区别

localStorage和sessionStorage是 H5 web storage API提供的

三者都存储在浏览器端

localStorage:存储持久数据,浏览器关闭后不丢失,存储大小>5M,仅本地保存。

sessionStorage:存储临时数据,数据在浏览器关闭后丢失,存储大小>5M,仅本地保存。

cookie:在设置的cookie过期时间前一直有效,存储大小<4K,会自动传递到服务器,服务器也可写cookie到客户端

11.一次完整的HTTP请求

前端面试总结_第1张图片


js部分


1.js面向对象:继承、多态、封装

继承:实例继承原型的属性

多态:同一个方法在不同时刻表现出不同的状态(比如子对象继承了父对象的属性,但是觉得不合适,可以重写属性,覆盖父对象的属性)

封装:代码复用性提高

2.js三大核心

ECMAScript:核心语言功能

DOM:  提供访问和操作网页内容的方法和接口

BOM:提供与浏览器交互的方法和接口

3.数据类型

Undefind、Null、Number、String、Boolean、Object,Symbol(ES6新增)

4.强制类型转换和隐式类型转换

①强制类型转换:parseInt parseFloat Number String

②隐式类型转换:+ - == if while 将参数转换为boolean值

5.数据结构

栈:先入后出  push(从末端插入) pop(从末端移除)

队列:先入先出 push(从末端插入) shift(从前端移除) unshift(从前端插入)

6.ajax请求的post和get方法区别

get:使用url传递参数,容量小,安全性差,有缓存

post:一般用于修改服务器上的资源,容量大,无缓存

7.ajax

最大特点:局部刷新页面

ajax核心:XMLHttpRequest对象 或 ActiveXObject对象(IE5 IE6)

请求流程:①创建XHR对象;②调用XHR对象的open方法(接收三个参数:请求类型、url、是否异步发送请求的布尔值);③当状态码为2时,调用XHR的send方法,发送请求;④触发XHR对象的onreadystatechange事件;⑤判断readyState状态(0-4)是否完成请求(4代表完成);⑥判断status(HTTP状态);⑦调用成功、失败的函数

注意:为了确保跨浏览器兼容性,必须在调用open()方法之前指定onreadystatechange事件

解析json数据:JSON.parse()

8.jsonp原理

由回掉函数和数据构成,通过动态创建script标签使用

9.同源策略

一个域上的脚本不允许访问另一个域的文档,安全性

10.事件

HTML事件:嵌入在html元素中的事件(缺点:html与js耦合性太强)

DOM0级事件:将函数赋值给一个事件处理程序

DOM2级事件:addEventListener() removeEventListener()

IE事件:attachEvent()  detachEvent()

阻止事件冒泡、获取:stopPropagation()

11.主流浏览器内核

webkit:safari chrome

presto:opera

gecko:firefox

trident:IE

12.DOM操作

创建:document.createElement

添加:①appendChild ②insertBefore

修改:①removeChild ②remove ③replaceChild ④replaceNode

12.2 DOM扩展

①querySelector等选择器

②自定义属性 data-

13.BOM

核心:window

打开窗口:window.open()

弹出窗口:alert confirm等

location对象:常用href属性

history对象:history.go(-1)返回上一页

14.理解this对象

在全局函数中,this等于window,当函数作为某个对象的方法调用时,this等于该对象

15.闭包

有权访问另一个函数作用域中的变量的函数

16.call apply

call()和apply()的作用相同,call()第一个参数是this值,其余参数需要逐个列举出来,apply()传递的第一个参数是this,其余参数是参数数组


jquery部分


1.jquery选择器

①基本选择器:id class element *

②层次选择器:parent>child(所有子元素)  prev+next(prev之后的相邻元素,可用next()代替)  prev~siblings(prev所有兄弟元素,可用nextAll()代替)

③简单过滤选择器(常用的)

:odd          索引值为奇数的元素,从0开始

:event        索引值为偶数的元素,从0开始

:eq(index)  索引值为index的元素,从0开始

:gt(index)    索引值大于index的元素,从0开始

:lt(index)    索引值小于index的元素,从0开始

④内容过滤选择器

:contains(text)  包含text文本的元素

:has(selector)    包含selector元素的元素

:empty              不包含子元素的或文本内容为空的元素

:parent              含有子元素或文本的元素(内部不为空的元素)

⑤可见性过滤选择器

:hidden    获取所有不可见的元素

:visible      获取所有可见的元素

⑥属性过滤选择器(常用)

[ attribute ]    获取包含给定属性的元素

[ attribute=value ]  获取给定属性是某个值的元素

⑦子元素过滤选择器

:nth-child()  获取每个父元素下的特定位置的元素,从1开始

:first-child    获取每个父元素的第一个子元素

:last-child    获取每个父元素的最后一个子元素

:only-child    获取每个父元素下的仅有一个子元素类别

⑧表单元素属性过滤选择器

:enabled    获取表单中所有属性为可用的元素

:disabled    获取表单中所有属性为不可用的元素

:checked    获取表单中所有被选中的元素

:selected    获取表单中所有被选中的option元素

⑨表单选择器(常用)

:input        获取所有的input textarea select

:password  获取所有的密码框

:radio        获取所有的单选按钮

:checkbox  获取所有的复选框

:submit      获取素有的提交按钮

:button      获取所有按钮

:file            获取所有的文件域

2.元素操作

attr()    获取、设置属性

html()  获取第一个、修改所有内容

text()  获取所有、修改所有内容

val()    获取、修改表单元素的值

css()    设置元素样式

addClass()  增加元素类名

toggleClass  切换元素类名

removeClass 删除元素类名

3.DOM操作

创建节点:$()

内部插入节点:

①append()        插入在内部最后一个位置

②appendTo()    把所选元素追加到另外指定元素的集合中

③prepend()      插入到内部第一个位置

外部插入节点

①after(content)  before(content)  插入到目标元素外部的后面/前面,content为插入内容

②insertAfter(content)  insertBefore(content)  插入到目标元素的后面/前面,content为目标元素

你可能感兴趣的:(前端面试总结)