jQuery与Ajax 面试题库（长期更新中...）

jQuery 部分：

　　JavaScript 是客户端脚本的标准语言，而 jQuery 使得编写 JavaScript 更加简单。你能够只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到的 JavaScript 库之一，而且如今已经不多有不用jQuery 而使用原生 JavaScript 的新项目了。这对于做为一个 Java web 开发者的你而言意味着你会在一场Java web开发面试中发现许多jQuery的面试问题.

　　早些时候，绝大部分都是 HTTP, HTML, CSS 以及 JavaScript，但最近开始，除了 JavaScript 基础以外，人们也但愿知道你是否熟悉 jQuery。这16个jQuery的问题是为web开发者准备的，且也可以很是方便你在参加一次电话或者视频一轮的面试以前纠正一些关键的概念。若是你是 jQuery 新手，那么它也可以帮助你更加好的理解基础知识，并激励你去发现更多东西。

　　1. jQuery 库中的 $() 是什么？（答案以下）

　　$() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被容许调用定义在 jQuery 对象上的多个不一样方法。你甚至能够将一个选择器字符串传入 $() 函数，它会返回一个包含全部匹配的 DOM 元素数组的 jQuery 对象。这个问题我已经见过好几回被说起，尽管它很是基础，它常常被用来区分一个开发人员是否了解 jQuery。

　　2. 网页上有 5 个元素，如何使用 jQuery来选择它们？（答案）

　　另外一个重要的 jQuery 问题是基于选择器的。jQuery 支持不一样类型的选择器，例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你能够用标签选择器来选择全部的 div 元素。jQuery 代码：$("div")，这样会返回一个包含全部 5 个 div 标签的 jQuery 对象。更详细的解答参见上面连接的文章。

　　3. jQuery 里的 ID 选择器和 class 选择器有何不一样？（答案）

　　若是你用过 CSS，你也许就知道 ID 选择器和 class 选择器之间的差别，jQuery 也一样如此。ID 选择器使用 ID 来选择元素，好比 #element1，而 class 选择器使用 CSS class 来选择元素。当你只须要选择一个元素时，使用 ID 选择器，而若是你想要选择一组具备相同 CSS class 的元素，就要用 class 选择器。在面试过程当中，你有很大概率会被要求使用 ID 选择器和 class 选择器来写代码。下面的 jQuery 代码使用了 ID 选择器和 class 选择器：

$('#LoginTextBox') // Returns element wrapped as jQuery object with id='LoginTextBox'
$('.active') // Returns all elements with CSS class active.复制代码

　　正如你所见，从语法角度来讲，ID 选择器和 class 选择器的另外一个不一样之处是，前者用字符”#”然后者用字符”.”。更详细的分析和讨论参见上面的答案连接。

　　4. 如何在点击一个按钮时使用 jQuery 隐藏一个图片？

　　这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你能够经过如下代码去隐藏一个经过ID或class定位到的图片。你须要知道如何为按钮设置事件并执行hide() 方法，代码以下所示：

$('#ButtonToClick').click(function(){
	$('#ImageToHide').hide();
});复制代码

　　我喜欢这个问题，由于很贴近实际使用，代码也不复杂。

　　5. $(document).ready() 是个什么函数？为何要用它？(answer)

　　这个问题很重要，而且经常被问到。 ready() 函数用于在文档进入ready状态时执行代码。当DOM 彻底加载（例如HTML被彻底解析DOM树构建完成时），jQuery容许你执行代码。使用$(document).ready()的最大好处在于它适用于全部浏览器，jQuery帮你解决了跨浏览器的难题。须要进一步了解的用户能够点击 answer连接查看详细讨论。

　　6. JavaScript window.onload 事件和 jQuery ready 函数有何不一样？（答案）

　　这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被建立还要等到包括大型图片、音频、视频在内的全部外部资源都彻底加载。若是加载图片和媒体内容花费了大量时间，用户就会感觉到定义在 window.onload 事件上的代码在执行时有明显的延迟。

　　另外一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另外一个优点是你能够在网页里屡次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

　　7. 如何找到全部 HTML select 标签的选中项？（答案以下）

　　这是面试里比较棘手的 jQuery 问题之一。这是个基础的问题，可是别指望每一个 jQuery 初学者都知道它。你能用下面的 jQuery 选择器获取全部具有 multiple=true 的 <select > 标签的选中项：

$('[name=NameOfSelectedTag] :selected')复制代码

　　这段代码结合使用了属性选择器和 :selected 选择器，结果只返回被选中的选项。你可按需修改它，好比用 id 属性而不是 name 属性来获取 <select> 标签。

　　8. jQuery 里的 each() 是什么函数？你是如何使用它的？（答案以下）

　　each() 函数就像是 Java 里的一个 Iterator，它容许你遍历一个元素集合。你能够传一个函数给 each() 方法，被调用的 jQuery 对象会在其每一个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示全部选中项。咱们能够用上面的选择器代码找出全部选中项，而后咱们在 alert 框中用 each() 方法来一个个打印它们，代码以下：

$('[name=NameOfSelectedTag] :selected').each(function(selected) {
			alert($(selected).text());
});复制代码

　　其中 text() 方法返回选项的文本。

　　9. 你是如何将一个 HTML 元素添加到 DOM 树中的？（答案以下）

　　你能够用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你能够经过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。

　　10. 你能用 jQuery 代码选择全部在段落内部的超连接吗？（答案略）

　　这是另外一个关于选择器的 jQuery 面试题。就像其余问题那样，只需一行 jQuery 代码就能搞定。你能够使用下面这个 jQuery 代码片断来选择全部嵌套在段落（<p>标签）内部的超连接（<a>标签）……

　　11. $(this) 和 this 关键字在 jQuery 中有何不一样？（答案以下）

　　这对于不少 jQuery 初学者来讲是一个棘手的问题，实际上是个简单的问题。$(this) 返回一个 jQuery 对象，你能够对它调用多个 jQuery 方法，好比用 text() 获取文本，用val() 获取值等等。而 this 表明当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

　　12. 你如何使用jQuery来提取一个HTML 标记的属性 例如. 连接的href? (答案)

　　attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先须要利用jQuery选择及选取到全部的连接或者一个特定的连接，而后你能够应用attr()方法来得到他们的href属性的值。下面的代码会找到页面中全部的连接并返回href值：

$('a').each(function(){
	alert($(this).attr('href'));
});复制代码

　　13. 你如何使用jQuery设置一个属性值? (答案)

　　前面这个问题以后额外的一个后续问题是，attr()方法和jQuery中的其它方法同样，能力不止同样. 若是你在调用attr()的同时带上一个值 例如. attr(name, value), 这里name是属性的名称，value是属性的新值。

　　14. jQuery中 detach() 和 remove() 方法的区别是什么? (答案)

　　尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 二者之间的主要不一样在于 detach() 会保持对过去被解除元素的跟踪, 所以它能够被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还能够看看 用来向DOM中添加元素的 appendTo() 方法.

　　15. 你如何利用jQuery来向一个元素中添加和移除CSS类? (答案)

　　经过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性能够很简单例如. 使用类“.active"来标记它们的未激活和激活状态，等等.

　　16. 使用 CDN 加载 jQuery 库的主要优点是什么 ? (答案)

　　这是一个稍微高级点儿的jQuery问题。好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处以外, 最重要的是，若是浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 所以今时今日，许多公共的网站都将jQuery用于用户交互和动画, 若是浏览器已经有了下载好的jQuery库，网站就能有很是好的展现机会。

　　17. jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

　　ajax() 方法更强大，更具可配置性, 让你能够指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

　　18. jQuery 中的方法链是什么？使用方法链有什么好处？

　　方法链是对一个方法返回的结果调用另外一个方法，这使得代码简洁明了，同时因为只对 DOM 进行了一轮查找，性能方面更加出色。

　　19. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

　　这一般用于阻止事件向上冒泡。

　　20. 哪一种方式更高效：document.getElementbyId("myId") 仍是 $("#myId")？

　　第一种，由于它直接调用了 JavaScript 引擎。

Ajax部分：

一、什么是 AJAX，Ajax 包含什么技术？

什么是 ajax：
AJAX 是“Asynchronous JavaScript and XML”的缩写。他是指一种建立交互式网页应用的网页开发技术。
Ajax 包含下列技术（Ajax的技术体系组成）
基于web标准（standards-basedpresentation） XHTML+ CSS的表示；
使用 DOM（Document ObjectModel）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操做；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将全部的东西绑定在一块儿。

2. Ajax的使用

和服务器进行交互时，出现的 ajax ；

建立一个 ajax 对象 XMLHttpRequest 对象 ；

若是在 ie5 ie6 中 没有 XMLHttpRequest 对象 须要特殊的作兼容处理；

第一步：

let xmlHttp;
if(window.XMLHttpRequest){//判断当前的浏览器 是否为 ie5或者ie6
	//若是是 new XMLHttpRequest()
	xmlHttp=new XMLHttpRequest()
}else{
	//若是不是 new ActiveXObject("Microsoft.XMLHTTP")
	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
}复制代码

第二步：

// .open建立一个一个请求，告诉ajax 用什么方式，去请求什么地址，是同步仍是异步
    // xmlHttp.open("请求类型","请求地址",同步或者异步)
    //类型：
    //get:1.get一般用于获取数据  2.get在数据中有大小限制，不能大于 32k
    //3.get采用明文传码，重要的信息传入不要使用get 
    //post：1.post一般用于发送数据 2.post能够传入大量数据 3.post安全性较高
    //请求地址 api接口
    //同步或者异步 false同步 true异步
xmlHttp.open("get","url");
    //发送请求
    //若是是get请求 send(null) 能够传参，可是不是由send发送
    //若是是post请求 send填写发送的数据
    // name="wangyi"
xmlHttp.send(null)
复制代码

//onreadystatechange  准备状态发生了改变
xmlHttp.onreadystatechange=function(){
	//readyState
	//0 xmlHttp.readyState 请求未初始化
	//1 和服务器链接建立
	//2 请求已经接受了
	//3 请求处理中
	//4 请求处理完成，而且返回数据(响应就绪) 
	//status
	//200 时 请求成功了
	//404 时 没有找到接口
	if(xmlHttp.readyState==4&&xmlHttp.status==200){
		console.log("接受到数据了")
	}
}复制代码

总结：

1. 建立 ajax 对象 ，兼容性处理

xmlHttp=new XMLHttpRequest() ;

或者 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") ;

2. 建立 ajax 请求（向服务器发送请求） .open

3. 发送 ajax 请求 .send

4. 接受请求数据 onreadystatechange 事件

5. xmlHttp.readystate==4 响应完成 .status==200时证实请求成功

AJAX向服务器发送请求

AJAX服务器响应

responseText 属性

若是来自服务器的响应并不是 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，所以您能够这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;复制代码

responseXML 属性

若是来自服务器的响应是 XML，并且须要做为 XML 对象进行解析，请使用 responseXML 属性；

Ready State 事件

三、为何要用 ajax，Ajax 应用程序的优点在于：

1. 经过异步模式，提高了用户体验；
2. 优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占用；
3. Ajax 引擎在客户端运行，承担了一部分原本由服务器承担的工做，从而减小了大用户量下的服务器负载。

四、AJAX 最大的特色是什么。

Ajax能够实现动态不刷新（局部刷新），就是能在不更新整个页面的前提下维护数据。

这使得Web应用程序更为迅捷地回应用户动做，并避免了在网络上发送那些没有改变过的信息。

五、请介绍一下 XMLhttprequest 对象。

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5中首次引

入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest 使您能够使用 JavaScript 向

服务器提出请求并处理响应，而不阻塞用户。经过 XMLHttpRequest 对象，Web 开发人员可

以在页面加载之后进行页面的局部更新。

六、AJAX应用和传统Web应用有什么不一样。

在传统的Javascript编程中，若是想获得服务器端数据库或文件上的信息，或者发送客户端信息到服务器，须要创建一个 HTML form 而后 GET 或者 POST 数据到服务器端。用户须要点击”Submit”按钮来发送或者接受数据信息，而后等待服务器响应请求，页面从新加载。
由于服务器每次都会返回一个新的页面， 因此传统的web应用有可能很慢并且用户交互不友好。
使用 AJAX 技术， 就能够使Javascript经过XMLHttpRequest对象直接与服务器进行交互。
经过 HTTP Request， 一个 web 页面能够发送一个请求到 web 服务器而且接受 web 服务器返回的信息(不用从新加载页面)，展现给用户的仍是通一个页面，用户感受页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

七、AJAX请求总共有多少种CALLBACK。

Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

8. Ajax 和 javascript 的区别。

javascript是一种在浏览器端执行的脚本语言，Ajax是一种建立交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。
Javascript是由网景公司开发的一种脚本语言，它和sun公司的java语言是没有任何关系的，它们类似的名称只是一种行销策略。
在通常的web开发中，javascript是在浏览器端执行的，咱们能够用javascript控制浏览器的行为和内容。
在 Ajax应用中信息是如何在浏览器和服务器之间传递的
经过XML数据或者字符串

九、在浏览器端如何获得服务器端响应的XML数据。

XMLHttpRequest 对象的 responseXMl 属性

十、 XMLHttpRequest 对象在 IE 和 Firefox 中建立方式有没有不一样。

有，IE 中经过 new ActiveXObject() 获得，Firefox 中经过 newXMLHttpRequest() 获得

十一、介绍一下 XMLHttpRequest 对象的经常使用方法和属性。

open(“method”,”URL”) 创建对服务器的调用，第一个参数是HTTP请求 方式能够为GET，POST或任何服务器所支持的您想调用的方式。
第二个参数是请求页面的 URL。
send() 方法，发送具体请求
abort() 方法，中止当前请求
readyState 属性 请求的状态 有5个可取值0=未初始化 ，1=正在加载
2=以加载，3=交互中，4=完成
responseText 属性 服务器的响应，表示为一个串
reponseXML 属性 服务器的响应，表示为XML
status 服务器的HTTP状态码，200对应ok 400对应not found

十二、什么是XML

XML是扩展标记语言，可以用一系列简单的标记描述数据

1三、XML的解析方式

经常使用的用dom解析和sax解析。dom解析是一次性读取xml文件并将其构造为DOM对象供程序使用，优势是操做方便，可是比较耗内存。Sax是按事件驱动的方式解析的，占用内存少，可是编程复杂。

1四、你采用的是什么框架（架包）

这题是必问的，通常也是最开始就会问到。
在java中比较流行的有 dojo, Prototype , JQuery, Dwr, extjs 等等

1五、若是熟悉某种ajax框架，他可能会问到怎样在程序中使用这种框架

DWR框架介绍
DWR(DirectWeb Remoting)是一个WEB远程调用框架.利用这个框架可让AJAX开发变得很简单.利用DWR能够在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用同样(DWR根据Java类来动态生成JavaScrip代码).
DWR的实现原理是经过反射，将java翻译成javascript，而后利用回调机制，从而实现了javascript调用Java代码

1六、介绍一下Prototype的$()函数，$F()函数，$A()函数都是什么做用

$() 方法是在DOM中使用过于频繁的document.getElementById() 方法的一个便利的简写，就像这个DOM方法同样，这个方法返回参数传入的id的那个元素。
$F()函数是另外一个大收欢迎的“快捷键”，它能用于返回任何表单输入控件的值，好比textbox,drop-down list。这个方法也能用元素id或元素自己作为参数。

$A()函数能把它接收到的单个的参数转换成一个Array对象。

1七、介绍一下XMLHttpRequest对象

经过XMLHttpRequest对象，Web开发人员能够在页面加载之后进行页面的局部更新。
AJAX开始流行始于Google在2005年使用的”Google Suggest”。
“Google Suggest”就是使用XMLHttpRequest对象来建立动态的Web接口：
当用户开始输入google的搜索框，Javascript发送用户输入的字符到服务器，而后服务器返回一个建议列表。

XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。

1八、AJAX的全称是什么？ 介绍一下AJAX？

AJAX的全称是Asynchronous JavaScript And XML.
AJAX是2005年由Google发起并流行起来的编程方法， AJAX不是一个新的编程语言，可是它是一个使用已有标准的新的编程技术。
使用AJAX能够建立更好，更快，更用户界面友好的Web应用。

AJAX技术基于Javascript和HTTP Request.

1九、Ajax主要包含了哪些技术？

Ajax（Asynchronous JavaScript + XML）的定义
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操做；
使用XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将全部的东西绑定在一块儿。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。
相似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器做为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。可是Opera不支持XSL格式对象，也不支持XSLT。

20、AJAX都有哪些优势和缺点？

优势：

一、最大的一点是页面无刷新，用户的体验很是好。

二、使用异步方式与服务器通讯，具备更加迅速的响应能力。

三、能够把之前一些服务器负担的工做转嫁到客户端，利用客户端闲置的能力来处理，减轻服

务器和带宽的负担，节约空间和宽带租用成本。而且减轻服务器的负担，ajax的原则是“按

需取数据”，能够最大程度的减小冗余请求，和响应对服务器形成的负担。

四、基于标准化的并被普遍支持的技术，不须要下载插件或者小程序。

缺点：

一、ajax不支持浏览器back按钮。

二、安全问题 AJAX暴露了与服务器交互的细节。

三、对搜索引擎的支持比较弱。

四、破坏了程序的异常机制。

五、不容易调试。

一、Ajax 是什么? 如何建立一个Ajax？

Ajax并不算是一种新的技术，全称是asychronous javascript and xml，能够说是已有技术的组合，主要用来实现客户端与服务器端的异步通讯效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，能够使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持

使用ajax原生方式发送请求主要经过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通讯效果

基本步骤：

var xhr =null;//建立对象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(“方式”,”地址”,”标志位”);//初始化请求

xhr.setRequestHeader(“”,””);//设置http头信息

xhr.onreadystatechange =function(){}//指定回调函数

xhr.send();//发送请求

js框架（jQuery/EXTJS等）提供的ajax API对原生的ajax进行了封装，熟悉了基础理论，再学习别的框架就会驾轻就熟，好多都是换汤不换药的内容

二、同步和异步的区别?

同步：阻塞的

-张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两我的一块去吃饭

=浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面

异步：非阻塞的

-张三叫李四去吃饭，李四在忙，张三说了一声而后本身就去吃饭了，李四忙完后本身去吃

=浏览器向服务器请求数据，服务器比较忙，浏览器能够自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

三、如何解决跨域问题?

理解跨域的概念：协议、域名、端口都相同才同域，不然都是跨域

出于安全考虑，服务器不容许ajax跨域获取数据，可是能够跨域获取文件内容，因此基于这一点，能够动态建立script标签，使用标签的src属性访问js文件的形式获取js脚本，而且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，须要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

四、页面编码和被请求的资源编码若是不一致如何处理？

对于ajax请求传递的参数，若是是get请求方式，参数若是传递中文，在有些浏览器会乱码，不一样的浏览器对参数编码的处理方式不一样，因此对于get请求的参数须要使用 encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不须要进行编码

五、简述ajax 的过程。

1. 建立XMLHttpRequest对象,也就是建立一个异步调用对象（建立ajax对象）

2. 建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息（建立请求）

3. 设置响应HTTP请求状态变化的函数

4. 发送HTTP请求

5. 获取异步调用返回的数据

6. 使用JavaScript和DOM实现局部刷新

六、阐述一下异步加载JS。

1. 异步加载的方案： 动态插入 script 标签

2. 经过 ajax 去获取 js 代码，而后经过 eval 执行

3. script 标签上添加 defer 或者 async 属性

4. 建立并插入 iframe，让它异步执行 js

七、请解释一下 JavaScript 的同源策略。

同源策略是客户端脚本（尤为是Javascript）的重要的安全度量标准。它最先出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不一样源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

8*、GET和POST的区别，什么时候使用POST？

GET：通常用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，通常在2000个字符，有的浏览器是8000个字符

POST：通常用于修改服务器上的资源，对所发送的信息没有限制

在如下状况中，请使用 POST 请求：

1. 没法使用缓存文件（更新服务器上的文件或数据库）

2. 向服务器发送大量数据（POST 没有数据量限制）

3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

九、ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

1. 经过异步模式，提高了用户体验

2. 优化了浏览器和服务器之间的传输，减小没必要要的数据往返，减小了带宽占用

3. Ajax在客户端运行，承担了一部分原本由服务器承担的工做，减小了大用户量下的服务器负载。

十、 Ajax的最大的特色是什么。

Ajax能够实现异步通讯效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；

十一、ajax的缺点

一、ajax不支持浏览器back按钮。

二、安全问题 AJAX暴露了与服务器交互的细节。

三、对搜索引擎的支持比较弱。

四、破坏了程序的异常机制。

十二、ajax请求的时候get 和post方式的区别

get通常用来进行查询操做，url地址有长度限制，请求的参数都暴露在url地址当中，若是传递中文参数，须要本身进行编码操做，安全性较低。

post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

1三、解释jsonp的原理，以及为何不是真正的ajax

Jsonp并非一种数据格式9，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是经过动态建立script标签，而后经过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，须要事先在页面定义好回调函数，本质上使用的并非ajax技术

1四、什么是Ajax和JSON，它们的优缺点。

Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新。

优势：能够使得页面不重载所有内容的状况下加载局部内容，下降数据传输量，避免用户不断刷新或者跳转页面，提升用户体验

缺点：对搜索引擎不友好；要实现ajax下的先后退功能成本较大；可能形成请求数的增长跨域问题限制；

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优势：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

1五、http常见的状态码有那些？分别表明是什么意思？

200 - 请求成功

301 - 资源（网页等）被永久转移到其它URL

404 - 请求的资源（网页等）不存在

500 - 内部服务器错误

1六、一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？

分为4个步骤：

1. 当发送一个 URL 请求时，无论这个 URL 是 Web 页面的 URL 仍是 Web 页面上每一个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器得到请求对应的 IP 地址。

2. 浏览器与远程 Web 服务器经过 TCP 三次握手协商来创建一个 TCP/IP 链接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试创建起通讯，然后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

3. 一旦 TCP/IP 链接创建，浏览器会经过该链接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

1七、ajax请求的时候get 和post方式的区别

get通常用来进行查询操做，url地址有长度限制，请求的参数都暴露在url地址当中，若是传递中文参数，须要本身进行编码操做，安全性较低。

post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

1八、ajax请求时，如何解释json数据

使用eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。

1. 自我介绍

  我叫XXX，今年23岁，毕业于XXX，本科学的是xxx，由于我的缘由对计算机比较感兴趣，因此自学了前端的一些知识，在校期间也有实习，去年10月份到至今，在秦皇岛益诚堂医药实习。在我学习期间，我我的把小米的网站仿着作了一遍，我也跟着老师参与作咱们学校的一个实验室网站，学到了很多的东西。经过这个实习，我不只学到了一些技术方面的东西，还有个人自学能力和与同事的沟通能力，并且我认为这些也是在工做中比较重要的。

技术方面我掌握的我一直在从事web前端方面的工做，掌握的前端技术有，html，css，JavaScript，div+css，ajax和jQuery。

个人性格方面不算外向，也不算内向，在和同事，朋友相处的时候比较外向，在工做中，代码开发时，我是比较内向的，我喜欢全心全意地投入个人工做。我也比较喜欢交朋友，和朋友一块儿聚聚聊聊，对于个人工做，我老是抱着认真负责，有责任心，吃苦耐劳的态度工做。

2. 了解先后端分离吗，说说认识，有什么优势（不太了解，直说出了方便维护，先后端能够同时开发，效率高）

一、能够实现真正的先后端解耦，前端服务器使用nginx。前端/WEB服务器放的是css，js，图片等等一系列静态资源（甚至你还能够css，js，图片等资源放到特定的文件服务器，例如阿里云的oss，并使用cdn加速），前端服务器负责控制页面引用&跳转&路由，前端页面异步调用后端的接口，后端/应用服务器使用tomcat（把tomcat想象成一个数据提供者），加快总体响应速度。（这里须要使用一些前端工程化的框架好比nodejs，react，router，react，redux，webpack）

二、发现bug，能够快速定位是谁的问题。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，所有由前端工程师来负责；接口数据出错，数据没有提交成功，应答超时等问题，所有由后端工程师来解决。

三、在大并发状况下，我能够同时水平扩展先后端服务器，好比淘宝的一个首页就须要2000+台前端服务器作集群来抗住日均多少亿+的日均pv。

四、减小后端服务器的并发/负载压力。除了接口之外的其余全部http请求所有转移到前端nginx上，接口的请求调用tomcat，参考nginx反向代理tomcat。且除了第一次页面请求外，浏览器会大量调用本地缓存。

五、即便后端服务暂时超时或者宕机了，前端页面也会正常访问，只不过数据刷不出来而已。

六、页面显示的东西再多也不怕，由于是异步加载。

7. nginx支持页面热部署，不用重启服务器，前端升级更无缝。

8. 增长代码的维护性 & 易读性（先后端耦在一块儿的代码读起来至关费劲）。

9. 提高开发效率，由于能够先后端并行开发，而不是像之前的强依赖。

十、在 nginx 中部署证书，外网使用https访问，而且只开放443和80端口，其余端口一概关闭（防止黑客端口扫描），内网使用http，性能和安全都有保障。

十一、前端大量的组件代码得以复用，组件化，提高开发效率，抽出来！

3. 以后问了一下了解 js 多仍是 css 答的是 js 下面问的大部分都是 js   

 js 的基本变量类型（7种），几种判断方法（4种），typeof数组返回什么（object），为何返回object。

  1）数值（number）整数和小数 例如：（1和3.14）

  2）字符串（string）文本：例如（“hellow world”）

  3）布尔值（boolean）表示真伪的两个特殊值，true（真）和false（假）

  4）Undefined：表示”未定义”或不存在

  5）Null：表示空值，即此处的值为空

  6）对象（object）：各类值组成的集合

  7）Symbol（ES6新增）

  null、对象、数组返回的都是object类型；对于函数类型返回的则是function，再好比typeof(Date)，typeof(eval)等。接下来进入正题，js判断数组类型的方法

  1）typeof 返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、object、undefined、function等6种基本数据类型。

typeof '';// string 有效
typeof 1;// number 有效
typeof Symbol();// symbol 有效
typeof true;//boolean 有效
typeof undefined;//undefined 有效
typeof null;//object 无效
typeof [] ;//object 无效
typeof new Function();// function 有效
typeof new Date();//object 无效
typeof new RegExp();//object 无效复制代码

   typeof 数组为什么返回的是object?

  typeof是用来检测数据是属于哪一种基本数据类型；

  instanceof是用来检测数据属于哪一种引用数据类型因此typeof(数组)的结果是"object"

  a instanceof array;的结果是true

2） instanceof 

在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，不管引用的是什么类型的对象，它都返回 “object”。ECMAScript 引入了另外一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符类似，用于识别正在处理的对象的类型。与 typeof 方法不一样的是，instanceof 方法要求开发者明确地确认对象为某特定类型。例如：

function Person(){ }var Tom = new Person();console.log(Tom instanceof Person); // true复制代码

  咱们再看看下面的例子：

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John instanceof Student); // trueconsole.log(John instancdof Person);  // true
//instanceof还能检测出多层继承的关系。复制代码

好了，咱们来使用instanceof检测上面的那些变量：

console.log(    num instanceof Number,    // num : false    
        str instanceof String,    // str : false    
	bool instanceof Boolean,  // bool : false    
	arr instanceof Array,     // arr : true    
	json instanceof Object,   // json : true    
	func instanceof Function,  // func : true    
	und instanceof Object,     // und : false    
	nul instanceof Object,     // nul : false    
	date instanceof Date,      // date : true    
	reg instanceof RegExp,     // reg : true    
	error instanceof Error     // error : true
	)复制代码

  从上面的运行结果咱们能够看到，num, str和bool没有检测出他的类型，可是咱们使用下面的方式建立num，是能够检测出类型的：

var num = new Number(123);var str = new String('abcdef');var boolean = new Boolean(true);复制代码

同时，咱们也要看到，und和nul是检测的Object类型，才输出的true，由于js中没有Undefined和Null的这种全局类型，他们und和nul都属于Object类型，所以输出了true。

3）constructor

  在W3C定义中的定义：constructor 属性返回对建立此对象的数组函数的引用，就是返回对象相对应的构造函数。从定义上来讲跟instanceof不太一致，但效果都是同样的。

那么判断各类类型的方法：

console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);复制代码

  注意： 

   使用instaceof和construcor,被判断的array必须是在当前页面声明的！好比，一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个array，并将其赋值给父页面的一个变量，这时判断该变量，Array ==object.constructor;会返回false； 

  缘由： 

1）array属于引用型数据，在传递过程当中，仅仅是引用地址的传递。 

2）每一个页面的Array原生对象所引用的地址是不同的，在子页面声明的array，所对应的构造函数，是子页面的Array对象；父页面来进行判断，使用的Array并不等于子页面的Array。

4）toString

  toString是Object原型对象上的一个方法，该方法默认返回其调用者的具体类型，更严格的讲，是 toString运行时this指向的对象类型, 返回的类型格式为[object,xxx],xxx是具体的数据类型，其中包括：    String，Number，Boolean，Undefined，Null，Function，Date，Array，RegExp，Error，HTMLDocument,... 基本上全部对象的类型均可以经过这个方法获取到。

Object.prototype.toString.call('') ;   // [object String]Object.prototype.toString.call(1) ;    // [object Number]Object.prototype.toString.call(true) ; // [object Boolean]Object.prototype.toString.call(undefined) ; // [object Undefined]Object.prototype.toString.call(null) ; // [object Null]Object.prototype.toString.call(new Function()) ; // [object Function]Object.prototype.toString.call(new Date()) ; // [object Date]Object.prototype.toString.call([]) ; // [object Array]Object.prototype.toString.call(new RegExp()) ; // [object RegExp]Object.prototype.toString.call(new Error()) ; // [object Error]Object.prototype.toString.call(document) ; // [object HTMLDocument]Object.prototype.toString.call(window) ; //[object global] window是全局对象global的引用复制代码

字符串和数组互转

字符串-->数组 .split(“”) 经过字符串中指定的字符，将其分割成数组

数组-->字符串 .join() 是经过指定的字符，将数组变成字符串，返回出来

4. ajax的一些问题，项目中有用吗回答基本用的jq框架中的 

get和post的区别，给了一个情景问用哪一种方法

1).url可见性：

get，参数url可见

post，url参数不可见

**get把请求的数据放在url上，即HTTP协议头上，其格式为：以?分割URL和传输数据，参数之间以&相连；post把数据放在HTTP的包体内（requrest body）

2).传输数据的大小：

get通常传输数据大小不超过2k-4k

post请求传输数据的大小根据php.ini 配置文件设定，也能够无限大

3).数据传输上：

get，经过拼接url进行传递参数

post，经过body体传输参数

4).后退页面的反应：

get请求页面后退时，不产生影响

post请求页面后退时，会从新提交请求

5).缓存性：

get请求是能够缓存的

post请求不能够缓存

**GET请求会被浏览器主动cache，而POST不会，除非手动设置

6).安全性：

都不安全，原则上

post确定要比get安全，毕竟传输参数时url不可见，但也挡不住部分人闲的没事在那抓包玩，浏览器还会缓存get请求的数据。安全性我的以为是没多大区别的，防君子不防小人就是这个道理。对传递的参数进行加密，其实都同样

那么，

post那么好为何还用get？get效率高！

5. cookie，localstorage，sessionstorage的区别，一样给了一个情景问选择哪一个       cookie和其余两个的根本区别，能不能放弃cookie

共同点：都是保存在浏览器端，而且是同源的（URL的协议、端口、主机名是相同的，只要有一个不一样就属于不一样源）

不一样点：

1)、cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下。

2)、存储大小限制：cookie数据不能超过4K，同时由于每次http请求都会携带cookie、因此cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到
5M或更大

3)、数据有效期不一样，sessionStorage仅仅在当前浏览器窗口关闭以前有效；localStorage始终有效，窗口或者浏览器关闭以后也一直保存，所以做用持久数据；cookie，只在设置cookie过时时间以前有效，即便窗口关闭或者浏览器关闭。

4)、做用域不一样：sessionStorage在不一样的浏览器窗口中不共享，即便是同一个页面，localStorage在全部的同源窗口中是共享的，cookie也是在全部同源的窗口中共享的。

5)、web Storage支持事件通知机制，能够将数据更新的通知发送给监听者。

6)、web Storage的api接口使用更方便。

6. 给一个列表每一行加一个删除按钮，有什么办法

回答：利用事件委托，给每个标签添加方法，经过循环用js操做dom添加事件

循环方法，最后只能绑定给最后一个，怎么解决

回答了利用闭包，当即执行函数

问还有没有别的办法，答在循环是能够用

let声明（小哥哥说就是想让说let）

7. ES6中let，const和 var 三者的区别

    let命令基本用法

在ES6中，新增了let命令，用于声明变量，用来取代ES5中var命令，消除var声明的变量的不合理，不严谨之处。const用于声明常量。 让咱们来看看let和var的区别：

1） let 不存在变量提高

  使用let声明的变量，不会像使用var那样存在“变量提高“”的现象。因此使用let声明变量，必须遵循“先声明，后使用”的原则。不然会报错

console.log(a); //ReferenceError
let a = 10;复制代码

若是是var声明的变量，则不会报错。

console.log(b); //undefined
var b = 10;复制代码

2）let 声明的变量存在块级做用域

let声明的变量只在所声明的代码块内有效。块级做用域由 { } 包括，if语句和for语句里面的{ }也属于块做用域

{
    var a = 10;
    let b = 20;  
}
    console.log(a); //10
    console.log(b); // ReferenceError: b is not defined复制代码

var a =[];
for( var i=0; i<10; i++ ){
    a[i] = function(){
        console.log(i);
    }
}

    for( var j = 0; j<a.length; j++ ){
        a[j](); //输出10个10。 由于i是var声明的，在全局范围内都用，每次新的i都会覆盖原来的。
    }复制代码

var a =[];
    for( let i=0; i<10; i++ ){
        a[i] = function(){
            console.log(i);
        }
    }

    for( let j = 0; j<a.length; j++ ){
        a[j](); //输出 0，1，2，...，9
    }复制代码

3）let 不容许在同一做用域内重复声明同一个变量

在同一做用域内，若是使用var声明同一个变量，则后面的覆盖前面的

var a = 10;
let a = 10;

console.log(a);//Uncaught SyntaxError:
Identifier 'a' has already been declared复制代码

或

let a = 10;
let a = 15;

console.log(a);//Uncaught SyntaxError:
Identifier 'a' has already been declared复制代码

4）暂时性死区：在代码块内，使用 let 声明变量以前，该变量都是不能够使用

只要在同一做用域内存在let命令，他所声明的变量就“绑定”在这个做用域内，无论外部有没有声明 

let a =10;
    function fn1(){
        console.log(a);
        let a = 5;
    }

fn1();//Uncaught ReferenceError: a is not defined复制代码

ES6规定，若是在区块中存在let和const声明的变量，则这个区块对这些声明的变量从一开始就造成一个封闭的做用域。无论在外部有没有声明这个变量。必须遵照“先声明，后使用”的原则，不然报错  

ES6规定暂时性死区和不存在变量提高，主要是为了减小运行程序的错误，防止出现“先使用（变量），后声明（变量）”的状况，从而致使意料以外的行为。这种错误在ES5中很常见，如今有了这种规定，就能够避免出现此类错误了  

总之，暂时性死区的本质就是，只要一进入当前做用域，所使用的变量就已存在，可是不可获取，只有等到声明变量的哪一行代码的出现，在能够获取和使用该变量

const命令的基本使用

const用来声明常量，一旦声明，其值就不能更改

const a = 10;
    a = 20;

 console.log(a);//Uncaught TypeError: 
 Assignment to constant variable.复制代码

 1. const声明的常量不能改变，意味着const一旦声明常量，就必须同时初始化。不能先声明，后初始化，这样会报错 

 2. 与let同样。const声明的常量也只在块级做用域内有效 

 3. 与let同样，必须先声明，后使用 

 4. 与let同样，在同一做用域，const不能重复声明同一常量 

那么若是使用const声明对象呢？

const b = {
        name:'zs',
        age:22
    }
b.name = "lzx";

console.log(b.name+"---"+b.age);//输出lzx---22复制代码

咱们能够看到，使用const声明的对象的属性是能够修改。 由于Object类型是引用类型。用const声明常量保存的是对象的地址，不可变的是地址，在上面的代码中就是，不能把 b 指向另外一个对象。而修改对象的属性，并不会改变对象的地址，所以用const声明对象的属性是能够修改的 数组也是引用类型。

8. 事件绑定 addEventListener方法有几个参数，都是什么 最有一个参数表示什么 事件冒泡和事件捕获

默认是事件捕获仍是事件冒泡，true仍是false

项目中用到跨域了吗  ，回答用到了，  跨域有什么方法，  答了jsonp post 代理跨越等

用过代理跨域吗，知道它的具体机制吗，   回答没有用过，不太了解

9. 下面问了几个css的题

css水平垂直居中的方法

元素水平居中：

margin o auto;

元素水平垂直居中

方案

1：position 元素已知宽度

父元素设置为：

position: relative;

子元素设置为：

position: absolute;

距上50%，据左50%，而后减去元素自身宽度的距离就能够实现

方案 2：position transform 元素未知宽度

若是元素未知宽度，只需将上面例子中的

margin: -50px 0 0 -50px;替换为： transform: translate(-50%,-50%);

方案 3：flex布局

<div class="box">
    <div class="content">
    </div>
</div>
<style>
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        display: flex;/*flex布局*/
        justify-content: center;/*使子项目水平居中*/ /*两端对齐，内容居中 */
        align-items: center;/*使子项目垂直居中*/  /*垂直方向：居中 */
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
    }
</style>
复制代码

方案 4：table-cell布局

10. 响应式布局中rem em的区别 哪一个是根据根元素变化的

  rem,em都是顺应不一样网页字体大小展示而产生的

  其中，em是相对其父元素，在实际应用中相对而言会带来不少不便

  而rem是始终相对于html大小，即页面根元素

移动端像素和台式机的不同怎么办  答用视口，使比例为1：1

遇到过响应式布局中1px的border的问题吗 

 答没有 小哥哥说能够了解一下，其中问了逛什么论坛，说在论坛中好好看看，这个问题很值得注意

     响应式项目通常使用百分比布局，可是咱们border会给咱们布局带来麻烦，举个例：

<div class="s">
    <div class="s1">内容1</div>
    <div class="s2">内容2</div>
</div>
<style>
    .s{
        width:800px;
    }
    .s1,.s2{
        float:left;
        width:50%;
        height:200px;
        background:#009;
        border:1px solid red;
    }
</style>复制代码

s是个大容器，它的宽度为800px，里面包含两个子级div，都为float:left;width:50%;试图让这两个div排在同一行上，然而border的加入，使得右边的div[class=‘s2’]换到另一行去了，由于border占据了1px的宽度，因此s1和s2加起来的宽度是400+400+1+1+1+1=804px>800px,因此形成第二个div[class=‘s2’]换行，要想知道为何，首先须要了解float的特性，它老是把一行中最末尾的元素（若是显示须要超出父容器宽度），换到另一行去。

  方法一(outline代替border): outline一样能够设置边框，只不过outline定义的边框在元素内部（不占用元素外的空间），border定义的边框在元素外部（占用元素外的空间），因此一样的边框属性咱们能够这样写outline:1px solid red然而outline老是和上下左右四边框同时存在联系在一块儿，而不像border同样能够定义border-left，border-right等等，因此具备必定的局限性。 最好的办法是第二种(box-sizing): 给s1和s2设置属性box-sizing：border-box；这样不只解决了border的自适应，还解决了padding的自适应，box-sizing语法: 

box-sizing: content-box|border-box|inherit;复制代码

  content-box：元素默认的属性。border,padding宽度和高度分别应用到元素的框内。在宽度和高度以外绘制元素的内边距（padding）和边框（border）。 border-box：为元素设定的宽度和高度为绝对宽度和高度，即不会根据border,padding的影响。就是说，为元素指定的任何内边距（padding）和边框（border）都将在已设定的宽度和高度内进行绘制。经过从已设定的宽度和高度分别减去边框（border）和内边距（padding）才能获得内容的宽度和高度。 inherit：规定应从父元素继承 box-sizing 属性的值，父元素是啥就是啥。

   content-box:content-width = width+padding-left+padding-right+border-left+border-right;

   border-box: content-width = width-padding-left-padding-right-border-left-border-right; 

  方法三： 在网页布局中，除了纵向布局外，还有横向布局，这是两个应用最为普遍的布局模式，然而横向布局又较纵向布局应用更加频繁。普通的横向布局，咱们都是对每一个模块采用固定宽度，而后让它居左浮动起来。这样就能够达到横排的目的。然而这样的布局并不美观，特别是在响应式网页开发中，虽然说能够采用百分比的宽度，但终究仍是会被margin值和padding值和border值影响，从而致使在不一样分辨率下出现右边空缺过大以及折行的现象 解决办法是给它的父级元素设置display的盒模型展现，好比html结构以下：

<div class="flex flex-pack-justify">
<span>模块一</span>
<span>模块二</span>
<span>模块三</span>
<span>模块四</span>
</div>复制代码

css代码以下： 
/* ============================================================ 
flex：定义布局为盒模型 
flex-v：盒模型垂直布局 
flex-1：子元素占据剩余的空间 
flex-align-center：子元素垂直居中 
flex-pack-center：子元素水平居中 
flex-pack-justify：子元素两端对齐 
兼容性：ios 4+、android 2.3+、winphone8+ 
 ============================================================================*/复制代码

11. img标签中title和alt标签的区别，有什么用

alt 属性 ①若是图像没有下载或者加载失败，会用文字来代替图像显示。

这一做用是为了给加载不出网页图片的用户提供图片信息，方便用户浏览网页，也方便程序猿维护网页。② 搜索引擎能够经过这个属性的文字来抓取图片

title 属性 当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字，以对图片信息进行补充性说明。

若是  img 的图片获取不到，怎么设置默认图片 回答不太了解，好像img标签有一个错误事件能够设置， 小哥哥说就是这个

  咱们能够给 img 标签设置一个 onerror 属性，能够在 src 路径不存在时显示指定的默认图片。

<img src="正常图片路径" alt="" onerror="this.src='默认图片路径'">复制代码

12.  href和src的区别

   href是Hypertext Reference的缩写，表示超文本引用。用来创建当前元素和文档之间的连接。经常使用的有：link、a。例如：

<link href="reset.css" rel=”stylesheet“/>复制代码

   浏览器会识别该文档为css文档，并行下载该文档，而且不会中止对当前文档的处理。这也是建议使用link，而不采用@import加载css的缘由。 

   src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。经常使用的有：img、script、iframe。

<script src="script.js"></script>复制代码

当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得缘由。

简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间创建联系。

13. 了解css3吗 回答动画方面吗，小哥哥说不止这方面还有translate、偏移量等  

CSS3有哪些新特性？

1. CSS3实现圆角（border-radius），阴影（box-shadow），

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增长了更多的CSS选择器 多背景 rgba

5. 在CSS3中惟一引入的伪元素是 ::selection.

6. 媒体查询，多栏布局

7. border-image

技术基本就这些，不太会的问题小哥哥会提示一下

hr主要了解了一下学习状况，学校经历等，就是聊了会天，问了一下何时能够实习等

关于vue

1. 看简历写了了解vue回答不精通，只是了解 问了v-if和v-show的区别

相同点：二者都是在判断 dom 节点是否要显示

不一样点：

1）实现方式：v-if 是根据后面数据的真假值判断直接从 dom 树删除或重建元素节点；v-show 只是在修改元素的 css 样式，也就是display的属性值，元素始终在 dom 树上；

2）编译过程：

v-if 切换有一个局部编译/卸载的过程，切换过程当中合适地销毁和重建内部的事件监听和子组件； v-show 只是简单的基于 css 切换；

3）编译条件：

v-if 是惰性的，若是初始值为假，则什么也不作；只有在条件在第一次变为真时才开始局部编译； v-show 是在任何条件下（首次条件是否为真时）都被编译，而后被缓存，并且dom元素始终被保留；

4）性能消耗：

v-if 有更高的切换消耗，不适合作频繁的切换；v-show 有更高的初始渲染消耗，适合作频繁的切换；

v-if 和v-show 在页面第一次渲染时，哪一个比较快

1. 自我介绍

2. 你为何要作这个项目？

  这个问题我有点懵啊 咋回答

3. vue的新特性有哪些?

4. vue双向数据绑定原理？嗯 我想捶死本身。。这么重要的知识点忘了复习，讲的不清楚，减分项吧，不该该的。

5.css和js咋样？答 还行

6.那你给我讲一下 viewport？呃这是视口...嗯对你给我讲一下。。 压根没复习这没讲出来啥

7.那你还有什么问题要问个人吗 ?

8.我终于能够balabla开说了。。讲了做用域 闭包 原型链继承 异步单线程等。。

9.还有吗？ 我答 就还有那些基础知识啊什么的 说实话那种环境下 我确实想不起来我还要说什么，总感受他的问题很奇怪。。

在讲异步单线程的时候提到settimeout

10.settimeout的缺点

  setInterval (函数，时间) 是 无限定时器，做用每隔一段时间后，自动调用该函数，无限次调用；clearinterval(t) 让函数中止；

setTimeout (函数，时间) 是 延时定时器，间隔必定时间调用一次，且只调用一次；clearTimeout(t) 让函数中止；

若是想用延时定时器实现无限次调用，必须在指定的函数内部从新启动一次延时定时器；

两种实现无限次调用的区别：

1. 若是函数的 执行时间 大于 无限定时器setInterval 的调用时间，会形成函数的累积；

2. setTimeout()写在函数的最后，不会形成函数的累积；

对象合并；

两行代码实现数组各元素+1；

实现回文字符串的判断；

对vue框架的理解（假如让你实现框架，要作什么）；