Java -- Web前端面试题及答案（需更深入了解）

Web前端方面

1、CSS引入的方式有哪些?

1）外联：<link>标签

2）内联：<style>标签

3）元素内嵌：元素的style属性

2、CSS选择符有哪些?

标签选择符、类选择符、id选择符、组合选择符

3、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

4、”==”和“===”的不同

==只比较值，===比较值和数据类型

5、什么是盒子模型？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

6、$(this) 和 this 关键字在 jQuery 中有何不同？

前者是jQuery对象，使用jQuery方法和属性；后者是JavaScript对象，使用JavaScript方法和属性。

7、jQuery 里的 each() 是什么函数？你是如何使用它的？

each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。

8、$(document).ready() 是个什么函数？为什么要用它？

ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。

1）第一种：

$(document).ready(function(){

});

$(document)把原生的document这个dom对象转换为JQuery对象，转换完成后才能调用ready方法。

ready(fn)表示的是页面结构被加载完毕后执行传入函数fn

2）第二种：

$(function(){

});

当页面加载完毕后执行里面的函数。这一种相对简单，用的最多。

3）window.onload的区别

JQuery中的页面加载完毕事件，表示页面结构被加载完毕；

window.onload表示的是页面被加载完毕；必须等页面中的图片、声音、图像等远程资源被加载完毕后才调用而JQuery中只需要页面架构加载完毕

9、网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？

jQuery 代码：$("div")，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。

10、列举常用的几种jQuery选择器

1）基本选择器：包括id选择器、class选择器和元素选择器。

2）层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。

3）过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素：如属性选择器、表单选择器等等

ID选择器：通过ID获取一个元素

Class选择器：通过类获取元素

标签选择器：通过标签获取元素

通用选择器(*)：获取所有元素

层次选择器：

儿子选择器> 获取下面的子元素

后代选择器 空格 获取下面的后代，包括儿子、孙子等后代

属性选择器：

tag[arrName=”test”] 获取属性名为xxx并且属性的值为test的所有标签

<input type=”checkbox” name=”body”/> 吃饭<br/>

<input type=”checkbox” name=”body”/> 睡觉<br/>

$(“input[name='body']”),表示获取属性名为name并且name属性值body的所有input标签。

11、AJAX应用和传统Web应用有什么不同？

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

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

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

使用场景？

--》登录失败时不跳转页面，注册时提示用户名是否存在，二级联动等等使用场景

13、AJAX的优缺点都有什么？

优点：

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

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

3）可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

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

缺点：

1）不支持浏览器back按钮。

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

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

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

5）不容易调试。

14、简述Ajax的工作原理？

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。

15、请介绍一下XmlHttpRequest对象

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

16.简单说一下HTML，CSS，javaScript在网页开发中的定位？

HTML：超文本标记语言，定义网页的结构

CSS：层叠样式表，用来美化页面

JavaScript：主要用来验证表单，做动态交互(其中AJAX)

17.JS和JQuery的关系

JQuery是一个JS框架，封装了JS的属性和方法，并且增强了JS的功能，让用户使用起来更加方便，

原来使用js是要处理很多兼容性的问题(注册事件)，由于Jquery封装了底层，就不用处理兼容性问题(注册事件等)。

原生的js的dom和事件绑定Ajax等操作非常麻烦，JQuery等装以后非常方便。

18.JQuery的AJAX和原生js实现有什么关系

JQuery中的AJAX也是通过原生的js封装的,封装完成后让我们使用更加便利，不用考虑底层实现和兼容性等处理。

如果采用原生js实现AJAX是非常麻烦的，并且每次都是一样的，如果我们不使用JQuery，我们也要封装ajax对象的方法和属性，有像jquery这些已经封装完成，并且经过很多企业实际的框架，比较可靠并且开源，我们就不需要等装，直接使用成熟的框架(jquery)即可；

19.简单说一下html5？你对哪些现在哪些新技术有了解

html5是最新版本的html，是在原来html4的基础上增强类一些标签。

html5增加了一些像画板、声音、视频、web存储方面等高级功能，但是html5有一个不好的地方，那就是html5太强调语义了，导致开发者都不知道要选择哪个标签。在页面布局时，无论头部、主体、导航等模块都使用div来表示，但是html5的规范，需要使用不同不同的标签。(header,footer)

你对新技术有哪些了解：html5 css3。

20.简单说一下css3。

css3是最新版本的css，是对原来的css2的功能增强

css3中提供一些css2中实现起来比较困难或者不能实现的功能。

1）盒子圆角边框

2）盒子和文字的阴影

3）渐变

4）装换、移动、缩放、旋转等

5）过渡、动画都可以使用动画

6）可以使用媒体查询实现响应式网站

css3最大的缺点就是要根据不同的浏览器处理兼容性，对应有一些处理兼容性的工具，不用担心

21.bootstrap是什么

bootstrap是一个移动设备优先的UI框架，我们可以不用写任何css、js代码就能实现比较漂亮的有交互性的页面，我们程序员对页面的编写是有硬伤的，所有要自己写页面的话就要使用类似于bootstrap这样的UI框架

平时用的很多：

1）模态框

2）表单、表单项

3）布局

4）删格系统

22.请描述一下cookie，sessionStorage和localStorage的区别？

答：cookies兼容所有的浏览器，Html5提供的storage存储方式。

•       Document.cookie

•       Window.localstorage

•       Window.sessionstorage

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

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

23.如何区分静态页面和动态页面？

答：要区分这两个，最简单的方法就是看后缀了，动态网页网址中有两个标志性的符号“?”和“&”（有的可能没有&），这个问号和&就是用来带参数的。

现在几乎爱所有的网页都是动态网页。