书签分享收藏举报版权申诉 / 24

立即下载加入VIP,免费下载

当前位置：首页 > 高等教育 > 文学 > 前端经典面试题.docx

前端经典面试题.docx

文档编号：9848493
上传时间：2023-02-07
格式：DOCX
页数：24
大小：29.45KB

前端经典面试题.docx

《前端经典面试题.docx》由会员分享，可在线阅读，更多相关《前端经典面试题.docx（24页珍藏版）》请在冰豆网上搜索。

前端经典面试题.docx

前端经典面试题

1，html和xml有什么区别

html是超文本标记语言xml是可扩展标记语言

html语法宽松，xml语法严谨

html使用固有标记，xml没有固有标记

html标签预定义，xml标签可扩展，可定义

html是用来显示数据，xml是用来描述和存储数据

2，css有哪几种选取器？

权重优先级？

第一种为属性选取器

第二种为id选取器

第三种为class选取器

第四种为伪类选取器

第五种是后裔选取器

第六种是标签选取器

第七种是通用选取器

第八种是伪元素选取器

1. 第一等：

代表内联样式，如：

style=””，权值为1000。

2. 第二等：

代表ID选取器，如：

#content，权值为0100。

3. 第三等：

代表类，伪类和属性选取器，如.content，权值为0010。

4. 第四等：

代表类型选取器和伪元素选取器，如divp，权值为0001。

5. 通配符、子选取器、相邻选取器等。

如*、>、+,权值为0000。

6. 继承样式没有权值。

3，网页有哪几某些构成？

构造层：

html

表达层：

css

行为层：

js和dom

4，一种200*200div在不同辨别率屏幕上下左右居中，用css实现

Div{

position：

absolute;

width：

200px;

height：

200px;

top：

50%;

left：

50%;

margin-top：

-100px;

margin-left：

-100px;

}

5，阐述清晰浮动几种方式

第一种父级div定义高度height适合高度固定布局

第二种父级div定义overflow：

hidden

第三种结尾处加空标签clear：

both让父级自动获取高度

第四种父级div定义伪类:

after和zoom

6，解释csssprites，如何使用？

CSSSprites其实就是把网页中某些背景图片整合到一张图片文献中，再运用CSS“background-image”，“background-repeat”，“background-position”组合进行背景定位，background-position可以用数字能精准定位出背景图片位置。

CSSSprites为某些大型网站节约了带宽，让提高了顾客加载速度和顾客体验，不需要加载更多图片

7，如何用原生js给一种按钮绑定两个onclick事件？

Varbtn1=document.getElementsById（“btn”）;

btn1.addEnventListener（“click”,”hello1）;

btn1.addEnventListener（“click”,”hello2）;

functionhello1（）{

alert（“hello1”）;

}

functionhello2（）{

alert（“hello2”）;

}

8，拖曳会用到哪些事件？

Dragstart

Dragenter

Dragover

Dragleave

Drag

Drop

Dragend

9，请列举jQuery中选取器？

1，基本选取器

ID，class，元素之类

2，层级选取器

返回是jQuery对象才可以进行链式操作

如后裔元素，子元素，兄弟元素，相邻元素

3，过滤选取器

基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选取器

10，JavaScript中有哪些定期器，她们区别和用法是什么？

SetTimeout只会执行一次

SetInterval会始终重复执行

方式都为：

settimeout（函数，时间）

11，请描述一下cookiessessionstorage和localstorage区别

相似点：

都储存在客户端上

不同点：

1储存大小

Cookies数据大小不能超过4k

Sessionstorage和Localstorage比cookies大，可以达到5m或更多

2有效时间

Localstorage储存持久数据，浏览器关闭后也不会丢失，除非积极删除数据

Sessionstorage数据在关闭游览器之后自动删除

Cookies设立cookies过期时间之前始终有效，虽然窗口和游览器关闭。

3数据与服务器之间交互方式

Cookies数据会自动传递到服务器，服务器端也可以写cookies到客户端

Sessionstorage和localstorage不会上传到服务器，仅在本地保存

12，计算一种数组arr所有元素和

//可以通过document.getelmentbyid（）.value;来获取输入框中值

functionsum2（）{

vararr1=[1,2,3,4,5,6,7,8,9];

varsum1=0;

for（vari=0;i<=arr1.length;i++）{

if（typeofarr1[i]=="number"）{

sum1+=arr1[i];

}

document.write（sum1）;

}

13，编写一种办法去掉数组里重复内容vararr=[1,2,3,4,5,1,2,3]

functionarr1（）{

vararr2=[1,2,3,4,5,1,2,3];

vars=[];

for（i=0;i

if（s.indexOf（arr2[i]）==-1）{

s.push（arr2[i]）;

}

console.log（s）;

}

14，document.write和innerHTML区别是什么？

Document.write是直接写入到页面内容流，如果之前没有调用document.Open。

那么浏览器会自动调用open，页面被重写

innerHTML将内容写入某个DOM节点，不会导致页面所有重绘。

精准。

15，ajax环节

Ajax异步JavaScript和xml可以局部刷新网页数据而不是重新加载整个网页

第一步，创立xmlhttprequest对象，varxmlhttp=newXmlHTTPrequest（）；

Xmlhttprequest对象用来和服务器互换数据

Varxhttp；

If（windows.XMLHttpRequest）{

//当前主流浏览器

Xhttp=newXMLHttpRequst（）;

}else{

Xhttp=newActiveXObject（“Mirosoft.XMLHTTP”）;

}

第二步，xmlHTTPrequest对象open（）和send（）办法发送资源祈求到服务器，

第三步，使用xmlhttprequest对象responseText或responseXML属性获得服务器响应

第四部，onreadystatechange函数，当发送祈求到服务器，咱们想要服务器响应执行某些功能就需要使用使用onreadystatechange函数，每次xmlhttprequest对象readystate发生变化都会触发onreadystatechange函数。

16，xml和json区别，请用四点来形容

Json相对于xml来讲，数据体积小，传播速度快

Json与JavaScript更好交互，更好数据交互

Xml对数据描述性比较好

Json解析速度要远远快于XML

17，box-sizing惯用属性有哪些？

有哪些作用？

属性值

· box-sizing：

content-box

· box-sizing：

border-box

· box-sizing：

inherit

content-box

· 这是box-sizing默认属性值

· 是CSS2.1中规定宽度高度显示行为

· 在CSS中定义宽度和高度就相应到元素内容框

· 在CSS中定义宽度和高度之外绘制元素内边距和边框

border-box

· 在CSS中微元素设定宽度和高度就决定了元素边框盒

· 即为元素在设立内边距和边框是在已经设定好宽度和高度之内进行绘制

· CSS中设定宽度和高度减去边框和内间距才干得到元素内容所占实际宽度和高度

（Q1）box-sizing：

content-box|border-box|inherit;

（Q2）content-box:

宽度和高度分别应用到元素内容框。

在宽度和高度之外绘制元素内边距和边框（元素默认效果）。

border-box:

元素指定任何内边距和边框都将在已设定宽度和高度内进行绘制。

通过从已设定宽度和高度分别减去边框和内边距才干得到内容宽度和高度。

18，使一种300*200div实现屏幕水平居中

前面已有一种办法了

第二种办法：

div{

left：

0px;

right：

0px;

top：

0px;

bottom：

0px;

margin：

auto;

position：

absolute;

height：

200px;

width：

300px;

}

第三种办法是运用jQuery

$（window）.resize（function（）{

$（".myblock"）.css（{

position：

"absolute",

left：

（$（window）.width（）-$（".myblock"）.outerWidth（））/2,

top：

（$（window）.height（）-$（".myblock"）.outerHeight（））/2 }）；

}）;

此外在页面载入时，就需要调用resize（）办法

$（function（）{

$（window）.resize（）;

}）;

19，三个盒子，左右定宽，中间自适应办法有几种？

第一种办法：

左右采用浮动中间采用margin-left和margin-right办法

代码：

100%;margin：

0auto;">

200px;float：

right;background-color：

#000000;">11

200px；float：

left;background-color：

red;">33

200px;margin-right：

200px;background-color：

green;">22

第二种办法：

左右采用绝对定位，中间采用margin-left和margin-right

代码：

100%;margin：

0auto;">

200px;position：

absolute;left：

0px;background-color：

#000000;">11

200px；position：

absolute;right：

0px;background-color：

red;">33

200px;margin-right：

200px;background-color：

green;">22

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

经营许可证编号:鄂ICP备2022015515号-1

前端经典面试题.docx

热门标签