1.标签怎么分类？有什么区别？
html分行级元素和块级元素，行级元素同一行显示，块级元素独占一行
行级标签：strng,em,i,spen,u,a...
块级标签:div,dl,ul,li,p,h,H1...H6,
行块级标签：img,input,select,button,textarea...
2.怎么制作表格?怎么实现跨行和跨列？
运用表格语:
<table> <!– table表示声明表格 --> <tr> <!– tr表示行 --> <th>表头…</th> <!– th表头加粗 --> <td>内容…</td> <!– td表示单元格 --> </tr> </table>
制作表格，tr表示行，th，td表示单元格列。再运用rowspan标签可以实现跨行
如：<td rowspan="要跨越的行数">内容....</td>就可以实现跨行了。
跨列得话就诸如上示使用colspan标签就可。
3.css基本选择器有哪些？怎么理解优先级？
id选择器 > 类选择器 > 标签选择器
选择器也有优先级，当相同选择器出现相同样式时，会根据就近原则执行代码，当不同选择器，则看权职大小判断优先哪条代码执行，标签选择器为1，类选择器为10，id选择器为100，内部样式为1000，!importent则为无穷大。
4.伪类样式有哪些？列表和背景样式怎么做？
伪类样式
：link //未点击时
：visited //点击访问后
：hover //鼠标悬停之上时
：action //点击未释放鼠标时
列表
1.列表有无序，有序，定义列表。
①.无序列表特点是自带实心圆样式，标签是父标签ul包含多个li，样式在ul盒子内内边距
②.有序列表特点是自带序号，标签是符标签ol包含li，序号样式也是在ol盒子内的内边距
③.定义列表通常用在图文混编辑，标签是dl包含dt和dd，其中dd自带外边距；
2.列表样式有类型type，图片image，定位position属性，样式类型可更改为实心圆，空心圆，矩形，同时也能设置序号或者none，图片样式可以替换列表原本自带的样式，定位可以设置样式是在盒子内边距还是外边距；也可以缩写，list-style：类型 定位 图片
背景样式
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-attachment 背景图像是否固定或随着页面其余部分滚动
background-repeat 设置背景图像是否重复及如何重复
background 简写属性，作用是将背景属性设置在一个声明中
5.简述下盒子模型？
盒子模型分IE和W3C两种盒子模型
w3c盒子的尺寸=width+内边距padding+边框border+外边距，margin
IE盒子的尺寸=width+外边距margin
在css3中，可以使用box-sizing来设定，通常我们要设定 box-sizing:border-box;
指定盒子模型为IE盒子模型，方便布局。其中属性有border边框，padding内边距，margin外边距，content内容。
6.如何隐藏元素？
给元素加一个display：none
除了使用display:none;之外，我们还可以使用如下方法设置元素隐藏与显示：
（1）. visibility: hidden; 隐藏元素，但还会占用位置，取值visible为元素可见
（2）. opacity: 0; 透明度为0不可见，1为可见，取值为0~1之间
（3）. filter: alpha(opacity=40); 设置透明度，取值为0~100之间
（4）. 使用外边距让元素超出浏览器边缘也可设置元素隐藏。
（5）. overflow:hidden; 溢出处理也可隐藏元素，取值auto,scroll,hidden;
7.浮动有什么特点？会对元素有什么影响？
（1）.脱离标准文档流。 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
（2）. 向左/向右浮动直到遇到父元素或者别的浮动元素。
（3）. 浮动会导致父元素高度坍塌。（影响）
（4）.浮动元素不占空间
8.定位有哪些？分别有什么特点？
相对定位的特点：
1.使用相对定位的元素，它的偏移是以原来的位置作为基点偏移的。
2.相对定位的元素依然属于标准流，它原来的地方还被占据着。
3.设置了相对定位的元素偏移不会对其他盒子造成影响。
绝对定位的特点：
1.使用绝对定位的元素，它的偏移以也使用了定位的最近一个祖先元素的位置作为基点偏移。如果祖先元素没有设置定位则以浏览器窗口作为基点偏移
2.相对定位的元素已经脱离了标准流。
固定定位的特点：
1.使用固定定位的元素，它的偏移是以浏览器窗口作为基点偏移
2.设置了固定定位的元素始终固定在某个位置，会随着浏览器滚动条滚动。
3.固定定位的元素脱离了标准流
当元素定位后会显示在其他盒子的上方，可以通过z-index属性对层次进行调动
1.z-index的取值为整数，值越大层次越高。
2.z-index默认值为0。
3.z-index属性只能用在定位的元素上。
9.html5新增了哪些元素，移除了哪些元素？
input新类型:
number类型——数字选择器
range类型——数字滑动条
email类型——邮箱验证
color类型——拾色器
url类型——网址
date 类型——日期选择器
datetime类型——时间和日期
datetime-local类型——日期和时间选择器
month类型——月份选择器time类型——时间选择器
week类型——年和周选择器
布局结构标签
section ——用于表达书的一部分或一章，或者一章内的一节。
article ——用于表示一篇文章的主体内容，一般为文字集中显示的区域hgroup ——对网页或区段的标题进行组合
header ——页面主体上的头部footer ——页面的底部（页脚）
nav —— 专门用于菜单导航、链接导航的标签，是navigator的缩写
aside ——用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。figure ——标签规定独立的流内容，通常与figcaption联合使用
dialog ——对话标签 配合dt dd标签使用
短语标签：
<code> 表示一段代码块<dfn> 定义一个定义项目。
<code> 定义计算机代码文本。<samp> 定义样本文本。<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
移除的元素
纯表现的元素：basefont，big，center，font,s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
10.css3选择器有哪些？
1、标签选择器，也称为元素选择器。
标签选择器的基本形式如下：tagName{property:value}，其中tagName是标签名称，property是css的属性。
2、类选择器。
类选择器用来为一系列标签定义相同的呈现方式，常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称，这是由css编写者自己命名。(所有浏览器都支持类选择器，但多类选择器(.className1.className2)不被ie6支持。)
3、ID选择器。
ID选择器定义的是某一个特定的html元素，一个网页中只有一个标签或元素使用某一ID的属性值。ID选择器的基本语法格式如下：#idValue{property:value}。其中idValue是ID选择器的名称，可以由CSS编写者自己编写。(所有
浏览器都支持)
4、全局选择器。
全局选择器就是对所有的htmlz元素起作用。语法格式为： * {propery:value}。其中“*”表示对所有元素起作用，property表示css的属性，value表示属性值。
5、复合选择器。
将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器。
6、继承选择器。
继承的规则是子标签在没有定义的情况下，继承父标签的选择器;当子标签重复 定义了父标签的声明时，执行子标签选择器。
7、伪类选择器。
伪类选择器主要应用在标签上，它由四种状态：未访问链接(link)、已访问链接(visited)、激活链接(active)、鼠标停留在连接上(hover)。
11.2D/3D转换有哪些方法？
2D转换方法
translate() 方法——位置偏移 transform:translate(50px,30px)
rotate() 方法——旋转 transform:rotate(20deg);
scale() 方法——按指定x,y的倍数放大和缩小 transform:scale(0.5,2);
skew() 方法——按指定x,y的角度翻转 transform:skew(10deg,20deg);
matrix() 方法——方法的合成六个参数分别表示旋转，缩放，倾斜，移动 transform:matrix(0,1,1,2,0,0);
3D转换方法
rotateX() 方法——围绕指定度数X轴旋转 transform:rotateX(50deg);
rotateY() 方法——围绕指定度数Y轴旋转 transform:rotateY(50deg);
12.css3如何实现过渡和动画？
过渡：
1.确定把效果添加到哪个属性上
2.规定效果的时长
动画：
transition-property——过渡规则 transition-property: width/height;
transition-duration——过渡时间 transition-duration: 5s;
transition-timing-function——指定切换效果的速度
transition-delay——等待指定时间再开始 transition-delay：3s
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
@keyframes 规则
@keyframes规则是创建动画，规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称和时长
animation属性：
animation-duration: 5s; /*完成时间*/
animation-timing-function: linear; /*开始和结束的播放速度 linear开始和结束一样快 ease低速开始然后加快结束慢*/
animation-delay: 2s; /*什么时候开始*/
animation-iteration-count: infinite; /*播放次数,可以指定n次，也可以用infinite无限次*/
animation-direction: alternate; /*是否逆向播放，默认值normal*/
animation-play-state: running; /*正在运行(running)或暂停(paused)*/
animation: myf 5s linear 2s infinite alternate; /*缩写*/
13.如何理解组件化？常用组件有哪些？
1.组件是对逻辑的封装，不限于图形元素。组件具备单个可移植性重复使用。组件是声明式定义的，而非命令式。
2.按钮组件，分页组件，多列组件，九宫格组件
14.如何使用媒体查询？
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。多媒体可以检测到视窗的宽度与高度，设备宽高，分辨率和屏幕横屏与竖屏
@media规则可以根据不同设备制定不同样式
表达式根据条件是否成立返回 true 或 false
not: 用于排除掉特定的设备，比如 @media not print（非打印设备）
only: 用来定义某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备。
CSS3 多媒体类型
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器
语法：
@media not|only mediatype and (expressions) { //CSS样式 } //用在样式上 @media screen and (width:768px){ } //导入样式 @import url(xxx.css) screen and (width:768px); //链接样式 <link media="screen and (width:768px)" href="xxx.css" rel="stylesheet" />
15.描述下弹性盒子，并说出几个常用的属性？
弹性盒子是css3的一种新的布局方式弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
常用属性：
wrap-reverse：换行，第一行在下方
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间
flex-direction: row | row-reverse | column | column-reverse;row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: <flex-direction> || <flex-wrap>;
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
align-items 定义项目在交叉轴上如何对齐。
弹性子元素属性：
order: <integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
flex 属性用于指定弹性子元素如何分配空间。
16.px、em和rem的区别？
1.px实际上就是像素,与物理像素有一定的区别。用px设置字体大小,比较精确,但是有缺点,当浏览器页面缩放时,px并不能跟随变大。当前网页的布局就会被打破。
2.em是根据基准来缩放字体的大小。em是相对单位,一般都是以<body>的字体大小作基准的em是相对于父元素的属性来计算的。
3.而rem不同,rem是相对于根元素html。而此时我们只需要以rem为基准就可以了。
17.怎么理解变量？变量命名规范有哪些？
在程序设计中，变量的使用是一个十分重要的环节，定义一个变量，就是要告诉编译器这个变量属于哪一种数据类型，这样编译器才知道需要配置多少空间，以及能存放什么样的数据。变量都有一个变量名，变量名必须是合法的标识符，内存空间内的值就是变量值。
在声明变量时可以是不给予赋值，也可以是直接赋给初值。
变量其实就是一个存储空间的表示，用于存放程序中的数据。
变量是存储数据最基本的单位, 存储的数据是临时的不是永久的，程序退出后将会丢失
变量命名规范：
变量名以 _ 、$、字母开头,后续根任意多个 _ 、$ 、字母和数字作为命名
不要使用JavaScript的true,false,null,关键字和保留字
取名使用有意义单词,通常使用驼峰命名法
18.javascript中数据类型有哪些？
基本数据类型：
1 number 数字类型
2 string 字符串
3 boolern 布尔类型（true和false）
4 null 空对象
5 undefined 未定义
栈(stack):栈内存会自动分配内存空间,会自动释放,存放基本类型,简单的数据段,占据固定大小的空间。
引用数据类型：
object 对象类型
堆(heap)：动态分配的内存，大小不定也不会自动释放，存放引用类型，指那些可能由多个值构成的对象，保存在堆内存中，包含引用类型的变量，实际上保存的不是变量本身，而是指向该对象的指针。（引用类型：Function，Array，Object）
19.常用运算符有哪些？
赋值运算符：=
算术运算符：+，-，*，/，%，++，--
逻辑运算符：&& || ！
关系运算符：> < >= <= .==,===,!=
20.描述下类型转换？
JavaScript 变量可以转换为新变量或其他数据类型：
parseInt("字符串") :将字符串转换成整型数字
parseFloat("字符串")：将字符串转换成浮点型数字
Number() 转换为数字
String() 转换为字符串
Boolean() 转换为布尔值
21.if结构有哪些形式?
基本if结构
(if的条件可以为布尔值，如果布尔表达式的值为 true，则执行 if 语句中的代码块，否则不if语句里面的代码块。条件也可以使用其它任意数据类型: 0,NaN,"",null,undefined为false,其它的为true)
if—else结构
(如果if条件的值为 true，则执行 if 语句中的代码块1，否则执行 else语句块后面的代码块2。)
多重if结构
(如果条件1的值为 true，则执行代码块1，否则继续判断条件2，如果条件为true,则执行代码块2，如果条件2为false则执行else中的代码块3)
嵌套if结构
(If结构可以进行嵌套，嵌套if结构先执行外层if结构,条件成立则会执行内层if结构)
22.循环有几种？各种的语法和区别是什么？
while循环语法
(每一个循环都有循环条件和循环操作。while循环需要先判断，再执行，当循环条件为true时就会执行循环操作。)
do-while循环语法
(do-while循环是先执行，再判断，不管循环条件是否为true都会执行一次循环操作。)
for循环语法
(当循环次数固定时，我们通常选择for循环，for循环是先判断，再执行，for循环的三个表达式可以省略，但两个分号不能去掉。)
23.二重循环怎么运行？
二重循环就是指外层一个循环，在外层循环里面嵌套一个循环。外层循环一次，内层循环则执行一轮，也就是里面的循环要执行外层循环*内层循环的次数。
24.说下常用的系统函数？
typeof();//检查数据类型
prompt();//接收
parseInt ("字符串");//字符串转int
parseFloat("字符串");//字符串转float
Number("213.1");//数值转换
Math.random();//返回介于 0 和 1 之间的伪随机数。
25.自定义函数有那些形式？
1)无参函数 function 方法名(){.....}
2)有参函数 function 方法名(参数1,参数2....){.....}
3)带返回值函数 function 方法名(){return 返回值;}
4)匿名函数 (function(){}())
26.简述下变量作用域？
全局变量--在整个文件都能访问
局部变量--在局部的范围能访问
匿名变量--局部访问外部
变量作用域，变量的可用性范围。通常来说，一段程序代码中所用到的名字并不总是有效可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用，可提高程序逻辑的局部性，增强程序的可靠性，减少名字冲突。从作用域角度区分，变量可分为全局变量，局部变量和隐式全局变量
27.字符串方法有哪些？
常用的方法
28.怎么创建数组？怎么给数组赋值和循环输出数组元素？
1.创建数组
使用 var arr = new Array();或者直接用中阔号var arr1 = [];
2.数组赋值
var fruit = new Array(4); fruit[0] = " apple "; fruit[1] = " orange "; fruit[2] = " peach ";
3.输出数组
var arr = [1,2,3,4] var arr = [1,2,3] //我们可以使用for-in循环遍历数组，如下 for (var i = 0; i < arr.length; i++) { }
29.描述下二维数组？
数组里嵌套数组
JavaScript本身只支持一维数组，不支持直接定义二维数组，但是我们可以间接地实现二维数组将一维数组的每个元素又定义为一个数组，即为数组中的元素也是数组，就是二维数组。
30.数组方法有哪些？
方法:
push() 向数组末尾添加元素，返回数组的长度
pop() 移除数组最后的元素，返回数组的长度
shift( )移除数组的第一个元素，返回移除元素的值
unshift()添加元素到数组的第一个位置，返回数组的长度
reverse() 翻转数组，返回翻转的结果
sort( ) 升序
concat() 连接两个数组，返回连接后的数组
slice() 截取数组，返回截取后的数组，不会影响原始数组的数据
*splice() 数组剪接，可以对数组做很多添加、删除、更新的操作
位置查找：
从前查找indexOf()
从后查找lastIndexOf() 在数组中查找css元素所在的位置 找不到返回-1
filter()数组过滤
map() 数组映射 ，符合条件的数据重新赋值
迭代操作 forEach()( item：遍历数组的元素 index：元素的下标 array：原始数组对象)
缩小方法 reduce() 迭代所有的元素最终返回一个值 console.log(arr[i]);
31.怎么计算偶数之和？
计算偶数之和就是将除2余数为0的数取出，再用循环将其输出。
首先定义一个数组用于存储需要取出偶数的所有数，
在定义一个变量用于存储和
利用for循环取出数组中的每一个数，判断取出的数是否除2余数为0，为真将定义的变量与其相加并赋值给该变量，
为假时继续执行循环，直到将数组中的所有数取出，得到那个变量，那个变量就是偶数之和。
//100整数内偶数之和 var t = 0; for (var i = 0;i<=100;i++ ) { if (i%2==0) { t+=i； } } alert(t)
//数组内偶数之和 var sum = [1,2,3,4,5,6,7,8,9]; var num = 0; for(i = 0;i<sum.length;i++){ if(sum[i]%2==0){ num+=sum[i]; } } document.write(num);
32.怎么求平均分？
计算平均分就是将总分除个数。
首先定义一个数组用于存储所有数，
在定义一个变量用于存储和
利用for循环取出数组中的每一个数，在循环中将定义的变量与其相加并赋值给该变量，
继续执行循环，直到将数组中的所有数取出，得到那个变量，那个变量就是总分。将总分除数组的个数得到平均分。
然后加一个判断来终止循环，如果用户输入0，则退出循环，循环期间每循环一次我们用声明变量为0的变量去接收每次输入的分数，循环完后再把这个累加数字
以循环的次数，得出平均分；
//创建一个数字数组，用于计算平均值。 var arr=[1,2,3,4,5,6]; //初始化一个变量，用于保存数字的累加值。 var sum=0; //再通过length属性求得数组的长度，即数组元素个数。 for (var i = 0; i < arr.length; i++) { //通过for循环，遍历数组每一个数字，使用“+=”实现数字的累加。 sum+=arr[i]; }; //通过累加结果除以数字总的个数，得到平均值. var avg=sum/arr.length; //并使用alert()方法输出结果。 alert(avg);
33.怎么求最大值？
计算平均分就是利用“打擂台”的方式取得最大值。
首先定义一个数组用于存储所有数，
在定义一个变量用于存储最大值
首先取出数组中的第一个数赋值给该变量，
再利用for循环取出数组中的每一个数，将取出的数与变量进行对比，将大值赋值给变量，继续执行循环，直到将数组中的所有数取出，得到那个变量，那个变量就是最大值。
循环遍历一遍：
//数组最大数 //创建一个数组变量arr var arr =[5,7,9,15,3] //再创建一个变量max，用于保存数组中的最大值， //初始值为数组元素第一个值arr[0]。 var max = arr[0]; //使用for循环遍历arr数组，其中i为数组的下标 for (var i = 0;i<arr.length;i++) { //在for循环内，使用if语句判断当前遍历的数组值是否大于max值， // 如果大于该值，则把当前遍历的数组值保存在max值， if (arr[i]>max) { //遍历后的max将保存着最大的数组值。 max = arr[i]; } } //最后，使用alert()方法输出数组最大值。 alert("最大值"+max);
34.怎么做冒泡排序？
冒泡排序速记口诀(升序)
N个数字来排队，两两相比小靠前。
外层循环N-1，内层循环N-1-i
首先了解冒泡的规律，冒泡就是相邻数字做对比，依次从左到右对比，大的我们放后面，然后再进入下一轮对比，每一轮次数对比都会上一轮次数少一次，
因为对比一轮可以得出一个最大或者最小值在最右边，它可以不再与前面的数字对比，一直到对比完。此时我们就能得出一个升序或者降序的数字排列，这就叫冒泡排列
//冒泡排序数组 var arr = [1,6,4,2,9,3,7,0] //外层循环，控制趟数，每一次找到一个最大值 for (var i = 0;i < arr.length-1;i++) { //内层循环,控制比较的次数，并且判断两个数的大小 for (var j = 0;j < arr.length-1-i;j++) { //如果前面的数大，放到后面(从小到大的冒泡排序) if (arr[j]>arr[j+1]) { var t = arr[j]; arr[j] = arr[j+1]; arr[j+1] = t; } } } //最后，使用alert()方法输出数组。 alert(arr);
35.怎么去重？
声明一个数组，数组中有多个重复元素，声明变量接受此数组，此时，我们用函数方法来执行，多重循环，循环最大条件为数组的个数，如果对应的i值对应地标，则不保存，相同的则用一个变量接受起来，一直到循环结束，我们再输出，此时，已经去重。
在ES6中简便的实现
var arr1 = [1, 2, 1, 1, '1', '一']; //构建带arr1参数的函数 function uq(arr1) { //将array数组转换成set对象,再使用Array.from()方法将set对象转换成数组 return Array.from(new Set(arr1)); } //查看输出结果 alert(uq(arr1)); // [1, 2, "1", "一"]
将多个数组合去重排序，使用add()方法插入新数据使用sort()方法排序
36.描述下Date对象？
Date 对象
Date 对象用于处理日期和时间。即是时间对象，把时间作为一个对象，可以通过此对象控制我们程序的执行的时间，各种动画效果等
Date类保存的时间是从1970年1月1日0时0分0秒到现在的毫秒数，这个毫秒数是长整型的。
创建 Date 对象的语法：
var myDate=new Date()
1）语法
var 日期对象=new Date(参数)
2）示例
var today=new Date(); //返回当前日期和时间
var tdate=new Date("2016-8-1");
3）常用方法
setXxx 这些方法用于设置时间和日期值
getXxx 这些方法用于获取时间和日期值
4）日期的数值
Seconds 0 至 59
Minutes 0 至 59
Hours 0 至 23
Day 0 至 6（星期几），0表示星期日
Date 1 至 31（月份中的天数）
Months 0 至 11（一月至十二月） ，0表示1月
37.定时器函数有哪些？怎么清除定时器？
set Timeout()//第一个参数一般是调用函数名称，逗号隔开，第二个则是设置多少毫秒后执行，1000毫秒等于一秒，此函数只会执行一次
set lnterval()//此函数里面的第一个参数一样是调用函数，第二个参数则表示每间隔多少时间执行一次前面的参数
清楚定时器则是根据对应的属性名，前面加一个clear，参数里面对应定时器函数，就可以清除定时器的操作
1.setInterval ，按照指定间隔后把回调函数加入队列，js会逐个执行,并且会一直执行。
例如： var timer = setInterval( ()=> {alert("hi");},1000)
2.setTimeout，在指定的毫秒数后调用函数或计算表达式。
例如： var timer = setTimeout( ()=> {alert("hi");},1000)
3.requestAnimationFrame,与setTimeout相比requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机，它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，常用于动画场景
定时器函数
1）setTimeout()用法
setTimeout（“调用的函数”, “指定的时间后"）
2）setInterval()方法
setInterval（"调用的函数", "指定的时间间隔"）
3）示例
//1秒后行一次disptime()函数，就不在执行了
var myTime＝setTimeout("disptime( ) ", 1000 );
//每隔1秒执行disptime()
var myTime＝setInterval("disptime( ) ", 1000 );
4）提示
setTimeout()只执行disptime()一次，如果要多次调用使用setInterval()者者让disptime()自身再次调用setTimeout()
清除定时器函数
var si = setInterval("showTime()",1000); var st = setTimeout("showTime()",3000); clearInterval(si); //清除指定setInterval()设定的定时执行操作 clearTimeout(st); //清除setTimeout()定时器
38.怎么获取窗体宽高和位置
窗口的常用属性-
window.innerHeight; //返回窗口的文档显示区的高度
window.innerWidth; //返回窗口的文档显示区的宽度
window.screenLeft; //获取窗口x坐标
window.screenTop //获取窗口y坐标
window.screen.width; //获取屏幕宽度
window.screen.height;//获取屏幕高度
window.screen.availWidth; //获取可用宽度
window.screen.availHeight; //获取可用高度
窗口大小和位置
var win = window.open("test.html","","width=300px,height=300px,left=100,top=100");
win.resizeTo(screen.width,screen.height);
win.moveTo(100,200);
39.break，continue，return有什么区别？
一、作用不同
1、break：执行break操作，跳出所在的当前整个循环，到外层代码继续执行。
2、continue：执行continue操作，跳出本次循环，从下一个迭代继续运行循环，内层循环执行完毕，外层代码继续运行。
3、return：执行return操作，直接返回函数，所有该函数体内的代码（包括循环体）都不会再执行。
二、结束不同
1、break：break不仅可以结束其所在的循环，还可结束其外层循环，但一次只能结束一种循环。
2、continue：continue结束的是本次循环，将接着开始下一次循环。
3、return：return同时结束其所在的循环和其外层循环。
三、紧跟不同
1、break：需要在break后紧跟一个标签，这个标签用于标识哪个外层循环。
2、continue：在continue后不需要加参数。
3、return：在return后需要紧跟一个返回值，用于提供给对应方法所需的返回值。
40.js怎么获取对象？
document.getElementById() //返回指定id的第一个对象的引用
document.getElementsByName() //返回指定名称的对象的集合
document.getElementsByTagName() //返回指定标签名的对象的集合
document.getElementsByClassName() //返回指定class类名的对象的集合
document.querySelectorAll() //根据选择器获取对象的集合
41.有哪些节点层次关系的属性?
层次关系属性
1）obj.parentNode 父节点
2）obj.firstChild 子节点
3）obj.lastChild 最后节点
4）obj.children 所有的子元素(只包含标签)，返回类型HTMLCollection
5）obj.childNodes 所有的子节点,返回类型NodeList集合
6 ) obj.nextSibling 后一位兄弟节点
7 ) obj.previousSibling 前一位兄弟节点
42.js的DOM操作有哪些?
核心(Core-DOM) DOM操作节点
获取节点
getElementById( )
getElementsByName()
getElementsByTagName()
获取<html>节点对象
document.documentElement
document.documentElement.tagName
获取<head>节点对象
document.head
document.head.tagName
获取<body>节点对象
document.body //注意js加载顺序，可以放置在body之间,或者使用onload()
document.body.tagName
获取属性
obj.getAttribute("属性名")
obj.setAttribute("属性名","属性值")
创建和增加节点的方法
document.createElement（标签的名称） //创建节点
obj.appendChild（节点对象） //末尾追加方式插入节点
父元素对象.insertBefore（新元素，指定的子元素对象） //在指定节点前插入新节点
obj.cloneNode（false） //克隆节点，cloneNode(true)深度拷贝既毫无保留的拷贝。
删除和替换节点
obj.removeChild（子节点对象） //删除节点
obj.replaceChild( 新对象) //替换节点
43.HTML DOM 操作表格有哪些属性和方法？
HTML DOM 操作表格
1）table--对象常用属性和方法
rows[] //返回包含表格中所有行的一个数组
insertRow() //在表格中插入一个新行
deleteRow() //从表格中删除一行
2）tr--tableRow表格行对象
a）属性
cells[] //返回包含行中所有单元格的一个数组
rowIndex //返回该行在表中的位置
b）方法
insertCell()//在一行中的指定位置插入一个空的<td>标签
deleteCell()//删除行中指定的单元格
3）td--tableCell单元格行对象
常用属性
cellIndex //返回单元格在某行单元格集合中的位置
innerHTML //设置或返回单元格的开始标签和结束标签之间的HTML
align //设置或返回单元格内部数据的水平排列方式
className //设置或返回元素的class属性
44.如何获取元素的位置和宽高？
clientHeight //元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距
clientWidth //元素内部的宽度，包含内边距，但不包括垂直滚动条、边框和外边距
clientLeft //一个元素的左边框的宽度 , 不包括顶部外边距或内边距
clientTop //一个元素顶部边框的宽度
offsetWidth //元素的宽度,包括padding、border、水平滚动条，但不包括margin
offsetHeight //元素的高度,包括padding、border、水平滚动条，但不包括margin
offsetTop //当前元素顶部距离上方或上层元素的距离
offsetLeft //当前元素顶部距离左边方或上层元素的距离
offsetParent
45.正则表达式常用符号，重复方式和方法？
1）常用符号
/…/ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符，等价于[0-9]
\D 除了数字之外的任何字符，等价于[^0-9]
\w 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W 任何非单字字符，等价于[^a-zA-z0-9_]
. 除了换行符之外的任意字符
2）重复字符
{n} 匹配前一项n次
{n,} 匹配前一项n次，或者多次
{n,m} 匹配前一项至少n次，但是不能超过m次
* 匹配前一项0次或多次，等价于{0,}
+ 匹配前一项1次或多次，等价于{1,}
？ 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}
1）RegExp对象的方法
exec 检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test 检索字符串中指定的值，返回true或false
3）String对象的方法
match 找到一个或多个正则表达式的匹配
search 检索与正则表达式相匹配的值
replace 替换与正则表达式匹配的字符串
split 把字符串分割为字符串数组
46.json怎么写？字符串怎么转换成json?
JSON语法
1.简单格式
a）语法
var json={"key":"value","key":value,……};
b）示例
var student={"name":"jack","age":20,"mobile":"13129784213"}
c）key可以不用双引号("")
var student={name:"jack",age:20,mobile:"13129784213"}
d) value值可以使用:
1.字符串用"" 2.数字 3.true/false 4.数组用[]
5.对象{} 6.null 7.函数(function)
2.数组格式
a)语法
var array=[{key:value,……},{key:value,……}]; //对象数组
b)示例
var students=[ {"name":"jack","age":20,"mobile":"13129784213"}, {"name":"rose","age":22,"mobile":"13529784213"} ]
c)定义组名
var array={ "组名1":[{key:value,……},{key:value,……}], "组名2":[{key:value,……},{key:value,……}] };
例如：
var person={ "学生":[{"name":"jack","age":20,"mobile":"13129784213"}, {“name”:“rose”,“age”:22,“mobile”:“13529784213”}], "老师":[{name:"conor",age:23},{name:"banner",age:33}] };
JSON使用
1.读取数据
var student={"name":"jack","age":20,"mobile":"13129784213"} var person={ "学生":[ {"name":"jack","age":20,"mobile":"13129784213"}, {"name":"rose","age":22,"mobile":"13529784213"} ], "老师":[{name:"conor",age:23},{name:"banner",age:33}] };
遍历所有
a）获取第一个学生的姓名
person.学生[0].name;
b）获取第一个老师的姓名
person.老师[0].name
2.字符串转JSON对象
1）JSON.parse("json格式的字符串")
var jsonStr='{"name":"jack","age":20}';
var json=JSON.parse(jsonStr);
//注意：key必须使用双引号
var jsonStr='{name:"jack",age:20}'; // 转换失败
var jsonStr="{'name':'jack','age':20}"; // 转换失败
var jsonStr='{"name":"jack","age":20}'; // 转换成功
2）eval("js代码")，执行字符串中的JavaScript代码。
语法： eval("("+json字符串+")");
示例：
var jsonStr='{"name":"jack","age":20}';
var json=eval("("+jsonStr+")");
alert(json.name);
47.ajax创建步骤?
Ajax的使用步骤
1）创建XMLHttpRequest对象，ajax的核心对象
2）open("POST","URL",true) 建立请求(参数1请求的方式 get或post 参数2：请求的地址 参数3：true：异步请求 false：同步请求 )
3）send(data) 发送
参数data：需要传递的数据
格式为 key1=value&key2=value
4）onreadystatechange事件
请求状态改变事件，这是结果处理最重要的
5）readyState 请求状态 0(初始)1（建立）2（发送）3（请求）4（完成）
6) status >Ajax状态码：
无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码1XX—5XX
7）responseText属性
返回的纯文本
8）responseXML属性
返回xml格式
48.js怎么做轮播图？
首先来定义一个全局数组用来存放所有的图片的位置，还有一个全局变量num用来记载这次应该轮到第几个图片位置出现在该区域
var num = 0; var arrUrl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
接下来写切换函数，切换函数的主要功能就是将img的src属性改到当前需要的位置。
function changeImg(){ img.src = arrUrl[num];//修改图片的src位置 //如果图片下方有需要显示的圆点就在这里修改，或者其他对应的信息也在这里修改 for(var i = 0;i<arrUrl.length;i++){ li[i].className = ""; } li[num] = "active"; }
首先是轮播切换，就是一个定时器，定时的调用这个切换函数，并且这里需要注意num的值，因为num切换到最后一张，下一张就应该是第一张。
接下来是点击左右切换按钮，左切换按钮要留意切换到第一张的时候，需要将下一张定义为最后一张，右切换按钮需要留意最后一张，下一张是第一张。
最后是小圆点点击跳转到对应的图片。
按照上面的思路，首先来写轮播切换，轮播切换无非就是一个定时器，定时的切换这个图片，所以我们来写一个定时切换的函数
定义一个全局变量定时器（当需要停止定时切换的时候就清除，需要继续的时候就继续调用）
var timer = null;//定义一个空对象来存放定时器 function autoPlay(){ timer = setInterval(function(){ num++;//切换下一张的num num %=arrUrl.length;//这里是关键，循环播放图片的关键 },2000);//定时器 }
定时器的方法实现了只要在全局函数中调用就可以了
setTimeout(autoPlay,1000);//延时播放，这样就不用一刷新页面立马切换图片。
接下来就是左右切换图片的实现了。左边切换的时候num--，但是要注意num=0的时候，下一场num=arr.Url.length，右切换则相反
for(i = 0;i<arrUrl.length;i++){ li[i].index = i; li[i].onclick = function(){ num = this.index; changeImg(); } }
再添加一个鼠标移入清除定时器，鼠标移出继续调用就可以了
content.onmouseover = function(){ clearInterval(timer); } contentonmouseout= aotoPlay;
49.jq对象和DOM对象怎么相互转换?
1. Dom对象转换jquery对象
var txtName = document.getElementById("txtName"); //DOM对象
var $txtName = $(txtName); //jquery对象
由于txtName已经是一个DOM对象， 只需用$() 把它包装起来， 就构成了一个jquery对象
注： jquery对象一般以$开头， 在事件中常用$(this), this是触发该事件的对象
2. jquery对象转换为DOM对象
有两种转换方式将一个jQuery对象转换成DOM对象：[index] 和.get(index);
(1) jQuery对象是一个数据对象， 可以通过[index] 的方法， 来得到相应的DOM对象。
var $txtName = $("#txtName"); //jquery对象
var txtName = $txtName[0]; //使用[index]方法获取DOM对象
(2) jQuery本身提供， 通过.get(index) 方法， 得到相应的DOM对象。
var $txtName = $("#txtName"); //jquery对象
var txtName = $txtName.get(0); //使用get(index)方法获取DOM对象
50.描述下常用的jq选择器和事件？
1) CSS选择器
基本选择器
层次选择器
属性选择器
2) 滤选择器
基本过滤选择器
可见性过滤选择器
表单过滤选择器
内容过滤选择器
子元素过滤选择器
jQuery文档就绪事件
1. ready() 事件在页面的DOM文档对象模型已经加载且页面已经完全呈现时才会发生将jQuery代码写入ready() 中可以防止页面文档还未加载完成就执行jQuery函数而引起的异常
2. 三种写法：
$(document).ready(function() { ...});
$().ready(function() { ...});
$(function() { ...});
51.jq动画有哪些？怎么停止动画？
隐藏显示
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
使用 toggle() 方法来切换 hide() 和 show() 方法。
淡入淡出
fadeIn() 用于淡入已隐藏的元素。
fadeOut() 方法用于淡出可见元素。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
滑动
slideDown() 方法用于向下滑动元素。
slideUp() 方法用于向上滑动元素。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
自定义动画
animate() 方法用于创建自定义动画
停止动画
stop() 方法用于停止动画或效果，在它们完成之前。
52.jq的ajax方法有哪些？
load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据， 并把返回的数据放入被选元素中。
get() 和 post() 方法
get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
ajax() 方法
53.bootstrap有哪些常用组件？
常用的bootstrap组件：
1.轮播图
2.下拉菜单
3.响应式导航栏
54.描述下bootstrap的栅格系统？
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
Bootstrap栅格把设备分为了四种：
它们的列有不同class前缀做标识。
超小设备用.col-xs
小型设备用.col-sm
中型设备用.col-md
大型设备用.col-lg-
它们的间隙都是30px（指列的padding-left;15px和padding-right:15px;）
55.描述下bootstrap的插件怎么使用？
所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。然后引用bootstrap。
56.有哪些方式优化前端性能？
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
代码层面的优化
用hash-table来优化查找
少用全局变量
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
用setTimeout来避免页面失去响应
缓存DOM节点查找的结果
避免使用CSS Expression
避免全局查询
避免使用with(with会创建自己的作用域，会增加作用域链长度)
多个变量声明合并
避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
尽量避免写在HTML标签中写Style属性
移动端性能优化
尽量使用css3动画，开启硬件加速。
适当使用touch事件代替click事件。
避免使用css3渐变阴影效果
可以用transform: translateZ(0)来开启硬件加速。
不滥用Float。Float在渲染时计算量比较大，尽量减少使用
不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
合理使用requestAnimationFrame动画代替setTimeout
CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
PC端的在移动端同样适用