每日一道面试题(前端)

#每日一道面试题#

开篇:

从今天开始,每日一道面试题,帮助群里的小伙伴们进行面试题辅导提高,还请大家踊跃回复参与其中,针对人群:中级及高级开发人员,同时欢迎大神给与点评或板砖

为了表现的我分两篇介绍,分别为偏前端,后端,注意只是偏向不同

每日一道面试题(前端)

每日一道面试题(后台)

开始之前我先申明一下

所有面试题的答案均不是唯一的,所有题目的答案都是仁者见智的回答,如果自己以前不知道,可以看一下,知道的,结合自己以前的做个对比吧,觉得有问题的,请直接留言或加入QQ群:70895254

闲话少说,言归正传,面试题直接上:

1、简述javascript中的“======”的区别?   2017-04-05

答: =,赋值语句,这个不解释

===,严格运算符

严格运算符的运算规则如下:

1)不同类型值:如果两个值的类型不同,直接返回false

2)同一类型的原始值类型(数值、字符串、布尔值):值相同返回true,值不同返回false

3)同一类的复合类型值(对象、数组、函数):不是比较它们的值是否相等,而是比较它们是否指向同一个对象;

4)undefined和null,与自身严格相等

==,相等运算符,相等运算符在比较相同类型的数据时,与严格相等运算符完全一样。

在比较不同类型的数据时,相等运算符会先将数据进行类型转换,然后再用严格相等运算符比较

相等运算符的运算规则如下:

1)原始类型的值:原始类型的数据会转换成数值类型再进行比较。字符串和布尔值都会转换成数值

2)对象与原始类型值比较:对象(这里指广义的对象,包括数值和函数)与原始类型的值比较时,对象转化成原始类型的值,再进行比较。

3)undefined和null,undefined和null与其他类型的值比较时,结果都为false,它们互相比较时结果为true。

4)相等运算符的缺点:相等运算符隐藏的类型转换,会带来一些违反直觉的结果。

'' == '0'           // false        0== ''             // true

0 == '0'            // true         false == 'false'    // false

false == '0'        // true         false == undefined  // false

false == null       // false        null == undefined   // true

‘’ ' == 0     // true

2、简述javascript的作用域和闭包?    (2017-04-06)

答:作用域就是变量起作用的范围。作用域包括全局作用域,函数作用域以块级作用域,作用域是静态的。

全局:var a = "251608027";function fn1() { alert(a); } fn1();

函数:function fn1() { var a = "251608027"; alert(a); } function fn2() { alert(a); } fn1();fn2(); //fn2会出错

块级:function test() { (function () { for (var i = 0; i < 4; i++) { alert(i); /*i有效*/ } })(); alert(i); /*i无效*/ } test();

作用域链:一般指函数内嵌函数时是作用域链,使用范围:全局>外部函数>内部函数

JS闭包:闭包是指可以访问独立变量的函数,也可以说是:定义在一个函数内部的函数;最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中;

function closure() { var str = "I'm a part variable"; return function () { alert(str += "s"); } }

var fObj = closure();fObj(); fObj();//第二次执行时多多加一个字符

function F() { var x = 1; return function () { x++; alert(x); } }

        var f1 = F();f1(); /*2*/ f1(); /*3*/

        var f2 = F();f2();/*2*/  f1(); //4,f1还是按照原来自己的参数继续

    PS: http://www.cnblogs.com/xxcanghai/p/4991870.html   //这个学会了基本闭包就没有问题了

3position有哪些?absoluterelative是相对于什么来定位?   (2017-04-07)

答:position:absolute relative fixed static ;

1.绝对定位absolute,相对定义relative,静态static,固定fixed

2.absolute是相对于浏览器左上角来定位,脱离了文档流与浮动模型,独立于其他对象而存在,没有占位。

relative是相对于父级来定位,没有脱离正常的文档流,原始占位信息存在

4postget的区别?   2017-04-10

答:1.Get是向服务器发索取数据的一种请求,而Post是向服务器提交数据的一种请求(get也能传递数据)

2.post比get相对安全一点,GET请求的数据会暴露在地址栏中,而POST请求则不会。

3.post传值比get数据量较大,一般情况下get小于2k(浏览器或IIS的限制所致)

4.服务端获取GET请求参数用Request.QueryString,获取POST请求参数用Request.Form

5.get是把参数数据队列加到提交表单的action属性所指的URL中,post是文件包

通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

PS:11-13号小姨子结婚,我休假三天,这三天由老王(未央)、娘炮,也然出题并整理答案

5、请简要阐述什么是事件委托? (2017-04-11老王(未央))

答:事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件.bind()、.live()和.delegate()等方法。也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。有两点好处  1提高性能2新添加的元素还会有之前的事件。

6、解释jsonp的原理,以及为什么不是真正的ajax?(2017-04-12老王(未央))

答:JSONP 全称是 JSON with Padding ,是基于 JSON 格式的为解决跨域请求资源而产生的解决方案。JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,以实现跨域操作,他是利用了 HTML 里 <script></script> 元素标签,远程调用 JSON 文件来实现数据传递;

ajax是通过XmlHttpRequest获取或处理当前域或站的内容

参考:http://blog.csdn.net/superhosts/article/details/9057301

7、简述JavaScript的几种数据类型?  (2017-04-13   也然)

答:Undefined、Null、Boolean、Number和String object

8、请说出三种减少页面加载时间的方法?   (2017-04-14)

答:a. 尽量减少页面中重复的HTTP请求数量

b. 服务器开启gzip压缩

c. css样式的定义放置在文件头部

d. Javascript脚本放在文件末尾

e. 压缩合并Javascript、CSS代码

f. 使用多域名负载网页内的多个文件、图片

9、html5有哪些新特性、移除了那些元素?   (2017-04-17)

答:a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签(header,nav,footer,aside,article,section)

d. 音频、视频API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件,calendar、date、time、email、url、search

j. 新的技术webworker, websocket等

移除的元素:

a. 纯表现的元素:basefont,big,center, s,strike,tt,u;

b. 对可用性产生负面影响的元素:frame,frameset,noframes;

10、一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验?(2017-04-18)

答:a. 图片懒加载,滚动到相应位置才加载图片。

b. 图片预加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。

c. 使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。

d. 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

e. 采用CDN做高速缓存和加速

11、浏览器的内核分别是什么? (2017-04-18)

答:IE: trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)

12、HTML中 doctype的作用?(2017-04-18)

答:1).<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
2).严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。
3).在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4).DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,

Quirks(包容)模式(也就是松散呈现模式或者兼容模式或怪异模式)用于呈现为传统浏览器而设计的网页。

DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

13、Http有那些状态码及其含义?   (2017-04-19)

答:100-199 用于指定客户端应相应的某些动作,(Continue/继续)。

200-299 用于表示请求成功(成功)。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息(重定向)。

400-499 用于指出客户端的错误(错误)。

500-599 用于支持服务器错误(服务器错误)。

100 (Continue/继续)

如果服务器收到头信息中带有100-continue的请求,这是指客户端询问是否可以在后续的请求中发送附件。在这种情况下,服务器用100(SC_CONTINUE)允许客户端继续或用417 (Expectation Failed)告诉客户端不同意接受附件。

101 (Switching Protocols/转换协议)

101 (SC_SWITCHING_PROTOCOLS)状态码是指服务器将按照其上的头信息变为一个不同的协议。

200 (OK/正常)

200 (SC_OK)的意思是一切正常。一般用于相应GET和POST请求。这个状态码对servlet是缺省的;如果没有调用setStatus方法的话,就会得到200。

201 (Created/已创建)

201 (SC_CREATED)表示服务器在请求的响应中建立了新文档;应在定位头信息中给出它的URL。

202 (Accepted/接受)

202 (SC_ACCEPTED)告诉客户端请求正在被执行,但还没有处理完。

203 (Non-Authoritative Information/非官方信息)是表示文档被正常的返回,

204 (No Content/无内容) (SC_NO_CONTENT)确保浏览器继续显示先前的文档。这各状态码对于用户周期性的重载某一页非常有用,并且你可以确定先前的页面是否已经更新。

但是,这种方法对通过刷新响应头信息或等价的HTML标记自动重载的页面起作用,因为它会返回一个204状态码停止以后的重载。但基于JavaScript脚本的自动重载在这种情况下仍然需要能够起作用。

205 (Reset Content/重置内容)重置内容205 (SC_RESET_CONTENT)的意思是虽然没有新文档但浏览器要重置文档显示。这个状态码用于强迫浏览器清除表单域。

206 (Partial Content/局部内容)

206 (SC_PARTIAL_CONTENT)是在服务器完成了一个包含Range头信息的局部请求时被发送的。

300 (Multiple Choices/多重选择)

300 (SC_MULTIPLE_CHOICES)表示被请求的文档可以在多个地方找到,并将在返回的文档中列出来。如果服务器有首选设置,首选项将会被列于定位响应头信息中。

301 (Moved Permanently)

301 (SC_MOVED_PERMANENTLY)状态是指所请求的文档在别的地方;文档新的URL会在定位响应头信息中给出。浏览器会自动连接到新的URL。

302 (Found/找到)与301有些类似,只是定位头信息中所给的URL应被理解为临时交换地址而不是永久的。

注意:代表状态码302的常量是SC_MOVED_TEMPORARILY而不是SC_FOUND。

状态码302是非常有用的因为浏览器自动连接在定为响应头信息中给出的新URL。

303 (See Other/参见其他信息)这个状态码和 301、302 相似,只是如果最初的请求是 POST,那么新文档(在定位头信息中给出)要用 GET 找回。

304 (Not Modified/为修正)(SC_NOT_MODIFIED)是指缓冲的版本已经被更新并且客户端应刷新文档。

305 (Use Proxy/使用代理)

305 (SC_USE_PROXY)表示所请求的文档要通过定位头信息中的代理服务器获得。

307 (Temporary Redirect/临时重定向)

400 (Bad Request/错误请求)

400 (SC_BAD_REQUEST)指出客户端请求中的语法错误。

401 (Unauthorized/未授权)

401 (SC_UNAUTHORIZED)表示客户端在授权头信息中没有有效的身份信息时访问受到密码保护的页面。这个响应必须包含一个WWW-Authenticate的授权信息头。

403 (Forbidden/禁止)

403 (SC_FORBIDDEN)的意思是除非拥有授权否则服务器拒绝提供所请求的资源。这个状态经常会由于服务器上的损坏文件或目录许可而引起。

404 (Not Found/未找到)

404 (SC_NOT_FOUND)状态每个网络程序员可能都遇到过,他告诉客户端所给的地址无法找到任何资源。它是表示“没有所访问页面”的标准方式。

405 (Method Not Allowed/方法未允许)

405 (SC_METHOD_NOT_ALLOWED)指出请求方法(GET, POST, HEAD, PUT, DELETE, 等)对某些特定的资源不允许使用。

406 (Not Acceptable/无法访问)

406 (SC_NOT_ACCEPTABLE)表示请求资源的MIME类型与客户端中Accept头信息中指定的类型不一致。

407 (Proxy Authentication Required/代理服务器认证要求)

407 (SC_PROXY_AUTHENTICATION_REQUIRED)与401状态有些相似,只是这个状态用于代理服务器。该状态指出客户端必须通过代理服务器的认证。代理服务器返回一个Proxy-Authenticate响应头信息给客户端

408 (Request Timeout/请求超时)

408 (SC_REQUEST_TIMEOUT)是指服务端等待客户端发送请求的时间过长。

409 (Conflict/冲突)(SC_CONFLICT)状态常被用于试图上传版本不正确的文件时。

410 (Gone/已经不存在)

410 (SC_GONE)告诉客户端所请求的文档已经不存在并且没有更新的地址。410状态不同于404,410是在指导文档已被移走的情况下使用,而404则用于未知原因的无法访问。

411 (Length Required/需要数据长度)

411 (SC_LENGTH_REQUIRED)表示服务器不能处理请求(假设为带有附件的POST请求),除非客户端发送Content-Length头信息指出发送给服务器的数据的大小。

412 (Precondition Failed/先决条件错误)

412 (SC_PRECONDITION_FAILED)状态指出请求头信息中的某些先决条件是错误的。

413 (Request Entity Too Large/请求实体过大)

413 (SC_REQUEST_ENTITY_TOO_LARGE)告诉客户端现在所请求的文档比服务器现在想要处理的要大。如果服务器认为能够过一段时间处理,则会包含一个Retry-After的响应头信息。

414 (Request URI Too Long/请求URI过长)

414 (SC_REQUEST_URI_TOO_LONG)状态用于在URI过长的情况时。这里所指的“URI”是指URL中主机、域名及端口号之后的内容。

415 (Unsupported Media Type/不支持的媒体格式)

415 (SC_UNSUPPORTED_MEDIA_TYPE)意味着请求所带的附件的格式类型服务器不知道如何处理。

416 (Requested Range Not Satisfiable/请求范围无法满足)

416表示客户端包含了一个服务器无法满足的Range头信息的请求。

417 (Expectation Failed/期望失败)

如果服务器得到一个带有100-continue值的Expect请求头信息,这是指客户端正在询问是否可以在后面的请求中发送附件。在这种情况下,服务器也会用该状态(417)告诉浏览器服务器不接收该附件或用100 (SC_CONTINUE)状态告诉客户端可以继续发送附件。

500 (Internal Server Error/内部服务器错误)

500 (SC_INTERNAL_SERVER_ERROR) 是常用的“服务器错误”状态。该状态经常由CGI程序引起也可能(但愿不会如此!)由无法正常运行的或返回头信息格式不正确的servlet引起。

501 (Not Implemented/未实现)

501 (SC_NOT_IMPLEMENTED)状态告诉客户端服务器不支持请求中要求的功能。

502 (Bad Gateway/错误的网关)

502 (SC_BAD_GATEWAY)被用于充当代理或网关的服务器;该状态指出接收服务器接收到远端服务器的错误响应。

503 (Service Unavailable/服务无法获得)

状态码503 (SC_SERVICE_UNAVAILABLE)表示服务器由于在维护或已经超载而无法响应。例如,如果某些线程或数据库连接池已经没有空闲则servlet会返回这个头信息。服务器可提供一个Retry-After头信息告诉客户端什么时候可以在试一次。

504 (Gateway Timeout/网关超时)

该状态也用于充当代理或网关的服务器;它指出接收服务器没有从远端服务器得到及时的响应。

505 (HTTP Version Not Supported/不支持的 HTTP 版本)

505 (SC_HTTP_VERSION_NOT_SUPPORTED)状态码是说服务器并不支持在请求中所标明 HTTP 版本。

参考:http://tool.oschina.net/commons?type=5

http://www.cnblogs.com/lxinxuan/archive/2009/10/22/1588053.html

14、css垂直居中有那些方法?  (2017-04-20)

答:<div class="box"><span>垂直居中</span></div>

a)display: table-cell; .box1{display: table-cell;vertical-align: middle;text-align: center;}

b)display:flex; .box2{display: flex;justify-content:center;align-items:Center;}

c)绝对定位和负边距.box3{position:relative;}

.box3 span{position: absolute;100px;height: 50px;top:50%;left:50%;margin-left:-50px; margin-top:-25px;text-align: center;}

d)绝对定位和0

.box4 span{

  50%;

  height: 50%;

  background: #000;

  overflow: auto;

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

}

e)translate

.box5 span{

            position: absolute;

            top:50%;

            left:50%;

            100%;

            transform:translate(-50%,-50%);

            text-align: center;

        }

参考:http://blog.csdn.net/freshlover/article/details/11579669

http://www.cnblogs.com/hutuzhu/p/4450850.html

15、什么是CSS Hack?  (2017-04-21)

答:一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:

    // 1、条件Hack

   <!--[if IE]>

      <style>

            .test{color:red;}

      </style>

   <![endif]-->

   // 2、属性Hack

    .test{

    color:#0909; /* For IE8+ */

    *color:#f00;  /* For IE7 and earlier */

    _color:#ff0;  /* For IE6 and earlier */

    }

   // 3、选择符Hack

    * html .test{color:#090;}       /* For IE6 and earlier */

* + html .test{color:#ff0;}     /* For IE7 */

16、什么叫优雅降级和渐进增强?(2017-04-24)

答:渐进增强 progressive enhancement:

针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:

一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:

a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

17、怎样添加、移除、移动、复制、创建和查找节点?(2017-04-25)

答:1)创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2)添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3)查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id,唯一性

18、实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制?(2017-04-26)

答:    /*** 对象克隆* 支持基本数据类型及对象* 递归方法*/

function clone(obj) {

    var o;

    switch (typeof obj) {

        case "undefined":

            break;

        case "string":

            o = obj + "";

            break;

        case "number":

            o = obj - 0;

            break;

        case "boolean":

            o = obj;

            break;

        case "object": // object 分为两种情况 对象(Object)或数组(Array)

            if (obj === null) {

                o = null;

            } else {

                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {

                    o = [];

                    for (var i = 0; i  obj.length; i++) {

                        o.push(clone(obj[i]));

                    }

                } else {

                    o = {};

                    for (var k in obj) {

                        o[k] = clone(obj[k]);

                    }

                }

            }

            break;

        default:

            o = obj;

            break;

    }

    return o;

}

19、介绍一下CSS的盒子模型?(2017-04-27)

答:1)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;

2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

 

20、解释下浮动和它的工作原理?清除浮动的技巧?(2017-04-28)

答:浮动元素引起的问题:

(1)父元素的高度无法被撑开,影响与父元素同级的元素

(2)与浮动元素同级的非浮动元素会跟随其后

(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

解决方法:

使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法:

1,额外标签法,<div style="clear:both;"></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)

2,使用after伪类

#parent:after{

    content:".";

    height:0;

    visibility:hidden;

    display:block;

    clear:both;

    }

3,浮动外部元素

4,设置`overflow`为`hidden`或者auto

21、你如何管理CSS文件、JS与图片?(2017-05-01)

答:1、对各个项目中CSS,JS里的稳定的通用代码进行提取,形成公共文件,然后利用CDN等资源进行缓存,减轻服务器压力。

  2、去掉JS、CSS里的冗余代码,对代码进行精减。

  3、对JS、CSS进行压缩合并,减少请求次数。

  4、对页面上的小图标,背景等图片进行合并,减少请求次数。

  5、JS、CSS、图片均用版本控制工具进行管理,方便修改与恢复。

  我能想到的就这么多,请大家继续补充。

22、实现输出document对象中所有成员的名称和类型;(2017-05-02)

答:拿到这道题,我们来看看他是想考察神马呢?

PS:我弱弱的差点认为他考察的就是一个for in,我害怕的试了一下:

 

于是我发现他是一个对象,难道真的for in就完了?

1 for (var k in document) {

2     var v = document[k];

3     alert(v + ':' + typeof (v));

4 }

最后证明确实如此。。。怎么会这么简单呢?

思考

其实我猜面试官可能会在此上做一点文章,考察面试者对for in细节的认识,因为我们的原型链问题,我们会遍历一个对象的所有属性包括原型的一直到达object,而这显然不是我们想要的,所以此点各位可以拿来说下。

23、如何获得一个DOM元素的绝对位置?(获得元素位置,不依赖框架)(2017-05-03)

答:这道题根本就是送分的(不能编码、不能设置断点情况我直接悲剧!),直接上断点:

 

所有信息一目了然,代码都省了,但是万一有坑怎么办,所以测试下IE吧:

 

看我们混杂模式也是这个样子,所以这个题是没有问题的,我们直接获取其属性即可。

24、Ajax读取一个XML文档并进行解析的实例;(2017-05-04)

答:本文实例讲述了jQuery+ajax读取并解析XML文件的方法。分享给大家供大家参考,具体如下:

ajax.xml:

?

1

2

3

4

5

6

7

8

9

10

11

<?xml version="1.0" encoding="UTF-8"?>

<stulist>

  <student email="1@1.com">

    <name>zhangsan</name>

    <id>1</id>

  </student>

  <student email="2@2.com">

    <name>lisi</name>

    <id>2</id>

  </student>

</stulist>

demo.html:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>加载XML</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="generator" content="editplus" />

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>

<script type="text/javascript">

$(function() {

  $("button").click(function(){

    $.ajax({

      url:'xml/ajax.xml',

      type: 'GET',

      dataType: 'xml',

      timeout: 1000,

      cache:false,

      error: function(xml){

        alert('加载XML文档出错');

      },

      success: function(xml){

        //建立一个代码片段

        var frag=$("<ul/>");

        //遍历所有student节点

        $(xml).find("student").each(function(i){

          //获取id节点

          var id=$(this).children("id"),

          //获取节点文本

            id_value=id.text(),

          //获取student下的email属性。

            email=$(this).attr("email");

          //构造HTML字符串,通过append方法添加进之前建立代码片段

          frag.append("<li>"+id_value+"-"+email+"</li>");

        });

        //最后得到的frag添加进HTML文档中

        frag.appendTo("#load");

      }

    });

  });

});

</script>

</head>

<body>

<button>加载</button>

<div id="load"></div>

</body>

</html>

效果图:

25、JS如何实现面向对象和继承机制?(2017-05-05)

答:http://www.cnblogs.com/yexiaochai/archive/2013/04/25/3042113.html

26、JS模块的封装方法,比如怎样实现私有变量,不能直接赋值,只能通过公有方法;(2017-05-08)

答:http://www.cnblogs.com/yexiaochai/archive/2013/06/20/3145509.html

27、对闭包的理解,闭包的好处和坏处?(2017-05-09)

答:http://www.cnblogs.com/yexiaochai/archive/2013/06/15/3137288.html

28、对this指针的理解,可以列举几种使用情况?(2017-05-10)

答:http://www.cnblogs.com/yexiaochai/archive/2013/04/22/3034949.html

29、对JS中函数绑定的理解?函数绑定可以使用哪两个函数?(2017-05-11)

答:http://www.cnblogs.com/yexiaochai/archive/2013/04/22/3034949.html

30、简述Ajax的异步机制。Ajax有哪些好处和弊端?(2017-05-12)

答:http://www.cnblogs.com/yexiaochai/archive/2013/04/24/3037069.html

PS:以上十道题来源:http://www.cnblogs.com/yexiaochai/p/3152858.html ,本人近期有考试,暂时不进行整理,待考试结束后,重新整理。

31、eval是做什么的?(2017-05-15)

答:eval()的作用:把字符串参数解析成JS代码并运行,并返回执行的结果;例

  1. eval("2+3");//执行加运算,并返回运算值。  
  2. eval("varage=10");//声明一个age变量 

eval的作用域:

  1. functiona(){  
  2.  eval("var x=1"); //等效于 var x=1;  
  3.  console.log(x); //输出1  
  4. }  
  5. a();  
  6. console.log(x);//错误 x没有定义  

由JSON字符串转换为JSON对象的时候可以用eval,例如:

  1. varjson="{name:'Mr.CAO',age:30}";  
  2. varjsonObj=eval("("+json+")");  
  3. console.log(jsonObj);  

32、null和undefined的区别?(2017-05-16)

答:null表示"没有对象",即该处不应该有值。典型用法是:

1.作为函数的参数,表示该函数的参数不是对象。

2.作为对象原型链的终点。

Object.getPrototypeOf(Object.prototype)

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:

(1)变量被声明了,但没有赋值时,就等于undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。

(3)对象没有赋值的属性,该属性的值为undefined。

(4)函数没有返回值时,默认返回undefined。

var i;

i // undefined

function f(x){console.log(x)}

f() // undefined

var  o = new Object();

o.p // undefined

var x = f();

x // undefined

33、new操作符具体干了什么呢?(2017-05-17)

34、call() 和 apply() 的区别和作用?(2017-05-18)

35、(2017-05-19)

结束语:

面试题万变不离其宗,只要每一道例题都吃透了,一般的面试是没有问题,但是面试除了面试题,口语表达能力也是非常重要的一个环节,当然了这是另外一个话题,有时间我在出一个帖子,把大家的面试经历收集一下,整理出来供群内的小伙伴们参考学习;

原文地址:https://www.cnblogs.com/fly12300/p/6667642.html