前端经典面试题讲课稿.docx
- 文档编号：11268851
- 上传时间：2023-05-30
- 格式：DOCX
- 页数：24
- 大小：29.58KB
前端经典面试题讲课稿.docx
《前端经典面试题讲课稿.docx》由会员分享，可在线阅读，更多相关《前端经典面试题讲课稿.docx（24页珍藏版）》请在冰点文库上搜索。
前端经典面试题讲课稿
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”）;
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*200的div实现屏幕水平居中 前面已经有一种方法了 第二种方法： 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
《大侦探小卡莱》读后感.docx
