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部分：

1、什么是 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 事件

3、为什么要用 ajax，Ajax 应用程序的优势在于：

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

4、AJAX 最大的特点是什么。

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

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

5、请介绍一下 XMLhttprequest 对象。

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

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

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

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

6、AJAX应用和传统Web应用有什么不同。

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

7、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数据或者字符串

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

XMLHttpRequest 对象的 responseXMl 属性

10、 XMLHttpRequest 对象在 IE 和 Firefox 中创建方式有没有不同。

有，IE 中通过 new ActiveXObject() 得到，Firefox 中通过 newXMLHttpRequest() 得到

11、介绍一下 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

12、什么是XML

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

13、XML的解析方式

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

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

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

15、如果熟悉某种ajax框架，他可能会问到怎样在程序中使用这种框架

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

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

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

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

17、介绍一下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 开始被支持。

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

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

AJAX技术基于Javascript和HTTP Request.

19、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都有哪些优点和缺点？

优点：

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

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

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服

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

需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

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

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

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

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

5、不容易调试。

1、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进行了封装，熟悉了基础理论，再学习别的框架就会得心应手，好多都是换汤不换药的内容

2、同步和异步的区别?

同步：阻塞的

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

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

异步：非阻塞的

-张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃

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

3、如何解决跨域问题?

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

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

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

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

5、简述ajax 的过程。

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

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

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

4. 发送HTTP请求

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

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

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

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

2. 通过 ajax 去获取 js 代码，然后通过 eval 执行

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

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

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

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

8*、GET和POST的区别，何时使用POST？

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

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

在以下情况中，请使用 POST 请求：

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

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

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

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

1. 通过异步模式，提升了用户体验

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

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

10、 Ajax的最大的特点是什么。

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

11、ajax的缺点

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

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

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

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

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

get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

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

13、解释jsonp的原理，以及为什么不是真正的ajax

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

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

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

优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验

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

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

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

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

200 - 请求成功

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

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

500 - 内部服务器错误

16、一个页面从输入 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 服务器提供资源服务，客户端开始下载资源。

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

get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

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

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

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

1. 自我介绍

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

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

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

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

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

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

3、在大并发情况下，我可以同时水平扩展前后端服务器，比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。

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

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

6、页面显示的东西再多也不怕，因为是异步加载。

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

8. 增加代码的维护性 & 易读性（前后端耦在一起的代码读起来相当费劲）。

9. 提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。

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

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

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框架的理解（假如让你实现框架，要做什么）；