Web前端笔试面试题汇总（转自github）

 

前言

本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！

面试有几点需注意：

1.面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方     向↑。

2.题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。

3.进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延     展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学         习，绝对不是临时记得住的。

回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）

资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。

前端开发面试知识点大纲：

HTML&CSS：

    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应

JavaScript： 

    数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他：

   HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

前端工程师，必须掌握的知识点：

    1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

    2、DOM操作  ——如何添加、移除、移动、复制、创建和查找节点等。

    3、事件    —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。

    4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

    5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

    6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

    7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

    8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

    9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

    10、JSON  —— 作用、用途、设计结构。

………………

一．HTML&&CSS

1.CSS选择器有哪些？哪些属性可以被继承？

元素选择器、类选择器、 ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类、伪元素......

CSS继承特性主要是指文本方面的继承，常用的例如：font-size , color , font-family , font-weight , text-align , text-indent , line-height 等，都是可以继承的；而关于与盒模型相关的不带继承。

具体：

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

 

2.HTML5为什么只需要写<!DOCTYOE HTML>,作用是什么？

HTML5 不基于 SGML，所以不需要引用 DTD，因此没有声明DTD;

作用：<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。（浏览器获知文档类型）;

(**在 HTML 4.01 中，<!DOCTYPE>声明引用 DTD，因为 HTML 4.01 基于 SGML。

SGML(Standard Generalized Markup Language)，即标准通用标记语言;DTD (Document Type Definition)规定了标记语言的规则，这样浏览器才能正确地呈现内容。**).

3.CSS3中如何实现屏幕的自适应？

（1）添加在HTML页面的元元素<meta>,<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">;

（ 2 ）将CSS中的固定值修改为相对值;

（ 3 ）栅格系统（流式网格布局）;

（ 4 ）CSS3的媒体查询;

 

4.HTML中放入CSS样式的几种方式。

内联样式：style=”属性：属性值;”

内部样式：<style>选择器{属性：值;}</style>

外部样式：<link href="css/style.css" rel="stylesheet" type="text/css">

5.简述如何居中div,如何居中一个浮动的元素，如何让绝对定位的div居中？

绝对定位和浮动的元素居中：知道定位元素本身的宽高的话,例:宽高是300px  position: absolute; left: 50%; top: 50%;  margin：-150px 0 0 -150px;

水平垂直居中：

1 inline-block配合text-align加上table-cell配合vertical-align

.parent{

    display: table-cell;

    vertical-align:middle;

    text-align:center;}

.child{

    display: inline-block;}

2 absolute配合transform

.parent{

    position: relative;}

.child{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%,-50%);}

3.

.parent{

    display: flex;

    justify-content: center;

    align-items: center;}

4. (水平居中)

.div{position: absolute;

  width: 1200px;

  background: none;

  margin: 0 auto;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

}

 

 

#####6.利用CSS实现等高布局

i.左侧宽度的30%背景色为灰色，右侧宽度70%背景色为红色

ii.左侧高度随着右侧高度变化而变化（右侧高度不定）

 

利用padding-bottom|margin-bottom正负值相抵；

设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

<head>

       <meta charset="UTF-8">

       <title>等高布局</title>

       <style type="text/css">

           .container{

              overflow:hidden;

           }

           .left{

              float:left;

              width:30%;

              background-color: #ddd;

              padding-bottom: 2000px;

              margin-bottom: -2000px;

           }

           .right{

              float:left;

              width:70%;

              background-color: #f00;

              padding-bottom: 2000px;

              margin-bottom: -2000px;

           }

       </style>

    </head>

    <body>

       <div class="container">

           <div class="left">lorem</div>

           <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam tenetur facilis possimus, voluptate fugit nesciunt dignissimos libero enim, eligendi aspernatur nam, officia temporibus iure sunt. Error laudantium nam, quam! Quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dignissimos cupiditate omnis. In possimus sequi rem esse expedita quibusdam, eaque laboriosam quo id quos sapiente inventore, temporibus delectus, neque soluta.</div>

       </div>

    </body>

 

7.Margin属性应用。

http://www.zhangxinxu.com/wordpress/?p=48

         (1)控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

         (2).页面上实现css sprite背景定位效果

关于页面上背景定位效果，可以参见我的文章“IE6下png背景不透明问题的综合拓展”有关页面上定位的demo实例页面

(3).在选项卡等边框线的处理

下图显示的是一种比较常见的选项卡样式，旧版的迅雷首页就是这样子的选项卡。

 

我其实已经在图上做了点小小的标注，使用margin-top:-1px;解决选项卡下边框显示的问题。类似的，如果您要用四个div实现5条1像素的左右边框，就像表格一样的效果，就可以使用让每个div都有左右1像素的边框，然后margin-right:-1px;或是margin-left:-1px;让之间的边框重叠，这样就实现了四标签实现5边框的效果了。

(4).图片与文字对齐问题

图片与文字默认是居底对齐了。所以当图片与文字在一起的时候往往都是不对齐的。尤其图片较小时就更加明显了，我看到很多人使用vertical-align:middle;对齐。在火狐下效果是不错，但是IE下，虽然是效果好了些，但还是不够。
如果，图片是个20像素*20像素左右的小图片，文字也差不多12px大，则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽，兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签，支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话，img{margin:0 3px -3px 0;}可以说是公式版的东西，能实现效果和兼容性俱佳的对齐效果。

8.position的应用（属性值以及区别）？

http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html

 

9.Border属性。

 

10. 为什么要进行CSS样式重置。

-因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

 

-当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,

textarea,hr{margin:0;padding:0}

body,button,input,select,textarea{ font:12px/1.5 "宋体",arial, verdana, sans-serif}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}

li{list-style:none}

fieldset,img{border:0}

table{border-collapse:collapse;border-spacing:0}

q:before,q:after{content:”}

button,input,select,textarea{font-size:100%}

legend{color:#000}

small{font-size:12px}

hr{border:none;height:1px}

a{text-decoration:none}

a:hover{text-decoration:underline}

.cle:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.cle{ display:inline-block}

.cle{ display:block}

.clear {clear: both;}

豆瓣上的几种重置模板：https://www.douban.com/note/330400235/

11.a元素target属性规定在何处打开页面上所有链接，请举例说明。

         http://www.doc88.com/p-130783716484.html

1._blank      <a href="document.html" target="_blank">my document</a> 

                  浏览器会另开一个新窗口显示document.html文档   

         2._parent     <a href="document.html" target="_parent">my document</a>      

                  指向父frameset文档   

         3._self       <a href="document.html" target="_self">my document</a>           

                  把文档调入当前页框  

4._top        <a href="document.html" target="_top">my document</a>          

                  去掉所有页框并用document.html取代frameset文档

12.选择器优先级排序（由大到小），写出示例；（标签选择器，ID选择器，类选择器）

ID选择器>类选择器>标签选择器

 

13．样式中:before，:after的作用？

:before，:after是伪元素选择器，定义到元素内容之前，之后要配合content: “ ”;一起使用.

解决问题：1、撑起包含浮动元素的父元素的高度

(1)、指定元素高度

                            (2)、overflow:hidden;

                            (3)、追加空子元素，clear:both

                            (4)、div:after{                           

content:"";

                  display:block;

                   clear:both;

               }

                     2、上外边距溢出问题：

#d2:before{

           content:"";

           display:table;

            }

14. 行内元素有哪些，块级元素有哪些，空元素（单标签）有哪些，请举例说明，每种至少3个？

         行内元素：<a>,<span>,<i>,<em>,<strong>,<label>,<code>,

<img>,<input>,<select>,<textarea>,<button>

块级元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<form>

空元素（单标签）：<br>,<hr>,<img>,<input>,<link>,<meta>

15.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂（兼容）模式呈现。

（2）严格（标准）模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在混杂（兼容）模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

16.页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

17.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

(1)HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加:

 ①绘画 canvas;

 ②用于媒介回放的 video 和 audio 元素;

 ③本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;

 ④语意化更好的内容元素，比如 article、footer、header、nav、section;

 ⑤表单控件，calendar、date、time、email、url、search;

 ⑥新的技术webworker, websocket, Geolocation;

(2)移除的元素：

      纯表现的元素：basefont，big，center，font, s，strike，tt，u;

      对可用性产生负面影响的元素：frame，frameset，noframes；

(3)支持HTML5新标签：

     ①IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。

 ②当然也可以直接使用成熟的框架,比如html5shiv;可以把HTML5的新元素转换成IE6认识的内容。只需要在你的head中调用这段代码就行：

<!--if lt IE 9]>
　　       <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
　　<![endif]-->

 

(4)如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

18.简述一下你对HTML语义化的理解？

1.用正确的标签做正确的事情。

2.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

3.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

19.HTML5的离线储存怎么使用，工作原理能不能解释一下？

https://segmentfault.com/a/1190000000732617

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

使用：

如何使用：

1、页面头部像下面一样加入一个manifest的属性；

2、在cache.manifest文件的编写离线存储的资源；

CACHE MANIFEST

    #v0.11

    CACHE:

    js/app.js

    css/style.css

    NETWORK:

    resourse/logo.png

    FALLBACK:

    / /offline.html

3、在离线状态时，操作window.applicationCache进行需求实现。

20.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

https://segmentfault.com/a/1190000000732617

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。

21.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

 

22.iframe有哪些缺点？

(1)iframe会阻塞主页面的Onload事件；

(2)搜索引擎的检索程序无法解读这种页面，不利于SEO;

(3)iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值。

 

 

 

 

23.label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

(1)

<label for="Name">Number:</label>

<input type=“text“name="userName" id="Name"/>

(2)

<label>Date:<input type="text" name="B"/></label>

24.HTML5的form如何关闭自动完成功能？

给不想要提示的 form 或某个 input 设置为 autocomplete=”off ”。

(自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。)

25.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；

（3）区  别： IE的content部分把 border 和 padding计算了进去;

26.CSS3新增伪类有那些？

 

 

语法

作用

目标伪类

 :target

突出显示活动的html锚元素。

 

元素状态伪类

:enabled

匹配每个已启用元素

:disabled

匹配每个被禁用的元素

:checked

匹配每个被选中的input元素（限于radio和 checkbox）

 

 

结构伪类

:first-child

匹配属于其父元素的首个子元素(td:first-child)

:last-child

匹配属于其父元素的最后一个子元素

:empty

匹配没有子元素的每个元素

:only-child

匹配属于其父元素的唯一子元素

:nth-child(num)

匹配是其父元素中的第 num 个子元素(td:nth-child(2))

否定伪类

:not(selector)

在一组元素中将 满足 selector 选择器的元素排除出去

table td:not(:first-child)

27.display有哪些值？说明他们的作用。

  block         块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

  none          缺省值。象行内元素类型一样显示。

  inline        行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

  inline-block  默认宽度为内容宽度，可以设置宽高，同行显示。

  list-item     象块类型元素一样显示，并添加样式列表标记。

  table         此元素会作为块级表格来显示。

  inherit       规定应该从父元素继承 display 属性的值。

28.position的值有哪些值？

absolute:生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

fixed :(老IE不支持)生成绝对定位的元素，相对于浏览器窗口进行定位。

relative:生成相对定位的元素，相对于其正常位置进行定位。

static:默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

inherit:规定从父元素继承 position 属性的值。

29.CSS3有哪些新特性？

      新增各种CSS选择器  （: not(.input)：所有 class 不是“input”的节点）

  圆角           （border-radius:8px）

  多列布局        （multi-column layout）

  阴影和反射        （Shadow\Reflect）

  文字特效      （text-shadow、）

  文字渲染      （Text-decoration）

  线性渐变      （gradient）

  旋转          （transform）

  增加了旋转,缩放,定位,倾斜,动画，多背景

30.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

https://segmentfault.com/a/1190000003942546

box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome（-webkit）。

31.CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

http://www.webhek.com/visibility-collapse

visibility有第三种值，visibility，hidden，collapse。当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。但是各种浏览器对collapse值的处理方式不一样。

32.使用 CSS 预处理器吗？喜欢那个？

css预处理器也叫动态样式语言，拥有编程的变量、继承、运算、函数的特性，它可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处，常用的有less、sass、stylus。

SASS 和 Compass 指南：http://ruby-china.org/topics/4396

33.CSS优化、提高性能的方法有哪些？

http://www.zhihu.com/question/19886806

1、提高代码性能

　　1、尽量将样式写在单独的css文件里面，在head元素中引用

2、不使用@import

3、避免使用复杂的选择器，层级越少越好

4、精简页面的样式文件，去掉不用的样式

5、利用CSS继承减少代码量

4、提高代码的可维护性

　1、命名与备注

      2、提取重复样式

　3、统一书写顺序

34.浏览器是怎样解析CSS选择器的？

https://segmentfault.com/q/1010000000713509

浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。（从右往左）

35.**抽离样式模块怎么写，说出思路，有无实践经验？

共用模块的样式都抽离出来,作为单独的模块来处理。

36.元素竖向的百分比设定是相对于容器的高度吗？

height属性取值百分比，是现对于容器高度的；

对于margin-top、margin-bottom、padding-top、padding-bottom这些竖直方向的内外边距属性的百分比取值，参考的其实是容器的宽度而不是高低。

37.解释一下em,rem,px这些尺寸单位的不同。

http://www.jianshu.com/p/60ea15164b82

http://www.mamicode.com/info-detail-655497.html

px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的；

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸;（任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了）。

rem相对于根元素HTML的字体尺寸。

38.简述canvas，SVG的区别？

canvas：在网页中实现绘图，主要绘制各种统计图表，柱状图、饼图、曲线图、分布图；以及制作游戏和动画。

SVG：全称为 Scalable Vector Graphics，译为可缩放矢量图形,简称矢量图。是一种用来描述二维矢量图形的 XML 标记语言。

 

SVG

Canvas

不依赖于分辨率

依赖于分辨率

使用DOM及事件处理器（DOM专门为SVG开放接口）

不能使用DOM及事件处理器

不能实现游戏开发

可以实现游戏开发

实现大型渲染区域的应用(例如百度地图)

是以图片(png

39.XHTML和HTML有什么区别？

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

最主要的不同：XHTML的语法较为严谨,

1.元素必须被正确地嵌套。

2.元素必须被关闭。

3.标签名必须用小写字母。

4.XHTML 文档必须拥有根元素。

还有就是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。

40.前端页面有哪三层构成，分别是什么?作用是什么?

网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。搭建文档的结构。

网页的表示层（presentation layer） 由 CSS 负责创建。 设置文档的呈现效果。

网页的行为层（behavior layer）Javascript 语言和 DOM 负责创建。去实现文档的行为。

41.CSS清除浮动的几种方法（至少两种）

使用带clear属性的空元素;

使用CSS的overflow属性；

使用CSS的:after伪元素；

使用邻接元素处理；

42.CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）， 多背景 rgba

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

增加了更多的CSS选择器：

属性选择器：E[foo^="bar"]：匹配foo属性值以"bar"开始的E元素

　　                      E[foo$="bar"]：匹配foo属性值以"bar"结束的E元素

　        　              E[foo*="bar"]：匹配foo属性值包含"bar"的E元素

      结构伪类选择器：

　   E:root：匹配E所在文档的根元素

　　E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

　　E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）

　　E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素

　　E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）

　　E:first-of-type：匹配父元素的第一个类型为E的子元素

　　E:last-child：匹配元素类型为E且是父元素的最后一个子元素

　　E:last-of-type：匹配父元素的最后一个类型为E的子元素

　　E:only-child：匹配元素类型为E且是父元素中唯一的子元素

　　E:only-of-type：匹配父元素中唯一子元素是E的子元素

　　E:empty：匹配不包含子节点(包括文本)的E元素

 

 

 

 

二．JavaScript

1.JavaScript的typeof返回哪些数据类型？

undefined, string,number,boolean,object,function,symbol

①可以判别原始类型，原始数据类型:

undefined, string,number,boolean,symbol

除了null之外，返回object;

eg:  typeof 1 返回结果："number" ;typeof {} 返回结果:"object";

②不能判别具体的对象类型，除了function之外

eg:  typeof [1] 返回结果:"object" typeof function(){} 返回结果:"function";

2.split()和join()的区别？

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

指定分隔符方法join("#");其中#可以是任意；

var a=new Array();

a[0]="XHTML";

a[1]="CSS";

a[2]="JavaScript";

a.join("-->");

"XHTML-->CSS-->JavaScript"

split()方法：用于把一个字符串分割成字符串数组. 

var str="aaa,bbb,ccc,ddd";

str.split(",");

["aaa", "bbb", "ccc", "ddd"]

split，是把一串字符（根据某个分隔符）分成若干个元素存放在一个数组里。而Join是 把数组中的字符串连成一个长串，可以大体上认为是split的逆操作。

3.谈谈This对象的理解。

http://blog.jobbole.com/67347/

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是有一个总原则，那就是this指的是调用函数的那个对象。

this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

4.JS中null和undefined的区别。

www.ruanyifeng.com/blog/2014/03/undefined

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

null表示"没有对象"，即该处不应该有值。典型用法是：

（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。Object.getPrototypeOf(Object.prototype)

// null

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

var i;

i // undefined

function f(x){console.log(x)}f() // undefined

var  o = new Object();

o.p // undefinedvar x = f();

x // undefined

 

5.你对JSON的了解？常见格式。

JSON：JavaScript 对象表示法（JavaScript Object Notation）。

https://segmentfault.com/a/1190000000668072

JSON有两种结构

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构

1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。

2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。

JavaScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的。

6.异步加载JS的方式有哪些？

http://blog.csdn.net/l522703297/article/details/50754695

一：同步加载

我们平时使用的最多的一种方式。

<script src="http://yourdomain.com/script.js"></script>

<script src="http://yourdomain.com/script.js"></script>

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。

二：异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

方法一：也叫Script DOM Element

(function(){

    var scriptEle = document.createElement("script");

    scriptEle.type = "text/javasctipt";

    scriptEle.async = true;

    scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";

    var x = document.getElementsByTagName("head")[0];

    x.insertBefore(scriptEle, x.firstChild);     

 })();

<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码

(function(){;

    var ga = document.createElement('script');

    ga.type = 'text/javascript';

    ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0];

    s.parentNode.insertBefore(ga, s);

})();

但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。

方法二：onload时的异步加载

(function(){

    if(window.attachEvent){

    window.attachEvent("load", asyncLoad);

    }else{

    window.addEventListener("load", asyncLoad);

    }

    var asyncLoad = function(){

    var ga = document.createElement('script');

        ga.type = 'text/javascript';

        ga.async = true;

        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

        var s = document.getElementsByTagName('script')[0];

        s.parentNode.insertBefore(ga, s);

    }

)();

这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。

注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。

方法三：其他方法

由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。

XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。

  //获取XMLHttpRequest对象，考虑兼容性。

    var getXmlHttp = function(){

        var obj;

        if (window.XMLHttpRequest)

            obj = new XMLHttpRequest();

        else

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

        return obj;

    }; 

    //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理

    var xmlHttp = getXmlHttp();

    xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);

    xmlHttp.send();

    xmlHttp.onreadystatechange = function(){

        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){

            var script = document.createElement("script");

            script.text = xmlHttp.responseText;

            document.getElementsByTagName("head")[0].appendChild(script);

        }

    }     

基于jQuery的Ajax：

<script type="text/javascript" src="jquery.js">  

<script type="text/javascript">  

$(document).ready(function() {  

        $.ajax({  

       type: 'GET',  

       url:'test.js',  

       async:true,  //async为true的时候是异步的  

                   dataType,'script'})    //dataType为script的时候已经帮你把返回结果用script类型的dom元素添加到文档中了，如果跨域，POST会转换为GET  

});  

</script>  

分析：使用xmlHttpRequest的动态加载技术，说白了就是ajax，其实就是在上述三种方法的基础上包装上一层ajax而已，同步异步你自己控制，兼容性如何得看你用哪种方法实现了，我给的例子直接使用了jquery库，兼容性非常好，而且你不需要写一堆关于xmlHttpRequest的东西，若你不想用第三方库，那自己百度个手工实现ajax吧。

 

Script In iframe：在父窗口插入一个iframe元素，然后再iframe中执行加载JS的操作。

    var inJS = function(){alert(2)};

    var iframe = document.createElement("iframe");

    document.body.appendChild(iframe);

    var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。

    doc.open();

   doc.write("<script>var inJS=function(){};<\/script><body onload='inJS()'></body>");

    doc.close();

HTML5新特性

defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。

<script type="text/javascript" defer></script>

async属性：HTML5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。

<script type="text/javascript" defer></script>

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer，这样IE 4之后的所有IE都支持异步加载。

没有async属性，script将立即获取（下载）并执行，期间阻塞了浏览器的后续处理。如果有async属性，那么script将被异步下载并执行，同时浏览器继续后续的处理。

总结：对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。

三：延迟加载

有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。

JS的加载分为两个部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载完成后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何需求。

解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？将JS内容作为Image或者Object对象加载缓存起来，所以不会立即执行，然后在第一次需要的时候在执行。

    1：模拟较长的下载时间：

利用thread让其sleep一段时间在执行下载操作。

    2：模拟较长的JS代码执行时间

    var start = Number(new Date());

    while(start + 5000 > Number(new Date())){//执行JS}

这段代码将使JS执行5秒才完成！

JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。

7.Ajax是什么，写一个简单的使用方法。

 Asynchronouse Javascript And XML：异步的JS和XML

 AJAX技术的本质：在用户浏览页面的同时，浏览器底层向服务器发出HTTP请求，并处理服务器返回的响应消息。

 AJAX的典型应用：搜索建议、在线股票、在线聊天室、即时的数据验证、级联下拉列表

简单使用方法：保存数据到服务器，成功时显示信息。

jQuery 代码:

$.ajax({

   type: "POST",

   url: "some.php",

   data: "name=John&location=Boston",

   success: function(msg){

     alert( "Data Saved: " + msg );

   }

});

8.webSocket是干嘛用的？

http://blog.sina.com.cn/s/blog_acddf95d0101beuj.html

WebSocket协议是一种双向通信协议，它建立在TCP之上，同http一样通过TCP来传输数据，但是它和http最大的不同有两点：1.WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据，就像Socket一样，不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议；2.WebSocket需要通过握手连接，类似于TCP它也需要客户端和服务器端进行握手连接，连接成功后才能相互通信。（之前网站的实时通讯技术都是轮询，就是特定的时间，浏览器向服务器发送请求，缺点很占用带宽）

    Websocket实现即时服务好处：

1. header:相互沟通的header是很小的，大概只有2Bytes

                   2. server Prsh:服务器的推送，服务器不在被动的接受浏览器的request之后才返回数据，而是有新数据时就主动推送给浏览器。

 

 

9.Get和Post的区别？数据怎样获取？

(1)GET请求提交的数据在地址栏能看到，POST看不到,get安全性非常低，post安全性较高。

(2)GET请求把请求数据追加在请求URI后面，以?开头；POST请求把请求数据追加在请求主体中

(3)HTTP协议规定：请求消息起始行总长度不能超过1024字节；请求主体长度没有限制。GET请求提交的数据或是汉字一般也就几十个，不超过2kb。post传送的数据量较大，一般被默认为不受限制.

(4)语义不同:get是从服务器上获取数据，post是向服务器传送数据。

10.用JS和jQuery怎样获得元素节点？

JS：document.getElementById(‘idName’);/document.getElementsByTagName(‘标签名’);

jQuery:$.(‘#idName’);/$.(‘标签名’);

 

11.用jQuery如何操作页面，添加样式和属性？

jq.css( name )                     获取样式的值，$('div').css('color');

jq.css( name, value )        设置样式的值，$('div').css('color', 'red');

jq.css( {name:value, name:value} )

jq.addClass( className )                  为选定元素添加一个class

jq.removeClass( className )           为选定元素删除一个class

jq.hasClass( className )                   判断选定元素是否有指定class

jq.toggleClass( className )             切换class：有则删除，无则添加

 

12.JS中的数据类型，尝试画一下内存结构

基本数据类型：null ,undefined ,number ,boolean ,string,symbol(ES6新增)

引用数据类型：object

http://es6.ruanyifeng.com/#docs/symbol

 

13.jQuery绑定事件的方法，不少于2种

(1)bind& unbind：为选定元素绑定特定事件的处理函数

         jq.bind( '事件名',  fn )

(2)one：为选定元素绑定一次事件处理函数

         jq.one( '事件名', fn )

 (3)click / dblclick / mouseover / mouseout .... ： bind()函数的简化

         jq.click( fn )   等价于   jq.bind('click', fn)

         注意：DOM所有事件中，只有一部分(23个事件)有简化版本                 

上述3种方法只能为DOM树已经存在的元素绑定监听函数，无法为后创建的元素绑定监听函数。

（4）delegate( )：子元素委托父元素代理处理自己的事件

         $('父元素').delegate('子元素', '事件名', fn)

                           

（5）live：指定子元素把指定的事件全部委托给document对象——jQuery1.8之后删除了此方法。

                   $(子元素).live('事件名',  fn)

（6）on ：可以实现类似bind / delegate的所有功能

         类似bind的使用方法（把监听函数绑定在事件源上）：

                   $('子元素').on('事件名', fn)

         类似delegate的使用方法（把监听函数委托在父元素上）：

                   $('父元素').on('事件名', '子元素', fn)

                            fn中的this 指的是子元素

 

#####14. 有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段js程序提取URL中的各个GET参数（参数名和参数个数不确定），将其按key-value形式返回到一个json结构中，如{a:’1’,b:’2’,c:’’,d:’XXX’,e:undefined}

function serilizeUrl(url) {

    var result = {};

    url = url.split("?")[1];

    console.log(url);//a=1&b=2&c=&d=xxx&e

    var map = url.split("&");

    console.log(map);//["a=1", "b=2", "c=", "d=xxx", "e"]

    for(var i=0;i<map.length;i++) {

        result[map[i].split("=")[0]] = map[i].split("=")[1];

    }

    return result;

}

var url='http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';

console.log(serilizeUrl(url));//Object {a: "1", b: "2", c: "", d: "xxx", e: undefined}

#####15.现有数组对象[{obj:{name:”jhon”}},{obj:{sex:”nan”}}],用js实现转换json格式{obj:{name:”jhon”,sex:”nan”}}.

        var arr=[{obj:{name:"jhon"}},{obj:{sex:"nan"}}];

    //-->{obj:{name:”jhon”,sex:”nan”}}

    var obj1={}

    for(var i=0;i<arr.length;i++){

       for(var k in arr[i].obj){

           obj1[k]=arr[i].obj[k];

       }

    }

    for( var k in arr[0]){

       var jsonObj={};

       jsonObj[k]=obj1;

       console.log(JSON.stringify(jsonObj));//{"obj":{"name":"jhon","sex":"nan"}}

    }

16.什么是闭包，闭包有什么用？请举例说明.

闭包就是：外层函数将内层函数封装受保护的局部变量返回到外部。实现可重用的局部变量，且保护其不受污染。

闭包的特性： 1.函数内再嵌套函数;2.内部函数可以引用外层的参数和变量;3.参数和变量不会被垃圾回收机制回收.

function foo() {

       var a = 1;

       function bar() {

           a = a + 1;

           alert(a);

       }

       return bar;

    }

    var closure = foo(); // 这个时候返回的是 bar() 这个函数外加其包上的变量 a;

    console.log(closure);

    var closure2 = foo(); // 这里同样生成了另外一个闭包(实例)

    console.log(closure2);

    closure(); // 2

    closure2(); // 2 , 绑定了另外一份变量 a

    closure(); // 3

    closure2(); //3

 

17.写一个数组去重的方法。

         (1) 构建一个新的数组存放结果;for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比;若结果数组中没有该元素，则存到结果数组中.

        Array.prototype.unique1 = function(){

       var res = [this[0]];

       for(var i = 1; i < this.length; i++){

           var repeat = false;

           for(var j = 0; j < res.length; j++){

             if(this[i] === res[j]){

              repeat = true;

              break;

              }

           }

             if(!repeat){

              res.push(this[i]);

             }

        }

       return res;

    }

    var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]

    console.log(arr.unique1());

(2) 先将原数组进行排序;检查原数组中的第i个元素与结果数组中的最后一个元素是否相同，因为已经排序，所以重复元素会在相邻位置;如果不相同，则将该元素存入结果数组中.

        Array.prototype.unique2 = function(){

        this.sort(); //先排序

        var res = [this[0]];

        for(var i = 1; i < this.length; i++){

           if(this[i] !== res[res.length - 1]){

            res.push(this[i]);

           }

        }

        return res;

    }

var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0]

console.log(arr.unique2());//[0, 1, "a", "b", "d", "e"]

    这种方法也会有一定的局限性，因为在去重前进行了排序，所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重，那这种方法便不可取了

(3).创建一个新的数组存放结果;创建一个空对象;for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。

说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。

                  Array.prototype.unique3 = function(){

        var res = [];

        var json = {};

        for(var i = 0; i < this.length; i++){

           if(!json[this[i]]){

              res.push(this[i]);

              json[this[i]] = 1;

            }

        }

        console.log(json);//Object {34: 1, 112: 1, 你好: 1, str: 1, str1: 1}

        return res;

    }

    var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];

    console.log(arr.unique3());//[112, 34, "你好", "str", "str1"];

18.如何实现浏览器内多个标签页之间的通信?

WebSocket、SharedWorker；

也可以调用localStorge、cookies等本地存储方式；

localStorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件window.onstorage = function(){ localStrorage存储的内容发生改变 } ，我们通过监听事件，控制它的值来进行页面信息通信；

a.html

// 设 location.href 为 [http://xxx/a.html]

// 两种方法设置 localStorage

localStorage['location.href'] = location.href;

localStorage.setItem('location.href', location.href);

b.html

// 设 location.href 为 [http://xxx/xxx/b.html]

// 两种方法获取 localStorage

console.info(localStorage['location.href']);

console.info(localStorage.getItem('location.href'));

// 输出 http://xxx/a.html

注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

19.网页中的事件总结

http://blog.csdn.net/qx1995318/article/details/51921736

Html事件列表

一般事件:

onClick: 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击

onDblClick: 鼠标双击事件

onMouseDown: 鼠标上的按钮被按下了

onMouseUp: 鼠标按下后，松开时激发的事件

onMouseOver: 当鼠标移动到某对象范围的上方时触发的事件

onMouseMove: 鼠标移动时触发的事件

onMouseOut: 当鼠标离开某对象范围时触发的事件

onKeyPress: 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]

onKeyDown: 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]

onKeyUp: 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

 

页面相关事件:

onAbort: 图片在下载时被用户中断

onBeforeUnload: 当前页面的内容将要被改变时触发的事件

onError: 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误

onLoad: 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成

onMove: 浏览器的窗口被移动时触发的事件

onResize: 当浏览器的窗口大小被改变时触发的事件

onScroll: 浏览器的滚动条位置发生变化时触发的事件

onStop: 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断

onUnload: 当前页面将被改变时触发的事件

 

表单相关事件:

onBlur: 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]

onChange: 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]

onFocus: 当某个元素获得焦点时触发的事件

onReset: 当表单中RESET的属性被激发时触发的事件

onSubmit: 一个表单被递交时触发的事件

 

滚动字幕事件:

onBounce: 在Marquee内的内容移动至Marquee显示范围之外时触发的事件

onFinish: 当Marquee元素完成需要显示的内容后触发的事件

onStart: 当Marquee元素开始显示内容时触发的事件

 

编辑事件:

onBeforeCopy:当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件

onBeforeCut: 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件

onBeforeEditFocus: 当前元素将要进入编辑状态

onBeforePaste: 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件

onBeforeUpdate: 当浏览者粘贴系统剪贴板中的内容时通知目标对象

onContextMenu: 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu="return false"就可禁止使用鼠标右键了]

onCopy: 当页面当前的被选择内容被复制后触发的事件

onCut: 当页面当前的被选择内容被剪切时触发的事件

onDrag: 当某个对象被拖动时触发的事件 [活动事件]

onDragDrop: 一个外部对象被鼠标拖进当前窗口或者帧

onDragEnd:当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了

onDragEnter: 当对象被鼠标拖动的对象进入其容器范围内时触发的事件

onDragLeave: 当对象被鼠标拖动的对象离开其容器范围内时触发的事件

onDragOver: 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]

onDragStart: 当某对象将被拖动时触发的事件

onDrop: 在一个拖动过程中，释放鼠标键时触发的事件

onLoseCapture: 当元素失去鼠标移动所形成的选择焦点时触发的事件

onPaste: 当内容被粘贴时触发的事件

onSelect: 当文本内容被选择时的事件

onSelectStart:当文本内容选择将开始发生时触发的事件

 

数据绑定:

onAfterUpdate : 当数据完成由数据源到对象的传送时触发的事件

onCellChange:当数据来源发生变化时

onDataAvailable: 当数据接收完成时触发事件

onDatasetChanged: 数据在数据源发生变化时触发的事件

onDatasetComplete: 当来子数据源的全部有效数据读取完毕时触发的事件

onErrorUpdate: 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件

onRowEnter:当前数据源的数据发生变化并且有新的有效数据时触发的事件

onRowExit:当前数据源的数据将要发生变化时触发的事件

onRowsDelete: 当前数据记录将被删除时触发的事件

onRowsInserted: 当前数据源将要插入新数据记录时触发的事件

 

外部事件:

onAfterPrint: 当文档被打印后触发的事件

onBeforePrint: 当文档即将打印时触发的事件

onFilterChange: 当某个对象的滤镜效果发生变化时触发的事件

onHelp: 当浏览者按下F1或者浏览器的帮助选择时触发的事件

onPropertyChange: 当对象的属性之一发生变化时触发的事件

onReadyStateChange: 当对象的初始化属性值发生变化时触发的事件

20.查看以下代码

var a=document.getElementById("d1");

a.onclick=fun1;

a.onclick=fun2;

对象a被绑定的点击事件将执行的函数(fun1,fun2为函数)是什么？

 

<a href="#" id="d1">1111111111111111</a>

    <script>

    var a=document.getElementById("d1");

    a.onclick=fun1;

    a.onclick=fun2;

    function fun1(){

       a.innerHTML="222222";

       console.log(22222);

    }

    function fun2(){

       a.innerHTML="33333";

       console.log(33333);

    }

    </script>

a对象被点击后执行的是fun2;

#####21.在javascript中==和===的区别?分别说出以下返回的布尔值

false==’false’;false==0;false===0;0==’’;’’===0;0==’0’;0===’0’;

 

==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase。

false==’false’;//false

false==0;//true

false===0;//false

0==’’;//true

’’===0;//false

0==’0’;//true

0===’0’;//false

22.核心DOM与HTML DOM的区别？

http://www.wtoutiao.com/p/1f4LxOv.html

（1）核心DOM：遍历DOM树、添加新节点、删除节点、修改节点，核心DOM适合操作节点，如创建，删除，查找等。（对象：Document,Node,   ElementNode,TextNode,AttributeNode，CommentNode,NodeList ）

（2）HTML DOM：以一种简便的方法访问DOM树，HTML DOM适合操作属性，如读取或修改属性的值。（对象：image,Table,Form,Input,Select...HTML标签对象化）

HTML DOM是核心DOM的一种简化。

 

23.列举三种强制转换和两种隐式转换的方式。

强制转换：Numble();Boolean();ParseInt();

隐式转换：字符串+数字，==比较

24.写一个方法，让b继承a的方法。

function a(){

       console.log('aaa');

    }

    a.prototype={

       aa:function(){

           console.log('AAAAA');

       }

    }

    function b(){

       console.log("bbb");

       a.apply(this,arguments);

    }

    // b.prototype=a.prototype;

    Object.setPrototypeOf(b.prototype,a.prototype);

    var bb=new b;

    bb.aa();

#####25.写出以下代码依次输出的结果：__,__,__,__;

var a=10;

sayHi();

function sayHi(){

  var a=a+10;

  alert(a);

  return a;

}

alert(a);

alert(sayHi()+10);

NaN,10,NaN,NaN;

26.简单区分数组方法pop() push() unshift() shift()。

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

27.call和apply的区别？

http://www.cnblogs.com/fighting_cp/archive/2010/09/20/1831844.html

方法传递的参数不同：

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

28.事件委托是什么？

利用事件冒泡的原理，让自己的所触发的事件，由他的父元素代替执行！

29.如何阻止事件冒泡和默认事件

功能:停止事件冒泡

function stopBubble(e) {

    // 如果提供了事件对象，则这是一个非IE浏览器

    if ( e && e.stopPropagation ) {

        // 因此它支持W3C的stopPropagation()方法

        e.stopPropagation();

    }else{

        // 否则，我们需要使用IE的方式来取消事件冒泡

 

        window.event.cancelBubble = true;

    }

}

功能：阻止事件默认行为

function stopDefault( e ) {

   // 阻止默认浏览器动作(W3C)

     if ( e && e.preventDefault ) {

         e.preventDefault();

     } else {

        // IE中阻止函数器默认动作的方式

        window.event.returnValue = false;

    }

    return false;

}

30.介绍js有哪些内置对象？

http://www.jb51.net/w3school/js/js_reference.htm

http://www.cnblogs.com/yujon/p/5467576.html

Object 是 JavaScript 中所有对象的父对象

数据封装类对象：Object、Array、Boolean、Number 和 String

其他对象：Function、Arguments、Math、Date、RegExp、Error

31.说几条写JavaScript的基本规范

http://www.cnblogs.com/luoting/archive/2013/03/09/2938062.html

1.不要在同一行声明多个变量。

2.使用 ===/!==来比较true/false或者数值

3.使用对象字面量替代new Array这种形式

4.不要使用全局函数。

5.Switch语句必须带有default分支

6.函数不应该有时候有返回值，有时候没有返回值。

7.For循环必须使用大括号

8.If语句必须使用大括号

9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。

32.简述对JavaScript原型，原型链的理解，它们有什么特点？

每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

关系：instance.constructor.prototype = instance.__proto__

特点：

JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内置对象。

    function Func(){}

    Func.prototype.name = "Sean";

    Func.prototype.getInfo = function() {

      return this.name;

    }

    var person = new Func();//现在可以参考var person = Object.create(oldObject);

    console.log(person.getInfo());//它拥有了Func的属性和方法

    //"Sean"

    console.log(Func.prototype);

    // Func { name="Sean", getInfo=function()}

 

 

 

 

33.JavaScript继承的几种实现方式？

function Animal(){

　   this.species = "动物";

}

function Cat(name,color){

    this.name = name;

    this.color = color;

}

1、构造继承

function Cat(name,color){

Animal.apply(this, arguments);

this.name = name;

this.color = color;

}

var cat1 = new Cat("大毛","黄色");

alert(cat1.species); // 动物

2、原型继承

　  Cat.prototype = new Animal();

　　Cat.prototype.constructor = Cat;

　　var cat1 = new Cat("大毛","黄色");

　　alert(cat1.species); // 动物

3、利用空对象作为中介

  var F = function(){};

  F.prototype = Animal.prototype;

  Cat.prototype = new F();

  Cat.prototype.constructor = Cat;

4、拷贝继承

.....

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html

34.写一个duplicator方法，使其实现数组复制并添加到该数组后面，eg:[1,2,3,4].duplicator()---->[1,2,3,4,1,2,3,4].

                     Array.prototype.duplicator=function(){

             

              var newArr=this.concat(this);

              return newArr;

           }

           var arr=[1,2,3,4,5,6];

           var doubleArr=arr.duplicator();

           console.log(doubleArr);//[1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6]

三．其他

1.常见的浏览器内核。

浏览器内核的解析和对比:http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html

 

浏览器内核

浏览器

私有属性前缀

备注

Webkit内核

Safari ,Chrome

-webkit-

Chrome内核:Blink（WebKit的分支）

Gecko内核

Mozilla（常指的是Firefox浏览器）

-moz-

 

Presto内核

Opera

-o-

Opera内核原为：Presto，现为：Blink;

Trident内核

IE浏览器

-ms-

 

 

2.常见的浏览器问题有哪些，如何解决？

(1)png24位的图片在iE6浏览器上出现背景，解决方案是做成png8位.

(2)浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

(3)IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大.浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 10px;}

 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

  渐进识别的方式，从总体中逐渐排除局部。

  首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。

  接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

 css

      .bb{

       background-color:#f1ee18;/*所有识别*/

background-color:#00deff\9; /*IE6、7、8识别*/

      +background-color:#a200ff;/*IE6、7识别*/

      _background-color:#1e0bd1;/*IE6识别*/

      }

(4) IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.

   解决方法:统一通过getAttribute()获取自定义属性.

(5) IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

(6)Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

(7)设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

(8)其他：各种特殊样式的兼容，比如透明度、圆角、阴影等。特殊样式每个浏览器的代码区别很大，所以，只能现查资料通过给不同浏览器写不同的代码来解决。

推荐两个网站：caniuse.com以及html5test.com，大家在使用新技术前，可以在这两个网站上看看浏览器的支持情况

3.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

4.**webSocket如何兼容低浏览器？

http://www.tuicool.com/articles/EF7Nni

http://blog.csdn.net/u011925826/article/details/17532465

 

5. 请简述对前端框架bootstrap栅格系统的认识

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：

1.行（row）必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。

2.使用行（row）在水平方向创建一组列（column）。

3.你的内容应当放置于列（column）内，而且，只有列（column）可以作为行（row）的直接子元素。

4.类似.row ; .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

5.通过设置padding从而创建列（column）之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。

6.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

posted @ 2016-10-23 18:20  夏狐狸  阅读(9252)  评论(0)  编辑  收藏  举报