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

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("接受到数据了")
	}
}

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

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

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

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

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的引用

字符串和数组互转

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).安全性：

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

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

不同点：

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

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

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

4)、作用域不同：sessionStorage在不同的浏览器窗口中不共享，即使是同一个页面，localStorage在所有的同源窗口中是共享的，cookie也是在所有同源的窗口中共享的。

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

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

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

console.log(a); //ReferenceError
let a = 10;

console.log(b); //undefined
var b = 10;

{
    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
    }

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

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

fn1();//Uncaught ReferenceError: a is not defined

const a = 10;
    a = 20;

 console.log(a);//Uncaught TypeError: 
 Assignment to constant variable.

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

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

<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>

<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>

box-sizing: content-box|border-box|inherit;

<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+ 
 ============================================================================*/

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

<link href="reset.css" rel=”stylesheet“/>

<script src="script.js"></script>