关于前端面试遇到的一些问题的记录

针对这几天的前端面试,学到了不少东西,对还有印象的做个记录:

1.子元素全部浮动,父元素如何撑开?

  解答:1、给父元素加一个overflow:hidden;2、将父元素也一起浮动(这个比较复杂,会影响到父元素的同级元素);3、在父元素的最后一个子元素(也就是你的ul标签)后边再增加多一个非浮动的子元素,然后将这个子元素加个clear(例:<div style="clear:both"></div>);4、使用伪元素清除浮动:   

.clearfix:after {
 content: "";    /*设置内容为空*/
 height: 0;    /*高度为0*/
 line-height: 0;    /*行高为0*/
 display: block;    /*将文本转为块级元素*/
 visibility: hidden;    /*将元素隐藏*/
 clear: both;    /*清除浮动*/
}
.clearfix {
  zoom: 1;    /*为了兼容IE*/
}

或者

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

2.box-sizing的属性?

  解答:

    1、content-box(宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。);

    2、border-box(为元素设定的宽度和高度决定了元素的边框盒。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。);

    3、inherit(规定应从父元素继承 box-sizing 属性的值。)

3.运行下面代码得到的值?

var name="aaa"; 

  function echo(){

    alert(name);

    var name="bbb";

    alert(name);

    alert(age);

  }

  echo();

  解答:在我实际运行出来后,alert出来的结果依次是:undefined,bbb,第三个没有alert(因为会报not defined错误)

  ps:echo()函数中的name前面不定义var时,第二个alert的name值为aaa

4.jQuery操作DOM节点的方法?

  解答:详见另一篇博客http://www.cnblogs.com/minozMin/p/8376614.html

5.js递归函数 ##########

6.ajax设置同步加载:

  解答:async:false

7.es6和es5的区别:

  解答:##########

8.表格奇偶数行显示不同颜色:

  解答:css中,用nth即可;

  (2)jquery中,用odd和even:

<style type="text/css">
    .odd {
         background-color:yellow;
    }
    .even {
         background-color:red;
    }
</style>
<script>
    $(document).ready(function() {
         $('tr:odd').addClass('odd');
         $('tr:even').addClass('even');
    });
</script>

9.实现滚动:

overflow:auto

10.如何通过选择器获取ul li的前三个元素: 

1 $(function(){
2   $('ul').each(function(){
3       $('li:lt(3) em',this).addClass('emClass'); 
4   });
5 });

11.如何获取name="username"的input:

  $("[name='username']")(如果是取所有data-*="online"的元素,则用($("[data='online']")))

12.总结JQeury的属性选择器:

  解答:
选择器实例选取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
     
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
     
:header $(":header") 所有标题元素 <h1> - <h6>
:animated   所有动画元素
     
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子(元素)节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
     
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
     
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
     
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
     
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素

13、Flex布局?

  解答:是"Flexible Box"的缩写,译为弹性布局,为盒模型提供最大的灵活性。
    使用方法:display: flex/inline-flex;(webkit内核浏览器需加-webkit前缀。)
    容器的属性:
      1、justify-content: flex-start(左对齐) | flex-end(右对齐) | center(居中) | space-between(两端对齐,项目之间的间隔相等) | space-around(每个项目两侧的间隔相等,所以项目之间的间隔比项目与边框的间隔大一倍)
      2、align-items: flex-start(交叉轴的起点对齐) | flex-end(交叉轴的终点对齐) | center(交叉轴的中点对齐) | baseline(项目第一行文字的基线对齐) | stretch(默认值,不设置或位auto时,占满整个容器的高度)
##########

14、标准模型和怪异模型(IE)的区别:

  解答:标准模型:一个块的总宽度=width+border+padding+margin
     怪异模型:一个快的总宽度=width+margin(即width已经包含了padding和border的值)
    CSS3的box-sizing:
    content-box(标准模型)/ border-box(怪异模型)

15、如何居中一个div: 

  解答:margin负边距:position: absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;(margin负边距为宽高的50%;IE7 及之前不支持)
     flex布局:display:flex;justify-content:center;align-items:center;
     Margin auto实现:margin: auto; position: absolute;top: 0; right: 0; bottom: 0; left: 0;
     transform变形:position:absolute;left:50%; /* 定位父级的50% */top:50%;transform: translate(-50%,-50%); /*自己的50% */

16、css选择符:

  解答:通用选择符(*)、类型选择符(p、div、span、h1)、属性选择符(E1[attr]、E1[attr='value'])、包含选择符(E1 E2)、子对象选择符(E1>E2)、类选择符(.class)、选择符混合使用(E1.E2.E3 eg:p.bigFont、p#colorFont)、ID选择符(#ID)

17、HTML5和CSS3的一些新特性:

  解答:HTML5的新特性:
      ·用于绘制图表的canvas元素
      ·用于媒介回放的video和radio元素
      ·对离线本地存储更好的支持
      ·新的特殊元素内容:header、nav、section、content、footer、article
      ·新的表单控件:calendar、time、date、email、url
    CSS3的新特性:
      ·对div加特效:圆角(border-radius)、阴影(box-shadow)
      ·对文字加特效:阴影(text-shadow)、线性渐变(gradient)、旋转(transform)
      ·transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
      ·引入伪元素: ::selection
      ·引入媒体查询、多栏布局
      ·多背景rgba,增加了更多的选择器
      ·border-image

18、对象的操作:

  解答:合并:extend、assign、遍历赋值法
     比较两个值是否严格相等:object.is(A,B)    
  • Object.keys():返回对象自身的所有可枚举的属性的键名

19、表单提交中有图片和文件时,需添加什么属性?

  解答:

<form enctype="multiple/form-data">
</form>

20、JS事件流模型:

  解答:冒泡型事件流:事件的传播是从最特定事件目标到最不特定的事件目标。即从DOM树的叶子到根。(推荐)

     捕获型事件流:事件的传播是从最不特定事件目标到最特定的事件目标。即从DOM树的根到叶子。

21、css的优化规则:

  解答:详见另一篇博客http://www.cnblogs.com/minozMin/p/8093551.html

22、字符串的操作:

  解答:详见另一篇博客http://www.cnblogs.com/minozMin/p/8328028.html

23、判断是否为数组类型:

var a="string"; console.log(a); //string
var a=1; console.log(a); //number
var a=false; console.log(a); //boolean
var a; console.log(typeof a); //undfined
 
var a = null; console.log(typeof a); //object
var a = document; console.log(typeof a); //object
var a = []; console.log(a); //object
 
var a = function(){}; console.log(typeof a) //function 除了可以判断数据类型还可以判断function类型

24、运行代码,输出值:

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value); 

结果为:2

25、闭包:

26、面向对象经典的例子:

27、作用域:

  解答:参见另一篇博客 http://www.cnblogs.com/minozMin/p/8022869.html

28、jQuery中的$符号:

  解答:$就是jQuery的别称,是jQuery库提供的一个函数。

    (1)可以通过$ () 里的参数进行查找和选择html文档中的元素

$('#tmp');//这是查找dom的id等于tmp的元素

    (2)访问$中定义的函数

$.ajax(options)

29、cookie、sessionStorage、localStorage的区别:

  解答:

(1)Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

(2)localStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代,就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用 Flash。而如今,localStorage 被大多数浏览器所支持,如果你的网站需要支持 IE6+,那以 userData 作为你的 polyfill 的方案是种不错的选择。

特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4
(3)sessionStorage 与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。
特性CookielocalStoragesessionStorage
数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下有效,关闭页面或浏览器后被清除
存放数据大小 4K左右 一般为5MB 一般为5MB
与服务器端通信 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信 仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性 需要程序员自己封装,源生的Cookie接口不友好 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

 30、浏览器的加载顺序:

  解答:参考两篇不错的博客http://www.cnblogs.com/yuezk/archive/2013/01/11/2855698.htmlhttp://www.cnblogs.com/yuezk/archive/2013/01/11/2856540.html

 31、如何定位在jQuery中出现的问题:

32、HTTP和HTTPS的区别:

  解答:

    (1)http是HTTP协议运行在TCP之上。所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份。

    (2)https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上。所有传输的内容都经过加密,加密采用对称加密,但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份,如果配置了客户端验证,服务器方也可以验证客户端的身份。

33、HTML5上传图片的标签:

  解答:<img alt="" src="" />

34、如何用jQeury取到以下元素的第三个div:

<div>
    <div>
        <div>
        </div>
    </div>
</div>

35、link一个css文件和import一个CSS文件的区别:

  解答:

    (1)适用范围不同    @import可以在网页页面中使用,也可以在css文件中使用,用来将多个css文件引入到一个css文件中;而link只能将css文件引入到网页页面中。   

    (2)功能范围不同    link属于XHTML标签,而@import是CSS提供的一种方式,link标签除了可以加载CSS外,还可以定义RSS,定义rel连接属性等,@import就只能加载CSS。

       (3)加载顺序不同    当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。

       (4) 兼容性    由于@import是css2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

         (5)控制样式时的差别    使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式

36、get和post请求:  

  (1)GET请求,请求的数据会附加在URL之后,以?分割URL和传输数据,多个参数用&连接。URL的编码格式采用的是ASCII编码,而不是uniclde,即是说所有的非ASCII字符都要编码之后再传输。

    POST请求:POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。

因此,GET请求的数据会暴露在地址栏中,而POST请求则不会。

  (2)传输数据的大小

      在HTTP规范中,没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中,对于GET,特定的浏览器和服务器对URL的长度有限制。因此,在使用GET请求时,传输数据会受到URL长度的限制。

对于POST,由于不是URL传值,理论上是不会受限制的,但是实际上各个服务器会规定对POST提交数据大小进行限制,Apache、IIS都有各自的配置。

  (3)安全性

    POST的安全性比GET的高。这里的安全是指真正的安全,而不同于上面GET提到的安全方法中的安全,上面提到的安全仅仅是不修改服务器的数据。比如,在进行登录操作,通过GET请求,用户名和密码都会暴露再URL上,因为登录页面有可能被浏览器缓存以及其他人查看浏览器的历史记录的原因,此时的用户名和密码就很容易被他人拿到了。除此之外,GET请求提交的数据还可能会造成Cross-site request frogery攻击

  (4)HTTP中的GET,POST,SOAP协议都是在HTTP上运行的

37、doctype的作用:

  (1)DOCTYPE是document type(文档类型)的简写,在Web设计中用来说明你用的XHTML或者HTML是什么版本.

  (2)要建立符合标准的XHTML网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。

  (3)一般放置在html网页代码最顶部
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//CN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  (4)小结,通常html DOCTYPE声明是必须的,而且使用div+css更是必不可少,如果缺少或错误document将会造成你的CSS失效或半失效,即因为css失效,网页布局变乱,有的css属性不能体现。

  (5)如果你不能记住和正确输入DOCTYPE长串英文,没关系,DIVCSS5建议你使用DW软件直接新建html即可得到完整结构最基本html。

38、iframe的优缺点:

  (1)HTML框架简述

    一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)
框架页使用了表格的方式组合,可以分为数行与数列。
  (2)框架的优点
    • 重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,加快了网页下载速度)
    • 技术易于掌握,使用方便,使用者众多,可主要应用于不需搜索引擎来搜索的页面
    • 方便制作导航栏 

  (3)框架的缺点(iframe的缺点与frame类似)

    • 会产生很多页面,不容易管理
    • 不容易打印(目前只能实现分框架页面的打印,不能实现对frameset的打印)
    • 浏览器的后退按钮无效(只能针对实现当前光标所在页面的前进与后退,无法实现frameset整个页面的前进与后退)
    • 代码复杂,无法被一些搜索引擎索引到(框架结构(帧结构)的不能为每个网页都设置一个标题(TITLE),更为糟糕的是,有些搜索引擎对框架结构的页面不能正确处理,会影响到搜索结果的排列名次)
    • 多数小型的移动设备(PDA 手机)无法完全显示框架
    • 多框架的页面会增加服务器的http请求
    • 由于上面诸多缺点,因此不符合标准网页设计的理念,已经被标准网页设计抛弃,目前的html5已不再支持此标签 

39、同步和异步的区别:

  (1)同步:

    同步的思想是:所有的操作都做完,才返回给用户。这样用户在线等待的时间太长,给用户一种卡死了的感觉(就是系统迁移中,点击了迁移,界面就不动了,但是程序还在执行,卡死了的感觉)。这种情况下,用户不能关闭界面,如果关闭了,即迁移程序就中断了。

   (2)异步:

    将用户请求放入消息队列,并反馈给用户,系统迁移程序已经启动,你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉,会告诉你,你的请求系统已经响应了。你可以关闭界面了。

   (3)总结:

    a、同步,是所有的操作都做完,才返回给用户结果。即写完数据库之后,在相应用户,用户体验不好。

    b、异步,不用等所有操作等做完,就相应用户请求。即先相应用户请求,然后慢慢去写数据库,用户体验较好。

40、不同网页之间的数据传递:

原文地址:https://www.cnblogs.com/minozMin/p/7678117.html