上汽大通内部前端面试题（纯干货）

前端面试题

1.css flex弹性布局 以下常用属性可以随机挑一二个问

flex-direction : 属性决定主轴的方向（即容器的排列方向）

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap: 默认情况下，项目都排在一条线（又称"轴线"）上。如果一条轴线排不下，如何换行

nowrap（默认）：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方。

flex-flow 属性是上述flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content 属性定义了项目在主轴上的对齐方式。

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 属性定义项目在交叉轴上如何对齐。

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
                 
flex-grow     属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink   属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

2.cookie localstorage sessionstorage区别

相同点: 都保存在浏览器端，且是同源的（浏览器同源：域名、协议、端口号相同）

不同点

存储大小的不同：

localStorage的大小一般为5M

sessionStorage的大小一般为5M

cookies的大小一般为4K



有效期不同：

localStorage的有效期为永久有效，除非你进行手动删除。

sessionStorage在当前会话下有效，关闭页面或者浏览器时会被清空。

cookies在设置的有效之前有效，当超过有效期便会失效。

 

localStorage和sessionStorage的作用域的区别

不同浏览器无法共享localStorage或sessionStorage中的信息。

相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），
但是不同页面或标签页间无法共享sessionStorage的信息。

3.Vue生命周期

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

第一次页面加载会触发 beforeCreate, created, beforeMount, mounted

beforeCreate（创建前） 在数据观测和初始化事件还未开始

created（创建后） 
完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount（载入前） 
在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，
把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后） 
在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。
实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。
完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前）
 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。
 可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后） 
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。
调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，
应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

4.Vue状态管理

定义和使用场景 : Vuex是通过全局注入store对象，来实现组件间的状态共享。
在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，
这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可

Vuex采用MVC模式中的Model层，规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。
再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，
可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。

在当前前端的spa模块化项目中不可避免的是某些变量需要在全局范围内引用，此时父子组件的传值，
子父组件间的传值，兄弟组件间的传值成了我们需要解决的问题。
虽然vue中提供了props（父传子）commit（子传父）兄弟间也可以用localstorage和sessionstorage。
但是这种方式在项目开发中带来的问题比他解决的问题（难管理，难维护，代码复杂，安全性低）更多。
vuex的诞生也是为了解决这些问题，从而大大提高我们vue项目的开发效率。

原理图：

5.Vue如何缓存组件

keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，
它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。

它提供了include与exclude两个属性，允许组件有条件地进行缓存。



  



将缓存name为componentName的组件。

 



  



反之，exclude 则不会缓存该组件

 

keep-alive的两个钩子函数: activated与deactivated。用处 => 因为keep-alive会将组件保存在内存中，
并不会销毁以及重新创建，所以不会重新调用组件的created等方法，
需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

6.Vue父子组件间如何通信

父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息，
即 prop 向下传递，事件向上传递。

7.translate transform transition区别

transform 和 translate

transform指变换、变形，是css3的一个属性，和其他width，height属性一样

translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，
元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少

例如：

transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离

transform：translate(-20px,0) 表示从元素的当前位置延x轴方向，向左移动20px

transform 有很多其它属性值，translate3D（3D变换）,scale（2D缩放）等其他的变换方式。

transition 

transition  在一定时间之内，一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果，css3的属性

语法 transition：需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行

transition属性写在最初的样式里，而不是放在结束的样式里，即定义动画开始之前的元素外观的样式。
只需要给元素设置一次transition，浏览器就会负责以动画展示从一个样式到另一个样式。

例如：

transition:width 2s;

transition:translate 2s;

transtion:all 2s。

html/css部分

1、html和xhtml有什么区别?
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的标记语言。
1.XHTML 元素必须被正确地嵌套。
2.XHTML 元素必须被关闭。
3.标签名必须用小写字母。
4.空标签也必须被关闭。
5.XHTML 文档必须拥有根元素。
2、CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、

后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [ id > class > tag ]      !important 比内联优先级高

3、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
div：

border: 1px solid red;

margin: 0 auto; 

height: 50px;

width: 80px;

 

浮动元素的上下左右居中：

border: 1px solid red;

float: left;

position: absolute;

width: 200px;

height: 100px;

left: 50%;

top: 50%;

margin: -50px 0 0 -100px;

 

绝对定位的左右居中：

border: 1px solid black;

position: absolute;

width: 200px;

height: 100px;

margin: 0 auto;

left: 0;

right: 0;



还有更加优雅的居中方式就是用flexbox

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

5、html5有哪些新特性、移除了那些元素？
(1）拖拽释放(Drag and drop) API

(2)  语义化更好的内容标签

（header,nav,footer,aside,article,section）

(3）音频、视频API(audio,video)

(4）画布(Canvas) API

(5）地理(Geolocation) API

(6）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

(7）sessionStorage 的数据在浏览器关闭后自动删除

(8）表单控件，calendar、date、time、email、url、search  

(9） 新的技术webworker, websocket, Geolocation

 

移除的元素：

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

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

6、你有哪些性能优化的方法？
(1) 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip， CDN托管，data缓存 ，图片服务器。

(2) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，
不用请求，减少请求次数

(3) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

(4) 当需要设置的样式很多时设置className而不是直接操作style。

(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

(6) 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

(7) 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

(8) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
7、经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
 

(1) 在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，
发现字体小于12，可直接作为图片使用 

(2) a标签对里不能嵌套a标签对 

(3) 若给a标签内的内容样式加上样式，需要设置display:block;（在IE中如果设置宽高会自动变成块，在FF中则不会），
但如果设置了float属性，就不需要设置display:block。 

(4) ul，ol在FF默认情况下，有list-style-type样式和padding值，dl在IE和FF默认情况下，
有padding值，所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。 

(5) 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应 

(6) 关于手形光标. cursor: pointer. 而hand 只适用于 IE. 

(7) css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；
对于IE这样设定就已经可以了。但在mozilla中不能居中。 

解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是，
如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里， 

你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。 

(8) 浮动ie产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离，
这时需要设置display:inline; //使浮动忽略 

(9) 透明度：IE:filter:alpha(opacity=100) 非IE：opacity：1 

(10) IE行间自定义属性有效，非IE无效。 

中级题目（共5题）：

1、请用Css写一个简单的幻灯片效果页面，要用css3。使用animation动画实现一个简单的幻灯片效果。 

2、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
 

1)图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，
如果前者小于后者，优先加载。

2)如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

3)如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

4)如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

5)如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

3、sessionStorage和localstroage与cookie之间有什么关联, cookie最大存放多少字节
三者共同点：都是保存在浏览器端，且同源的。

区别:
1、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

2、存储大小限制也不同，cookie数据不能超过4k，sessionStorage和localStorage 但比cookie大得多，可以达到5M

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

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

4、用纯CSS创建一个三角形的原理是什么？


把上、左、右三条边隐藏掉（颜色设为 transparent） #demo { width: 0; height: 0; border-width: 20px;
 border-style: solid; border-color: transparent transparent red transparent; }

一个满屏 品 字布局 如何设计?

简单的方式： 上面的div宽100%， 下面的两个div分别宽50%， 然后用float或者inline使	其不换行即可

5、disabled readyonly的区别?

readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，
当表单元素在使用了disabled后，当我们将表单以POST	或GET的方式提交的话，这个元素的	值不会被传递出去，
而readonly会将该值	传递出去。

笔试题

单选题：

1、firebug的调试日志命令（A）

 console.log()
 console.alert()
 console.show()
 console.msg ()

2、请选择结果为真的表达式：（A）

 A、null instanceof Object

 B、null ===undefined

C、NaN===NaN

D、null====undefined

3、下列的那一个表达式将返回假（D）

A、 ！（3<=1）

B、 （2<3）‖(3<2)

C、”a”==”a”)&&(“c”!=”d”)

D、（4>=4）&&(5<=2)

4、码中没有明确初始化，变量和参数的默认值是什么？（D）

A、””

B、多个答案是正确的

C、null

D、undefined

5、面的例子中，元素在总宽度是多少？（B）

div.elem{

Windth：200px；

Padding：10px；

Border：2px solid gray;

Margin:8px;}



A、21px

B、220px

C、230px

 240px

6、uery对象鱼DOM对象的转换（B）

 S（”#id”）等同 document.getElementByld（”id”）
 S（”#id”）[0]等同 document.getElementByld（”id”）
 S（”#id”）.get[0]等同 document.getElementByld（”id”）
 S（”#id”）.get()等同 document.getElementByld（”id”）

7、 关于fn.call（obj，paramliet）函数的说法，错误的是？（B）

 使用call可以使fn中的this指针向obj
 paramList必须是一个数组
 obj必须是一个对象
 fn必须是一个函数

8、下列对javascript语言的叙述，错误的是（B）

 javascript语言不支持多线程
 javascript语言不支持面向过程编程
 javascript语言不能进行图形绘制
 javascript语言不能操作数据库

9、 $.get(E)方法的返回值是什么样的对象？

 response对象的状态
 response对象的内容
 用于创建一个request的XMLHttpRequest对象
 以上都不是
 包含response对象的状态和内容的结构
 当触发$.get()时，无对象返回

10、下列对with(obj){}的叙述正确的是（A）

 使用with语句会把obj的对象添加到花括号所在的作用域链的首部
 With语句用在对控件的大批量属性设置上不是很好
 With语句的执行效率非常高
 With语句会降低javascnpt的可读性

判断题

1、在JavaScripc中false===0的结果是false。（对）

2、onreset事件发生时，页面重新加载。（对）

3、SPAN是inline元素，内嵌在DHTML机构中，默认不换行（对）

4、一个多框架的窗口对象在location属性显示的是子窗口的URL(错)

5、当background-color与background-image都被设点了时，background-image将覆盖background。。（对）

6、clear属性对于currentStyle对象而言是只读的。对于其他对象而言是可读写的（对）

7、定义了全局变量g，可以用window，g的方式来存取读变量。（对）

8、对于HTML中的onfirm()方法，在调用confirm（）时，将暂停对JavaScripc代码的执行，在用户做出响应。。。（对）

9、下面条件判断为真吗？（错）

Var b= new Boolean（false）；

If（b）

10、样式中使用tr：hover可以实现悬停的效果。（错）

简答题：

1、行内元素和块级元素?img 属于哪种?行内元素怎么转化为块级元素?

行内元素:和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的 宽度不可改变，
只能容纳文本或者其他行内元素;其中 img 是行元素 块级元素:总是在新行上开始，高度、行高及外边距和内边距都可控制，
可以容纳内敛元素 和其他元素;行元素转换为块级元素方式:display:block; 

2、将多个元素设置为同一行?清除浮动有几种方式?

将多个元素设置为同一行:float，inline-block
清除浮动的方式:

方法一:添加新的元素 、应用 clear:both;

方法二:父级 div 定义 overflow: hidden;方法三:利用:after 和:before 来在元素内部插入两个元素块，
从面达到清除浮动的效果。
 .clear{zoom:1;} .clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} 

3、link import 两者之间区别?

(1)@important 只能加载 css 

(2)加载顺序的差别，最后加载 import 

(3)兼容性的差别，老浏览器不兼容

(4)使用 dom 控制样式的差别 

4、简单说下transform?animation?区别?animation-duration

Transform:它和 width、left 一样，定义了元素很多静态样式实现变形、旋转、缩放、 移位及透视等功能，
通过一系列功能的组合我们可以实现很炫酷的静态效果(非动画)。 

Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，
它本身被用来替代 一些纯粹表现的 javascript 代码而实现动画,可以通过 keyframe 显式控制当前帧的属性值. 

animation-duration:规定完成动画所花费的时间，以秒或毫秒计。

5、一般做手机页面切图有几种方式?

答:三种。响应式布局，弹性布局 display:flex，利用 js 编写设定比例，给根元素设定像 素，使用 rem 为单位。

6、px/em/rem 有什么区别? 为什么通常给 font-size 设置的字体为 62.5%

答:px 像素是相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

em 是相对长度 单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，
则相对于浏览器的默认字体尺寸。1、em 的值并不是固定的;2、em 会继承父级元素的字体 大小。

使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。 
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比 例地调整所有字体大小，
又可以避免字体大小逐层复合的连锁反应。rem 是相对于浏览器进行缩放的。

1rem 默认是 16px，在响应式布局中，一个个除来转换成 rem，太麻烦，所以重置 rem body{font-size=62.5% } 此时 1rem = 10px;
若是 12px 则是 1.2rem.

7、CSS3 有哪些新特性? HTML5 标准提供了哪些新的API？

CSS3 实现圆角(border-radius)，阴影(box-shadow)， 对文字加特效(text-shadow、)，线性渐变(gradient)，
旋转(transform) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩 放,定位,倾斜增加了更多的 CSS 选择器 多背景 rgba

H5的新属性：canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。

媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。)



离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存

 

文档编辑，应该是更好的支持对文档的编辑。

 

拖动，可以将文件拖动到某些区域上传

 

跨文档请求，websocket，一种更加高效的通讯方式

 

历史管理，可以通过js管理和插入历史记录

 

MIME头自定义

 

客户端数据存储，localstoage sessionstoage

 

地理位置共享

 

本地数据库

 

索引数据库

8、ajax 的缺点

1、ajax 不支持浏览器 back 按钮。2、安全问题 AJAX 暴露了与服务器交互的细节。
 3、对搜索引擎的支持比较弱。 4、破坏了程序的异常机制。5、不容易调试

9、HTML5 存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：



localStorage - 没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失

sessionStorage - 针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

10、什么是闭包?* 堆栈溢出有什么区别? 内存泄漏? 那些操作会造成内存泄漏?怎么样防 止内存泄漏?

闭包:就是能够读取其他函数内部变量的函数。 

堆栈溢出:就是不顾堆栈中分配的局部数据块大小，向该数据块写入了过多的数据，导致数 据越界，
结果覆盖了别的数据。经常会在递归中发生。 

内存泄露是指:用动态存储分配函数内存空间，在使用完毕后未释放，导致一直占据该内存 单元。
直到程序结束。指任何对象在您不再拥有或需要它之后仍然存在。 

造成内存泄漏:setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。 
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时，就会产生一个循环) 防止内存泄露:
1、不要动态绑定事件;
2、不要在动态添加，或者会被动态移除的 dom 上绑事件，用事件冒泡在父容器监听事件; 3、如果要违反上面的原则，
必须提供 destroy 方法，保证移除 dom 后事件也被移除，这点 可以参考 Backbone 的源代码，做的比较好;
4、单例化，少创建 dom，少绑事件。

平时工作中怎么样进行数据交互?如果后台没有提供数据怎么样进行开发?mock 数据与 后台返回的格式不同意怎么办?
由后台编写接口文档、提供数据接口实、前台通过 ajax 访问实现数据交互; 

在没有数据的情况下寻找后台提供静态数据或者自己定义 mock 数据; 返回数据不统一时编写映射文件 对数据进行映射。

代码部分

1、如何显示/隐藏一个DOM元素？

el.style.display = "";

el.style.display = "none";

2、判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

reg.test(“a1a__a1a__a1a__a1a__");

3、截取字符串abcdefg的efg

var str = "abcdefg";

if (/efg/.test(str)) {

     var efg = str.substr(str.indexOf("efg"), 3);

     alert(efg);

}

4、希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)

var checkBoxList = [];

var len = domList.length;　　//缓存到局部变量

while (len--) {　　//使用while的效率会比for循环更高

　　if (domList[len].type == ‘checkbox’) {

    　　checkBoxList.push(domList[len]);

　　}

}

5、看下面代码，给出输出结果。

for(var i=1;i<=3;i++){

  setTimeout(function(){

      console.log(i);    

  },0);  

};

答案：4 4 4。



原因：Javascript事件处理器在线程空闲之前不会运行。再问，如何让上述代码输出1 2 3？

for(var i=1;i<=3;i++){

   setTimeout((function(a){  //改成立即执行函数

       console.log(a);    

   })(i),0) } 

6、javascript面向对象中继承实现

javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：





function Animal(name) {

   this.name = name;

}

 

Animal.prototype.getName = function() {alert(this.name)}

function Dog() {};

Dog.prototype = new Animal("Buddy");

Dog.prototype.constructor = Dog;

var dog = new Dog();

7、编写一个方法 求一个字符串的字节长度

function GetBytes(str){

         var len = str.length;

         var bytes = len;

      for(var i=0; i 255) bytes++;

      }

         return bytes;

}

alert(GetBytes("你好,as"));

8、用js写个原生的ajax过程

window.onload=function(){

document.getElementsByTagName(‘a')[0].onclick=function(){

    var xmlhttp =null;//创建对象

    if (window.XMLHttpRequest){

        var xmlhttp=new XMLHttpRequest();

    }else{

        var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    var method='GET';

    var url=this.href;

    xmlhttp.open(method,url);//初始化请求 



    xmlhttp.send();//发送请求



    xmlhttp.onreadystatechange=function(){//指定回调函数 



        if(xmlhttp.readyState==4){

            if(xmlhttp.status==200||xmlhttp.status==304){

                var txt=xmlhttp.responseText;

                var json=eval('('+txt+')');

                document.getElementById('name').innerHTML='姓名'+json.ruei.name;

                document.getElementById('age').innerHTML='年龄'+json.ruei.age;

                document.getElementById('job').innerHTML='工作'+json.ruei.job;

            }

        }

    }

    return false;

}

}

9、编写一个方法 去掉一个数组的重复元素

var arr = [1 ,1 ,2, 3, 3, 2, 1];

Array.prototype.unique = function(){

         var ret = [];

         var o = {};

         var len = this.length;

         for (var i=0; i

10、原生JS的window.onload与Jquery的

$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？

 

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

 

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

 

var whenReady = (function() {               

var funcs = [];             

var ready = false;          

function handler(e) {

    if(ready) return;      

    if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {

        return;

    }

    for(var i=0; i