前端部分基础习题

一.HTML

1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

!DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。

标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作！

具体区别
1.盒模型
在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;
在兼容模式中 ：width则是=width+padding+border
2.兼容模式下可设置百分比的高度和行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
3.用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

2.行内元素有哪些？块级元素有哪些？ 行内块元素有那些？

常见的内联元素有：
<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,

<address>,<blockquote>,<form>


块级元素：
<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>,

<img>,<input>,<select>,<textarea>,<button>


行内块元素：
img|input|select|textarea|button等，也被称为可置换元素（Replaced element）。

3.请说出五种html5的特性

语义化标签：header,footer,nav etc.
canvas 画布
（3）audio, video

（4）drag 拖拽

（5）本地存储 localStorage, sessionStorage

（6）webSocket 长连接

（7）定位

（8）增强型表单 input number, datalist, keygen, output, progress

（9）svg 矢量绘图

（10）webWorker 实现js多进程。

4.请写出至少5个HTML块元素标签。

<div>,<p>,<li>,<ol>,<ul><h1>~<h6>

5.a标签在新窗口打开链接怎么加属性？

如果是想让a链接在新窗口打开，只需要将target的属性设置为blank

6.请列举几个html新增的标签？

video 表示一段视频并提供播放的用户界面，audio 表示音频，time 日期和时间值，source 为video和audio提供数据源，nav 导航，aside 在一边，article 文章，footer 页尾，header 页眉，main 主要的，menu 菜单

canvas 表示位图区域，track 为video和audio指定字母，svg 定义矢量图code 代码段，figure 和文档有关的图例，figcaption 图例的说明，mark 高亮的引用文字，Datalist 提供给其他控件的预定义选项，keygen 秘钥对生成器控件，output 计算值，progress 进度条，embed 嵌入的外部资源，menuitem 用户可点击的菜单项，template 模板，section 部分

7如何定义一个单选按钮？

input[type=‘radio’]radio定义单选按钮

8.简述src与href的区别？

href 是指向网络资源所在位置，建bai立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

9. 标签上的title属性与alt属性的区别是什么？

alt是在图片不能正常加载时候显示的提示语

title属性是鼠标划上去显示的内容

10.如何处理html5新标签的浏览器兼容问题？

使用静态资源的html5shiv包（2）载入后，初始化新标签的css

11. 分别写出以下几个HTML标签：文字加粗、下标、居中、斜体

加粗：<b>、<strong>，下标：<sub>，居中：<center>，字体：<i>

12. 对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、

使用外 链css和js脚本、

结构行为表现的分离、文件下载与页面速度更快、

内容能被更多的用户所访问、

内容能被更广泛的设备所访问、

更少的代码和组件，容易维护、改版方便，不需要变动页面内容、

提供打印版本而不需要复制内容、

提高网站易用性。

13.前端页面有哪三层构成，分别是什么，作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。

HTML：结构层：

网页的结构或内容层是该页面的基础HTML代码。

CSS：样式层：

该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。

JavaScript：行为层

行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改

14.img的常用属性

Src 图像的源文件

Alt 提示文字

width,height 高度，宽度

Border 边框

Vspac 垂直间距

Hspace 水平间距

15.字体加粗的方法

（1）用CSS中font-weight:bold样式给字体加粗
（2）用html中的<strong>加粗标签
（3）用html中的<b>加粗标签

16.请讲述下iframe框架的优缺点

优：　iframe能够原封不动地把嵌入的网页展现出来。如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决

缺：　会产生很多页面，不容易管理。很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差

现在基本上都是用Ajax来代替iframe，iframe已渐渐退出了前端开发。

input不可编辑，和必填项属性分别是什么。
disabled不可被编辑； required必填项；

17.请写出input常用的13种type类型，并写出每种类型的应用场景

text 这是默认的输入类型。

password 输入字符会经过掩码处理，表现为一连串的点。

file 定义文件上传控件。

radio 定义单选按钮

checkbox 定义复选框

hidden 定义隐藏的输入字段，用于在表单中添加对用户不可见，

button 定义按钮

image 定义图像形式的提交按钮

reset 定义重置按钮,重置按钮会清除表单中的所有数据

submit 定义提交按钮,提交按钮会把表单数据发送到服务器

color 定义调色板

tel 定义包含电话号码的输入域

email 定义包含email地址的输入域

url 定义包含URL地址的输入域

search 定义搜索域

number 定义包含数值的输入域

range 定义包含一定范围内数字值的输入域

date 定义选取日、月、年的输入域

month 定义选取月、年的输入域

week 定义选取周、年的输入域

time 定义选取月、年的输入域

datetime 定义选取时间、日 月、年的输入域(UTC时间)

datetime-local 定义选取时间、日 月、年的输入域(本地时间)

18.请简述一下你对语义化标签的理解

⒈用正确的标签做正确的事情

⒉HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；

⒊及时在没有样式CSS情况下也以一种文档格式显示，并且时任意阅读的；

⒋搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；

⒌时阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

19… 如何区分html和html5

1、在文档声明上，html有很长的一段代码，并且很难记住这段代码，都只是靠工具直接生成，而html5却不同，只有简简单单的声明，也方便人们的记忆，更加精简。
2、在结构语义上；html4.0没有体现结构语义化的标签。html5在语义上却有很大的优势,提供了一些新的html5标签。

二.CSS

1.css性能优化的方法

1.异步加载CSS

2.js，css文件压缩、

3.有选择地使用选择器

4.优化重排与重绘

不要使用@import
减少闭包的使用
减少dom操作
使用精灵图和雪碧图

2.Css选择器有几种？选择器的优先级是怎样的。

元素选择器，id选择器，calss 选择器，后代选择器，子代选

择器，伪类选择器，通配符

内联样式> id>class>元素>通配符>继承样式

3.浮动的原理

将排成一列的元素变成一行，脱离文档流。

主要是为了让一些标签并排显示

4.定位有几种，他们的特点分别是什么？

STATIC(静态）
HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中

RELATIVE(相对）
相对定位, 特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。

ABSOLUTE(绝对)
绝对定位 特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。

FIXED(固定)
固定定位, 特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置

粘性定位

粘性定位的语法格式如下：

选择器 { position: sticky; top: 10px; }

1、粘性定位可以认为是相对定位和固定定位的混合；

2、粘性定位的元素是以浏览器的可视窗口为参照点移动元素；

3、粘性定位继续占有原先的位置；

4、必须添加top、bottom、left、right其中一个才有效；

5、一般都是跟页面滚动搭配使用；

5. position的值relative和absolute的定位原点是什么？

relative：相对定位，是相对于其原本的位置来定位的。
Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位
Fixed：固定定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
Static：默认值，没有定位。
Inherit：继承父元素的position值。

6.如何设置背景透明？

Background-rgba（四个参数）transparent

请列举几种布局方式，并列举各自优点
1 静态布局:布局简单，没有兼容性问题。
2 自适应布局:自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局
3 流式布局:流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
4 响应式布局:通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局

7.css引入方式有几种？link和@import有什么区别？

4种，行内样式，内嵌式，导入式，外链式

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；

    @import是CSS提供的，只能用于加载CSS;

页面被加载的时，link会同时被加载

    @import引用的CSS会等到页面被加载完再加载; 网络不好的情况下，会造成页面混乱

8.在css样式中使用em和px。各有什么优势，在表现上有什么区别？

px：长度单位，值是固定的

em：值不是固定的，并且会继承父级元素的字体大小。例如浏览器默认字体的高是16px，如果未经调整的话，1em=16px。12px=0.75em

9.请列举几种隐藏元素的方法？

display:none (通过隐藏盒子属性，脱标)

visibility:hidden (通过隐藏盒子属性，不脱标)

opacity: 0 ； (通过改变元素的透明度，不脱标)

10.css中有哪些新属性？

background-size

padding-box

text-shadow

transform：

Transition

11.请写出清除浮动有几种方式，分别是什么.

clear：both：

父级添加overflow属性（父元素添加overflow:hidden）

使用after伪元素清除浮动

使用before和after双伪元素清除浮动

12.如何初始化css样式？为什么要初始化css样式？

初始化CSS时候将为我们节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。

13.如何让一段文本中的所有英文单词的首字母大写？

Text-transform：capitalize 首字母大写
Text-transform ：uppercase 全部都是大写
Text-transform ：lowercase 全都是小写

14.rgba()和opacity的透明效果有什么不同？

opacity作用于元素，以及元素内的所有内容元素

.rgba()只作用于元素的颜色或其背景色，元素的子元素不会继承透明效果

15.行内，块状，行内块元素之间如何进行转换？

Display:inline； 行内样式

Display:inline-block；行内块元素

Display：block; 块状元素

16.如何设置一个元素，固定到网页的底部

Bottom：0；

Position：fixed；

17.如何使用css将多出范围的字体变为…

text-overflow : ellipsis

18.如何解决浮动引起的高度坍塌

1.给父元素设置高度

2.设置一个空标签，并且给此标签加上

clear:both；

19.magin与padding的区别

Margin是调盒子与盒子之间的距离，padding调整盒子内部的距离。

20.如何取消a链接点击时的背景颜色

-webkit-tap-highlight-color:transparent;

21、Display：none;和visivility：hidden；的区别？

display:none 不占页面空间，visiblity:hidden 占据原先页面空间。、

display:none 引起页面重绘和回流， visiblity:hidden 只引起页面重绘。

22.css3新增层伪类有哪些？

elem:last-child

elem:only-child

elem:only-of-type

elem:empty

last-of-type

first-of-type

23.请描述下优雅降级与渐进增强

优雅降级：项目开始就构建站点的完整功能，然后针对浏览器测试和修复。对低版本的浏览器就行兼容性的修复。

渐进增强：项目开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

渐进增强相当于向上兼容，而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的

24.请简述一下css中的z-index的权重问题

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

后面的数值越大，表示越要优先显示

1.定位的元素在没定位的元素上面
2.同样定位,后面的元素在前面的元素上面
3.同级的父级都定位了【就不看子级了】，谁的z-index高谁在上面
4.一个父级定位了，另一个父级没定位，没定位的元素的子级定位了，那就按照定位的子级和定位的父级看谁的z-index高谁在上面。

25. 请简述你所了解的css中z-index的权重问题

1.定位的元素在没定位的元素上面
2.同样定位,后面的元素在前面的元素上面
3.同级的父级都定位了【就不看子级了】，谁的z-index高谁在上面
4.一个父级定位了，另一个父级没定位，没定位的元素的子级定位了，那就按照定位的子级和定位的父级看谁的z-index高谁在上面。

26. 有哪几种方法可以使html元素脱离文本流？

1:float 2:absolute 3:fixed

27. 超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）

28. 介绍一下标准的css的盒子模型？与低版本IE的盒子模型有什么不同？

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

29. CSS中哪些属性可以继承？

font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
color：文本颜色
visibility：元素可见性
光标属性：cursor

30. width: auto 和 width: 100% 的区别？

1、width:100% 并不包含margin-left margin-right的属性值，width直接取其父容器的宽度。如果设置了margin那新的width=100%+margin的值。就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是body)。
2、width:auto包含margin-left/margin-right的属性值。width:auto总是占据整行，如果要设置margin的值那么新width=100%-margin。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
3、一般width:auto使用的多，因为这样灵活，而width:100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破环布局。

31. 什么是FOUC？你如何来避免FOUC

如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：
以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。
原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用LINK标签将样式表放在文档HEAD中。

三.弹性布局

1. flex是什么？

flex是弹性盒子模型。元素被设置display: flex，就变成弹性容器。 用来为盒状模型提供最大的灵活性。 flex还是弹性布局中的属性是flex-grow、flex-shrink、flex-basis三个属性的缩写。 flex属性的默认值为:0 1 auto

2. 请解释一下css3的flex(弹性盒布局模型)以及使用场景

该布局模型的目的是提供一种更加高效的方式来对容器的条目进行布局、对齐和分配空间。适用于移动端，在Android和ios.上也支持。

3. 弹性盒子使用什么样的方式布局的？

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

4. 弹性盒子的布局原理是什么？

采用Flex布局的元素，称为Flex容器（flex container)，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item)，简称"项目"Flex容器默认存在两根轴:水平的主轴(main axis）和垂直的交叉轴（cross axis)。项目默认沿主轴排列，当然项目的排列方向也可以通过改变属性来控制。

5. 如何实现一个元素在网页中垂直居中？

给父元素加上{ display:flex;align-items:center; }

6. flex弹性盒子布局与传统盒模型布局的区别和优点

传统布局，基于盒模型，依赖 display属性 、position属性 、float属性。它对于那些特殊布局非常不方便，比如垂直居中
如果屏幕尺寸发生变化,传统布局的页面样式就会发生变化.
弹性盒子可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理

四．Js

1变量命名规则

1. 变量命名必须以字母或是下表符号“_”或者“$”为开头
2. 变量名长度不能超过255个字符。
3. 变量名中不允许使用空格。
4. 不使用脚本语言中保留的关键字及保留符号作为变量名。 .
5. 变量名区分大小写。（javascript是区分大小写的语言）

2.数据类型有几种，判断数据类型的方法

七种数据类型：numeber，null,undefinde,string,boolean,object，symbol

.JS数据类型的判断主要有三种方法：typeof、instanceof、Object.prototype.toString.call()

3.js哪些运算符常用作布尔判断。简述运算符的优先级

逻辑运算符 ||,&&,!。 . [] () 字段访问、数组下标、函数调用以及表达式分组

4.写出以下常用函数：生成随机数、数字四舍五入、字符串查询子串、字符串分割为数组、检索数组中的元素、数组拼接成字符串、向数组中增删元素

rand()生成随机数，

toFixed()四舍五入

substr方法用于返回一个从指定位置开始的指定长度的子字符串

split（）字符串分割

results.push()寻找索引

join("")数组拼接成字符串

push（）增加

remove（）删除

5.如何改变元素的内容，样式以及属性；

修改内容：通过dom获取标签的id，使用inner HTML修改该元素的内容

修改样式：通过dom获取标签的id，使用.style.(要修改的样式)如color

修改属性：通过dom获取标签的id，.修改属性。

6.怎样获取浏览器窗口尺寸

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight

7.js控制浏览器前进后退和跳转页面

后退
前进
刷新
停止
返回主页

第一个方法

跳转页面;在当前页面进行跳转 location前可加 window 也可不加

location.href = “http://127.0.0.1:8080/news”;

第二个方法

跳转页面;打开新的标签页进行跳转

window.open(“http://127.0.0.1:8080/news”);

8.常见的遍历数组和对象方法

for循环

foreach遍历（可以同时取出数组中的值和值对应的下标）

for — of遍历

for — in遍历（常见用在对象中，遍历对应的key值和value值）

map循环

every循环

Each循环

9.Js数据类型显式转换的方法（写出三种即可）

转换函数、强制类型转换、利用js变量弱类型转换。

10.全局变量和局部变量的作用范围和生命周期

局部变量：

1.局部变量：在函数内部用var声明的变量

2.局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量
（函数参数只在函数内起作用，属于局部变量）

3.局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁

全局变量：

全局变量：变量在函数外定义，网页上的所有脚本和函数都能访问它

变量生命周期：

1.变量生命周期在声明变量时开始

2.局部变量在函数执行完毕后被销毁-

3.全部变量在页面关闭后被销毁

11.例举3种强制类型转换和2种隐式类型转换?

强制：to string string number Boolean

隐式：“+”“-”

12.JS向数组中添加和删除元素的方法有哪些

1.push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

2.unshift方法就是将要添加的元素添加到数组头部

3.pop方法是与push对应的，删除最后一个元素，数组长度-1

4.splice方法是修改方法，具有添加和删除功能

5.Shift删除数组中第一个元素

13.什么是事件委托

事件委托就是利用冒泡的原理，把本应该添加到某个元素上的事件委托给他的父级，从而减少DOM交互达到网页优化。

14.闭包是什么？有什么特性？对页面有什么影响？

闭包是将函数内部和函数外部连接起来的桥梁。 特性：函数嵌套函数；内部函数可以读取到外部函数的变量和参数；不会被垃圾回收制度回收。

使用闭包会占有内存资源，过多的使用闭包会导致内存溢出，影响页面刷新速度。

                                                                                                                                                       ，

15.如何创建新元素并添加到页面中

先在html页面创建一个空div var div = document.createElement(‘p’);

Div.appendChild§;先创建元素然后插入页面中的空div

16.希望获取到页面中所有的checkbox怎么做

var type = document.getElementByClass(input).type=’checkbox‘

17.创建一个包含50个元素的数组，每一项都是0到50之间的随机数字，请写出关键代码

18.函数调用的方式有几种（三种即可）。

1.函数调用 模式 声明式: function fuc() {}
表达式式: var func = function() {};
Function: new Function( ‘参数’,…,’函数体’ );
2.方法调用 模式 method
3.构造器模式(构造函数模式, 构造方法模式)
特点：使用 new 关键字引导

19.js的引入方式有几种

内部引入。行内引入，外部引入

20.数据类型分为几类

基本数据类型，引用数据类型

21.Null和undefind的区别

Null是空值typeof返回的是object

Undefined是未定义的，返回的是Undefined

22.js的特点是什么

简单性，安全性，动态性，跨平台

23.怎样获取到页面中的

DocumentgetElementById(‘con’);

24.javascript输出数据的方法；

弹窗，console.log（）,document.write,innnerhtml,innertext。

25.什么是javascript

Js是一种脚本语言，不需要编译。主要用于web，它用于增强html页面；可以嵌入html和代码中。

26.javascript的typeof返回哪些数据类型

Object，undefined，number，string，boolean

27.请写出添加 删除 替换 插入节点所用的方法？

1、创建元素节点：createElement

创建文本节点：createTextNode;

2、插入节点：appendchild:在要插入的元素节点上调用，他插入指定的节点使其成为那个节点的最后一个子节点。

3、删除节点：removeChild;从文档树中删除一个节点（先找到要删除节点的父节点，用父节点删除）；

4、替换节点：replaceChild;将一个节点替换为另一个节点（先找到要替换的节点的父节点，用父节点替换）；

28.什么是数组，什么是对象，并说出他们的区别

对象，就是一种无序的数据集合，由若干个“键值对”构成

数组：组也是对象，数组只是将对象里面无序的数据有序化。

区别1、数组表示有序数据的集合，而对象表示无序数据的集合。
数组的数据没有”名称”，2但是有对应的索引；对象的数据有”名称”（属性名），而对象因为是无序数据的集合，所以不存在索引

29.请写出js中的两种定时器，区别是什么

setTimeout 和 setInterval。

区别setTimeout 只执行一次 setInterval重复执行

30.js的两要素

选择器和函数

31.split（）与join（）的区别。

join() 方法用于把数组中的所有元素放入一个字符串

split(a,b)方法：用于把一个字符串分割成字符串数组

32.js入口函 数是什么，他的作用是什么？

window.onload

作用1 . 等待页面加载完毕2 . 有一个独立的作用域,

33.pop、Push、unshift、shift的作用

push：在数组的尾部加入一个元素，并返回原有length+1的长度。

unshift：在数组的头部加入一个元素，并返回原有length+1的长度。

pop：删除数组尾部第一个元素，并返回这个元素。

shift：删除数组头部的第一个元素，并返回这个元素。

34.函数分为几种，区别是什么

声明函数：使用function声明一个函数，并指定函数名，调用时直接调用该函数名

匿名函数：使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，

闭包函数：内部函数可以调用外部函数的参数和变量

35.如何判断一个数是不是整数

If判断用praseint把这个数转换为整数再与的数

36.innerHTML和innerText的区别是什么

innerHTML ：innerHTML设置或获取标签所包含的HTML+文本信息

innerText： innerText设置或获取标签所包含的文本信息

37.Break和continue的区别是什么？

“break是结束循环。 continue是结束本次循环并进行下一轮循环

38.this是指向的哪个全局变量

Window

39.addEventListener(方法中有几个参数， 作用分别是什么?

三个参数

1：要触发的事件

2：要触发得类型

3：ture跟flase ture为捕获阶段 flase为冒泡阶段 默认为flase

40.如何设置ajax为同步或异步

Async：ture；异步

Async：flase; 同步

41.http和https分别是什么? 区别是什么?

http：是超文本传输协议；

https：是超文本传输安全协议；

http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443,

申请证书方式不同，https是具有安全性的ssl加密传输协议，

42.请讲述一下什么是dom?作用是什么

Dom是文件对象模型；

使JS有访问HTML的能力，能够实现对HTML中内容的操作

43.dom中的节点分为几种类型?

元素节点 　　Node.ELEMENT_NODE(1)

属性节点 　　Node.ATTRIBUTE_NODE(2)

文本节点 　　Node.TEXT_NODE(3)

44.访问节点和创建节点的方法都有什么?

创建： document.write()

innerHTML

document.createElement()

访问：getElementById() 和 getElementsByTagName()

45.数组是什么?数组的三大特性是什么?声明数组的方法有几种？

利用new array（）直接var 一个[]

数组是种将一组数据存储在单个变量名 下的优雅方式

索引可以是任意对象，动态存储，存放任意数据类型

46.new关键词的作用

使用new关键字是将函数当作构造函数调用，即为构造对象，若没有人为的重写调用构造函数时返回的值，那么返回的对象是由解析器自己生成的。

47.js绑定事件的方法有几种

在DOM元素中直接绑定；function divFun(){}

在JavaScript代码中绑定；div.Onclick=function{}

绑定事件监听函数。addEventlistener（）

48.你对面向对象编程的理解

面向对象是基于万物皆对象这个哲学观点. 把那里一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的.

面向对象具有封装性,继承性,多态性.封装隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而 继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性.
总之,面向对象的特性提高了大型程序的重用性和可维护性.

49.请讲讲原型链

其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。然后层层递进，就构成了实例与原型的链条，这就是所谓原型链的基本概念。

50.创建对象的方法有哪些？

一、直接创建方式 二、对象初始化器方式 三、构造函数方法

51.如何阻止事件冒泡和浏览器默认事件？

事件冒泡：e.preventDefault()

默认事件：return：false；

52.请谈谈cookie、localStorage和SessionStorage的区别和特点

cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或邮件那样的大数据。若不设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。

SessionStorage不同浏览器之间无法共享，同一浏览器不同标签页或者页面无法共享，如果是同源页面也是可以共享的，同源保证协议相同，主机名相同，端口相同

Local Storage永久，甚至在浏览器关闭之后，除非用户自己去清理浏览器缓存，否则这些信息会一直存在，不同浏览器之间无法共享，同一浏览器不同标签页或者页面可以共享

53.事件流有几种？dom事件流分为几个阶段？

两种:捕获阶段，冒泡阶段

Dom分为：捕获阶段，冒泡阶段，目标阶段。

54.return的作用是什么?

可以阻止浏览器默认事件

也可以返回值

55.函数声明与函数表达式的区别？

以函数声明的方法定义的函数，函数名是必须的，而函数表达式的函数名是可选的。

以函数声明的方法定义的函数，函数可以在函数声明之前调用，而函数表达式的函数只能在声明之后调用。

以函数声明的方法定义的函数并不是真正的声明，他们仅仅可以出现在全局中或者嵌套在其它函数中。

56.什么是cookie？cookie的优缺点。

cookie 是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。

（1）cookie可能被禁用；
（2）cookie与浏览器相关，不能互相访问；
（3）cookie可能被用户删除；
（4）cookie安全性不够高；
（5）cookie存储空间很小(只有4–10KB左右)

57.js本地存储有两种，分别是什么？区别是什么？

localStorage和SessionStorage

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

58.cookie和本地存储的区别是什么？

cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

59.什么是json？json的三种值类型是什么？

Json是数据传输格式之一；

第一种类型是scalar（标量）

第二种类型是sequence（序列）

第三种类型是mapping（映射）

60.请解释一下冒泡排序的原理？

1.原理：比较两个相邻的元素，将值大的元素交换到右边

2.思路：依次比较相邻的两个数，将比较小的数放在前面，比较大的数放在后面。

61.“=”、“”和“=”的区别。

一个是赋值 俩个是等于 三个是绝对等于

五.jQuery

1.请写出js和jquery的入口函数，并简述他们的不同

window.οnlοad= function () {}原生js

$(document).ready(function () {}jquery

原生Js和jQuery入口函数加载模式不同。
编写多个入口函数的区别。

2.请写出jquery动画的显示和隐藏

Show（）显示，hide（）隐藏

3.请写出jquery中绑定事件的四种方式

$(“div”).click(function(){})

$(“div”).bind(click, function(){})

$(“div”).delegate(“p”,“click”,function(){})

$(“div”).on(“click”,“p”,function(){})

4.什么是jQuery？

jQuery是一个简洁而快速的JavaScript库，可用于简化事件处理，duHTML文档遍历，Ajax交互和动画，以便快速开发网站。

5.jQuery 库中的 $() 是什么

在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换。

6.网页上有 5 个

元素，如何使用 jQuery来选择它们？

$(“div”)，

7.jQuery 里的 ID 选择器和 class 选择器有何不同？

ID选择器使用ID来选择元素，例： KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲idtest1"). 而 cl…(".classtest1")。当只需要选择一个元素时，使用ID选择器，如果需要选择具有相同 CSS class的元素，就要用class 选择器。

8.jQuery 里的 each() 是什么函数？你是如何使用它的？

each() 函数就像是 Javascript里的一个 for，它允许你遍历一个元素集合。

$(‘div’).each(function(selected) {
执行的代码

});

9. $(this) 和 this 关键字在 jQuery 中有何不同?

1、表示对象不同：this表示的是javascript提供的当前对象，$(this)表示的是用jquery封装的当前对象。

2、过程不同：this对象可以直接用this.style修改样式，$(this)可以使用jquery提供的方法访问样式。

10. 你如何利用jQuery来向一个元素中添加和移除CSS类?

Jquery 使用addClass()与removeClass()来动态的添加或移出一个css 类

11.什么是ajax，为什么使用ajax？

AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它并非一种新的技术，而是以下几种原有技术的结合体。

在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。

性能会有所降低(一点内容，刷新整个页面！)

用户的操作页面会中断(整个页面被刷新了)

Ajax就是能够做到局部刷新！

12. ajax都有哪些优点和缺点?

ajax的优点：

最大的一点是页面无刷新。
2、使用异步方式与服务器通信。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术。
Ajax的缺点：

1,ajax干掉了back按钮，即对浏览器后退机制的破坏。

2,安全问题

3,对搜索引擎的支持比较弱。
4,破坏了程序的异常机制。

5,另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。

6,一些手持设备（如手机、PDA等）现在还不能很好的支持ajax.

13. post请求和get请求的区别？

1. get是从服务器上获取数据，post是向服务器传送数据。

2. GET请求把参数包含在URL中，将请求信息放在URL后面，POST请求通过request body传递参数，将请求信息放置在报文体中。

3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

4. get安全性非常低，get设计成传输数据，一般都在地址栏里面可以看到，post安全性较高，post传递数据比较隐私，所以在地址栏看不到， 如果没有加密，他们安全级别都是一样的，随便一个监听器都可以把所有的数据监听到。

5. GET请求能够被缓存，GET请求会保存在浏览器的浏览记录中，以GET请求的URL能够保存为浏览器书签，post请求不具有这些功能。

6. HTTP的底层是TCP/IP，GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。

7.GET产生一个TCP数据包，对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；POST产生两个TCP数据包，对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据），并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

14. 什么是跨域?

当协议、域名、端口三者之间任意一个不同即为跨域

15. 请简述同步和异步的区别.

在计算机领域，同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

16.http和https分别是什么？区别是什么？

http是超文本传输协议https是超文本传输安全协议

传输信息安全性不同、连接方式不同、端口不同、证书申请方式不同

将以下jquery选择符翻 译成中文描述：$(“#d div.cls input[type=text][name^=text_]”);

18.请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？

window.name来跨域（最常用）window.name=“父页面的值”;
document.domain
jsonp
使用HTML5中的window.postMessage方法来跨域传送数据
利用WebSocket跨域

19.常见请求头与响应头你了解哪些？

HTTP请求头：
请求头用于说明是谁或什么在发送请求、请求源于何处，或者客户端的喜好及能力。服务器可以根据请求头部给出的客户端信息，试着为客户端提供更好的响应。
HTTP响应头：
响应头向客户端提供一些额外信息，比如谁在发送响应、响应者的功能，甚至与响应相关的一些特殊指令。这些头部有助于客户端处理响应，并在将来发起更好的请求。