前端经典面试题.docx
- 文档编号：24998210
- 上传时间：2023-06-03
- 格式：DOCX
- 页数：57
- 大小：40.26KB
前端经典面试题.docx
《前端经典面试题.docx》由会员分享，可在线阅读，更多相关《前端经典面试题.docx（57页珍藏版）》请在冰豆网上搜索。
前端经典面试题
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*200的div在不同分辨率屏幕上下左右居中，
用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”）;
（“click”,”hello1）;
（“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所有元素的和
alue;来获得输入框中的值
functionsum2（）{
vararr1=[1,2,3,4,5,6,7,8,9];
varsum1=0;
for（vari=0;i<=;i++）{
if（typeofarr1[i]=="number"）{
sum1+=arr1[i];
}
}
（sum1）;
}
13，编写一个方法去掉数组里的重复内容var
arr=[1,2,3,4,5,1,2,3]
functionarr1（）{
vararr2=[1,2,3,4,5,1,2,3];
vars=[];
for（i=0;i<;i++）{
if（arr2[i]）==-1）{
（arr2[i]）;
}
}
（s）;
}
14，和innerHTML的差别是什么
是直接写入到页面的内容流，假如以前没有调用。
那么阅读器会自动调用open，页面被重
写
innerHTML将内容写入某个DOM节点，不会致使页面所有重绘。
精确。
15，ajax的步骤
Ajax
异步
JavaScript
和
xml
能够局部刷新网页数据而不是从头加载整个网页
第一步，创立
xmlhttprequest
对象，
varxmlhttp=newXmlHTTPrequest
（）；
Xmlhttprequest对象用来和服务器互换数据
Varxhttp；
If{
esize（function（）{
$（".myblock"）.css（{
position:
"absolute",
left:
（$（window）.width（）-$（".myblock"）.outerWidth（））/2,
top:
$（".myblock"）.outerHeight（））/2
（$（window）.height（）
}）;
-
}）;
别的在页面载入时，就需要调用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
《初级会计实务》试题题库大全及答案详解.docx
