zoukankan      html  css  js  c++  java
  • 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.如何区分静态页面和动态页面?

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

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

  • 相关阅读:
    uvalive 3971 Assemble
    poj 1064 Cable master
    1130mysql explain中的type列含义和extra列的含义
    1128ORDER BY的原理
    1125Sending data
    1125MySQL Sending data导致查询很慢的问题详细分析
    1125mysqbinlog日志
    1122Shell脚本之利用mysqldump备份MySQL数据库
    1122从业务优化MYSQL
    1122MySQL性能优化之 Nested Loop Join和Block Nested-Loop Join(BNL)
  • 原文地址:https://www.cnblogs.com/lukelook/p/9987280.html
Copyright © 2011-2022 走看看