前端面试常见的题有哪些?WEB明教告诉你!

122 阅读4分钟

1,阐述清楚浮动的几种方式(常见问题)

(1)父级div定义 height

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

(2)父级div定义 overflow:hidden

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器自动检查浮动区域的高度优点:简单、代码少、浏览器支持好

(3) 结尾处加空div标签 clear:both

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好

2,解释css sprites ,如何使用?

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,
再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要加载更多的图片

3,如何用原生js给一个按钮绑定两个onclick事件?

//事件监听 绑定多个事件var btn = document.getElementById("btn");btn.addEventListener("click",hello1);btn.addEventListener("click",hello2);function hello1(){alert("hello 1");}function hello2(){alert("hello 2");}


4,拖拽会用到哪些事件

·dragstart
拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

dragenter

拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮

dragover

拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.

dragleave

拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.

drag

拖拽期间在被拖拽元素上连续触发

drop

鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.

dragend

鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

5,请列举jquery中的选择器:

#id,.class,element,:first,:even,:eq(index),:contains(text)

链接:jQuery选择器

6,Javascript中的定时器有哪些?他们的区别及用法是什么?


7,请描述一下 cookies sessionStorage和localstorage区别

(1)相同点:

          都存储在客户端

        不同点:

         存储大小

· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

(2)有效时间

· localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

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

· cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

8,编写一个方法去掉数组里面重复的内容?

var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];//定义一个新的数组var s = [];//遍历数组for(var i = 0;i<arr.length;i++){if(s.indexOf(arr) == -1){ //判断在s数组中是否存在,不存在则push到s数组中s.push(arr);}}console.log(s);//输出结果:["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]

关于前端面试常见的问题,本篇文就介绍到这里了。我这里还有更多前端学习的知识,有想要了解前端、学习前端的小伙伴可以加我QQ:822311796 更有相关机构的vip视频免费送哟 


更多前端进阶知识,尽在WEB明教光明顶(web.xingruanedu.com)​​​​