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。
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