上汽大通内部前端面试题(纯干货)

前端面试题

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项目的开发效率。

原理图:
上汽大通内部前端面试题(纯干货)_第1张图片

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

你可能感兴趣的:(javascript,前端,前端,css,css3)