1.对WEB标准以及W3C的理解与认识 center text
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更 多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用 性;
2.xhtml和html有什么区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档
加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug
4.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
5.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 :同时加载
前者无兼容性,后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式,后者不可
6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7.前端页面有哪三层构成,分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
8.css的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10.写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 !Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
9.ie 6 不支持!important
11.img标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
12.描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一
13.解释css sprites,如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量
14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
15.你如何对网站的文件和资源进行优化?期待的解决方案包括:
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16.什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处
17.清除浮动的几种方式,各自的优缺点
1.使用空标签清除浮动 clear:both(理论上能清楚任何标签,,,增加无意义的标签)
2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
3.是用afert伪元素清除浮动(用于非IE浏览器)
18.css hack
_marging \\IE 6
+margin \\IE 7
Marging:0 auto \9 所有Ie
Margin \0 \\IE 8
JavaScript:
1. 介绍一下isNaN函数?
如果参数不是数字类型的话isNaN返回true (函数名称:isnan 函数功能: 判断数组的元素是否是NaN。 )
2. javascript都支持哪些布尔型的操作?
&&, ||和! (&& 逻辑与,|| 逻辑或,!逻辑非)
3. “1″+2+4在javascript中得到什么?
因为“1”是String类型,所以所有的操作数都是String, 结果为124
4. 2+5+”8″得到的结果是什么?
因为2和5是数字类型,8是字符串,所以得到的结果是78
5. javascript有几种loop(循环)方法?
for, while, do-while ,for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
6. javascript如何创建一个新的对象?
var obj = new Object() 或者 var obj = {}
7. 如何为一个对象属性赋值?
obj["age"]=17 或者obj.age=17
8. 如何为一个数组添加一个值?
arr[arr.length]= value;
9.javascript基本数据类型 / javascript中的typeof返回哪些数据类型
Number 类型 、Boolean 类型、Object 类型、String类型、Null、 Undefined 类型 / Object number function boolean undefined string
10.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number) 隐式(== – ===)
11.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除 Unshift()头部添加 shift()头部删除
12.闭包是什么,有什么特性,对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
13.添加 删除 替换 插入到某个接点的方法
obj.appendChild() obj.innersetBefore() obj.replaceChild() obj.removeChild()
14.javascript的本地对象,内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
15.介绍一下eval() 函数
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
16.介绍一下JSON
JSON:JavaScript 对象表示法(JavaScript Object Notation)。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。
17.jQuery UI 与 jquery 的主要区别是:
(1) jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
(2) jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。
(3) jQuery本身注重于后台,没有漂亮的界面,而jQuery UI则补充了前者的不足,他提供了华丽的展示界面,使人更容易接受。既有强大的后台,又有华丽的前台。
html+css:
1.对WEB标准以及W3C的理解与认识:
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.xhtml和html有什么区别:
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
4.前端页面有哪三层构成,分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js
5.写出几种IE6 BUG的解决方法:
[list][*]双边距BUG float引起的 使用display
[*]3像素问题 使用float引起的 使用dislpay:inline -3px
[*]超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
[*]Ie z-index问题 给父级添加position:relative
[*]Png 透明 使用js代码 改
[*]Min-height 最小高度 !Important 解决’
[*]select 在ie6下遮盖 使用iframe嵌套
[*]为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
[/list]6.解释css sprites,如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量
7.你如何对网站的文件和资源进行优化?期待的解决方案包括:
[list][*] 文件合并
[*] 文件最小化/文件压缩
[*] 使用CDN托管
[*] 缓存的使用
[/list]8.清除浮动的几种方式,各自的优缺点:
[list][*]使用空标签清除浮动 clear:both(理论上能清楚任何标签,,,增加无意义的标签)
[*]使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
[*]是用afert伪元素清除浮动(用于非IE浏览器)
[/list]9.浏览器内核
1、Trident内核:IE最先开发或使用的,也称IE内核,360浏览器使用的也是IE内核;
2、Webkit内核:谷歌chrome浏览器最先开发或使用,也叫谷歌内核,枫树浏览器、太阳花使用的也是谷歌内核;
3、Gecko内核: Netscape6开始采用的内核,后来的Mozilla FireFox (火狐浏览器) 也采用了该内核,K-Meleon浏览器也是使用这种内核;
4、Presto内核:目前只有Opera浏览器采用该内核
1.写一下文档声明的格式
html 5的文档声明格式是:
html 4 的文档声明格式
2.块级元素与行内元素的区别;
在标准的文档流里面,块级元素的特点是:
1.独占一行;
2.高度,行高,以及外边距和内边距都可以控制
3.宽度如果没有设定的情况下,始终和浏览器的宽度一样,与内容无关
4.可以容纳内敛元素,和其他块级元素
行内元素的特点:
1.和其他元素都在一行
2.高,行高及外边距,和内边距部分可以改变
3.宽度至于内容有关
4.行内元素只能够容纳文本,或者其他行内元素。如果不转换成块级元素的话,
不可以设置宽高,其宽高随着内容的增加,高度随着字体的大小而改变
内联元素可以设置外边界,但是外边界不对上下起作用,只能够对左右起作用,也可以设置内边界,
但是内边界在ie6中不对上下起作用,只能对左右起作用
3.列举常见的css hack 技巧
css hack 是为了解决不同浏览器对 css 解析结果的不同,而采取的一种措施
css hack 常见的有三种形式; css 属性hack、 css 选择符hack 以及IE条件注释的hack ,hack主要针对的就是IE 浏览器
熟悉级hack:
ie6 能够识别 下划线"_" 和星号"*"
ie7 能够识别"*",不能够识别"_"
IE 6 不能够识别 !important
选择符hack:
1.ie 6能够识别 *html.class{}
ie 7能够识别 *+html.class{}
注释级hack
4.列举一些css 浏览器兼容性问题
1、ie 6 浮动时产生的双倍间距的问题 解决方案, display:inline
display 的两个熟悉 block ,inline 两个元素
block的特点是 总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素)
inline 的特点是,和其他元素在同一行,不可控制(内嵌元素)
#box{ display:block;} //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table; /
2、IE浏览器的宽度和高度的问题, IE不能识别 min-这个定义,但实际上他把正常的width 和height 当做min 的情况
来使用这样的话,就会出现问题,如果只用宽度和高度,正常的浏览器这两个 值就不会变,
如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样: #box{ width: 80px; height: 35px;}
html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
3、div浮动会让IE文本产生 3px 的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的
微博会离左边有 3px 的间距,
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
5. 列举css 3都有哪些新内容
css3 的圆角 border-radius
文字阴影效果; font-effect
多背景图
@font-face , 旋转transform 渐变
6. 提升网页加载速度和网页性能的方法
1.减少http 请求, 网站建设中 过多的图片, css script flash 会增加 内容加载的请求
负担, 因此建议 减少此类元素的使用, 使用css 合并图片 ,避免直接插入原图
2. 使用 gzip 压缩文档 增加网页加载速度,同时也可以降低网站的带宽流量的消耗
3. 设置合理的过期时间, 尽可能 减少cookie 体积 ,能够很好的提高页面的加载效率,对静态页
组件的cookie 读取是一种资源的浪费
4. 减少图片的体积
5. 样式表文件放在外部调用,把页面中需要用到的javascript 和 css 样式表文件 放在另外的文件夹中,
这样一来在打开网站其它页面时就会缓存这些调用的文件,从而加快网站页面的加载速度。
6、 减少域名dns 查找时间
7.如何实现网页在不同设备上进行等比缩放
采取响应式页面布局方式
在网页代码的头部加上 一行 viewport 元标签
8:
alert(typeof(null));//object
alert(typeof(undefined));//undefined
alert(typeof(NaN));//number
alert(NaN==NaN);//false
var str="123abc"; alert(typeof(str++));//number
alert(str);//NaN
10.解析jsonp的原理,以及js 的同源策略
利用在页面中创建
- IE5-8不支持opacity,解决办法:
.opacity {
opacity: 0.4
filter: alpha(opacity=60);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}
- IE6在设置height小于font-size时高度值为font-size,解决办法:font-size: 0;
- IE6不支持PNG透明背景,解决办法: IE6下使用gif图片
- IE6-7不支持display: inline-block解决办法:设置inline并触发hasLayout
display: inline-block;
*display: inline;
*zoom: 1;
- IE6下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍。解决办法: 1)使用padding控制间距。 2)浮动元素display: inline;这样解决问题且无任何副作用:css标准规定浮动元素display:inline会自动调整为block
- 通过为块级元素设置宽度和左右margin为auto时,IE6不能实现水平居中,解决方法:为父元素设置text-align: center;
容器包含若干浮动元素时如何清理(包含)浮动
- 容器元素闭合标签前添加额外元素并设置clear: both
- 父元素触发块级格式化上下文(见块级可视化上下文部分)
- 设置容器元素伪元素进行清理推荐的清理浮动方法
/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
* contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block:可以防止容器和
* 子元素top-margin折叠,这样能使清理效果与BFC,IE6/7
* zoom: 1;一致
**/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {
*zoom: 1;
}
什么是FOUC?如何避免
Flash Of Unstyled Content:用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再从新显示文档,造成页面闪烁。解决方法:把样式表放到文档的head
如何创建块级格式化上下文(block formatting context),BFC有什么用
创建规则:
- 根元素
- 浮动元素(float不是none)
- 绝对定位元素(position取值为absolute或fixed)
- display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
- overflow不是visible的元素
作用:
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻止父子元素的margin折叠
display,float,position的关系
- 如果display为none,那么position和float都不起作用,这种情况下元素不产生框
- 否则,如果position值为absolute或者fixed,框就是绝对定位的,float的计算值为none,display根据下面的表格进行调整。
- 否则,如果float不是none,框是浮动的,display根据下表进行调整
- 否则,如果元素是根元素,display根据下表进行调整
- 其他情况下display的值为指定值 总结起来:绝对定位、浮动、根元素都需要调整display
外边距折叠(collapsing margins)
毗邻的两个或多个margin会合并成一个margin,叫做外边距折叠。规则如下:
- 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
- 浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
- 创建了块级格式化上下文的元素,不会和它的子元素发生margin折叠
- 元素自身的margin-bottom和margin-top相邻时也会折叠
如何确定一个元素的包含块(containing block)
- 根元素的包含块叫做初始包含块,在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin;对于paged media,它的尺寸等于page area。初始包含块的direction属性与根元素相同。
- position为relative或者static的元素,它的包含块由最近的块级(display为block,list-item, table)祖先元素的内容框组成
- 如果元素position为fixed。对于连续媒体,它的包含块为viewport;对于paged media,包含块为page area
- 如果元素position为absolute,它的包含块由祖先元素中最近一个position为relative,absolute或者fixed的元素产生,规则如下:
- 如果祖先元素为行内元素,the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
- 其他情况下包含块由祖先节点的padding edge组成
- 如果找不到定位的祖先元素,包含块为初始包含块
stacking context,布局规则
z轴上的默认层叠顺序如下(从下到上):
- 根元素的边界和背景
- 常规流中的元素按照html中顺序
- 浮动块
- positioned元素按照html中出现顺序
如何创建stacking context:
- 根元素
- z-index不为auto的定位元素
- a flex item with a z-index value other than 'auto'
- opacity小于1的元素
- 在移动端webkit和chrome22+,z-index为auto,position: fixed也将创建新的stacking context
如何水平居中一个元素
- 如果需要居中的元素为常规流中inline元素,为父元素设置text-align: center;即可实现
- 如果需要居中的元素为常规流中block元素,1)为元素设置宽度,2)设置左右margin为auto。3)IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值
aaaaaa aaaaaa a a a a a a a a
body {
background: #DDD;
text-align: center;
}
.content {
width: 500px;
text-align: left;
margin: 0 auto;
background: purple;
}
- 如果需要居中的元素为浮动元素,1)为元素设置宽度,2)position: relative;,3)浮动方向偏移量(left或者right)设置为50%,4)浮动方向上的margin设置为元素宽度一半乘以-1
aaaaaa aaaaaa a a a a a a a a
body {
background: #DDD;
}
.content {
width: 500px;
float: left;
position: relative;
left: 50%;
margin-left: -250px;
}
- 如果需要居中的元素为绝对定位元素,1)为元素设置宽度,2)偏移量设置为50%,3)偏移方向外边距设置为元素宽度一半乘以-1
aaaaaa aaaaaa a a a a a a a a
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
left: 50%;
margin-left: -400px;
}
- 如果需要居中的元素为绝对定位元素,1)为元素设置宽度,2)设置左右偏移量都为0,3)设置左右外边距都为auto
aaaaaa aaaaaa a a a a a a a a
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
}
如何竖直居中一个元素
参考资料:6 Methods For Vertical Centering With CSS。 盘点8种CSS实现垂直居中
- 需要居中元素为单行文本,为包含文本的元素设置大于font-size的line-height:
.text {
line-height: 200px;
}
$javascript概念部分
DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系
- e.getAttribute(),是标准DOM操作文档元素属性的方法,具有通用性可在任意文档上使用,返回元素在源文件中设置的属性
- e.propName通常是在HTML文档中访问特定元素的特性,浏览器解析元素后生成对应对象(如a标签生成HTMLAnchorElement),这些对象的特性会根据特定规则结合属性设置得到,对于没有对应特性的属性,只能使用getAttribute进行访问
- e.getAttribute()返回值是源文件中设置的值,类型是字符串或者null(有的实现返回"")
- e.propName返回值可能是字符串、布尔值、对象、undefined等
- 大部分attribute与property是一一对应关系,修改其中一个会影响另一个,如id,title等属性
- 一些布尔属性的检测设置需要hasAttribute和removeAttribute来完成,或者设置对应property
- 像link中href属性,转换成property的时候需要通过转换得到完整URL
- 一些attribute和property不是一一对应如:form控件中对应的是defaultValue,修改或设置value property修改的是控件当前值,setAttribute修改value属性不会改变value property
offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
- offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同
- clientWidth/clientHeight返回值只包含content + padding,如果有滚动条,也不包含滚动条
- scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸
Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9
XMLHttpRequest通用属性和方法
- readyState:表示请求状态的整数,取值:
- UNSENT(0):对象已创建
- OPENED(1):open()成功调用,在这个状态下,可以为xhr设置请求头,或者使用send()发送请求
- HEADERS_RECEIVED(2):所有重定向已经自动完成访问,并且最终响应的HTTP头已经收到
- LOADING(3):响应体正在接收
- DONE(4):数据传输完成或者传输产生错误
- onreadystatechange:readyState改变时调用的函数
- status:服务器返回的HTTP状态码(如,200, 404)
- statusText:服务器返回的HTTP状态信息(如,OK,No Content)
- responseText:作为字符串形式的来自服务器的完整响应
- responseXML: Document对象,表示服务器的响应解析成的XML文档
- abort():取消异步HTTP请求
- getAllResponseHeaders(): 返回一个字符串,包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对,并且使用一个回车/换行来分隔报头行
- getResponseHeader(headerName):返回headName对应的报头值
- open(method, url, asynchronous [, user, password]):初始化准备发送到服务器上的请求。method是HTTP方法,不区分大小写;url是请求发送的相对或绝对URL;asynchronous表示请求是否异步;user和password提供身份验证
- setRequestHeader(name, value):设置HTTP报头
- send(body):对服务器请求进行初始化。参数body包含请求的主体部分,对于POST请求为键值对字符串;对于GET请求,为null
focus/blur与focusin/focusout的区别与联系
- focus/blur不冒泡,focusin/focusout冒泡
- focus/blur兼容性好,focusin/focusout在除FireFox外的浏览器下都保持良好兼容性,如需使用事件托管,可考虑在FireFox下使用事件捕获elem.addEventListener('focus', handler, true)
- 可获得焦点的元素:
- window
- 链接被点击或键盘操作
- 表单空间被点击或键盘操作
- 设置tabindex属性的元素被点击或键盘操作
mouseover/mouseout与mouseenter/mouseleave的区别与联系
- mouseover/mouseout是标准事件,所有浏览器都支持;mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳,现代标准浏览器也支持
- mouseover/mouseout是冒泡事件;mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时,推荐mouseover/mouseout托管,提高性能
- 标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素;在老IE中event.srcElement表示发生移入/出的元素,event.toElement表示移出的目标元素,event.fromElement表示移入时的来源元素
例子:鼠标从div#target元素移出时进行处理,判断逻辑如下:
var target = document.getElementById('target');
if (target.addEventListener) {
target.addEventListener('mouseout', mouseoutHandler, false);
} else if (target.attachEvent) {
target.attachEvent('onmouseout', mouseoutHandler);
}
function mouseoutHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
// 判断移出鼠标的元素是否为目标元素
if (target.id !== 'target') {
return;
}
// 判断鼠标是移出元素还是移到子元素
var relatedTarget = event.relatedTarget || e.toElement;
while (relatedTarget !== target
&& relatedTarget.nodeName.toUpperCase() !== 'BODY') {
relatedTarget = relatedTarget.parentNode;
}
// 如果相等,说明鼠标在元素内部移动
if (relatedTarget === target) {
return;
}
// 执行需要操作
//alert('鼠标移出');
}
sessionStorage,localStorage,cookie区别
- 都会在浏览器端保存,有大小限制,同源限制
- cookie会在请求时发送到服务器,作为会话标识,服务器可修改cookie;web storage不会发送到服务器
- cookie有path概念,子路径可以访问父路径cookie,父路径不能访问子路径cookie
- 有效期:cookie在设置的有效期内有效,默认为浏览器关闭;sessionStorage在窗口关闭前有效,localStorage长期有效,直到用户删除
- 共享:sessionStorage不能共享,localStorage在同源文档之间共享,cookie在同源且符合path规则的文档之间共享
- localStorage的修改会促发其他文档窗口的update事件
- cookie有secure属性要求HTTPS传输
- 浏览器不能保存超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k。web storage大小支持能达到5M
javascript跨域通信
同源:两个文档同源需满足
- 协议相同
- 域名相同
- 端口相同
跨域通信:js进行DOM操作、通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
- 如果是log之类的简单单项通信,新建,
请用代码写出(今天是星期x)其中x表示当天是星期几,如果当天是星期一,输出应该是"今天是星期一"
var days = ['日','一','二','三','四','五','六'];
var date = new Date();
console.log('今天是星期' + days[date.getDay()]);
下面这段代码想要循环延时输出结果0 1 2 3 4,请问输出结果是否正确,如果不正确,请说明为什么,并修改循环内的代码使其输出正确结果
for (var i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}
不能输出正确结果,因为循环中setTimeout接受的参数函数通过闭包访问变量i。javascript运行环境为单线程,setTimeout注册的函数需要等待线程空闲才能执行,此时for循环已经结束,i值为5.五个定时输出都是5 修改方法:将setTimeout放在函数立即调用表达式中,将i值作为参数传递给包裹函数,创建新闭包
for (var i = 0; i < 5; ++i) {
(function (i) {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}(i));
}
现有一个Page类,其原型对象上有许多以post开头的方法(如postMsg);另有一拦截函数chekc,只返回ture或false.请设计一个函数,该函数应批量改造原Page的postXXX方法,在保留其原有功能的同时,为每个postXXX方法增加拦截验证功能,当chekc返回true时继续执行原postXXX方法,返回false时不再执行原postXXX方法
function Page() {}
Page.prototype = {
constructor: Page,
postA: function (a) {
console.log('a:' + a);
},
postB: function (b) {
console.log('b:' + b);
},
postC: function (c) {
console.log('c:' + c);
},
check: function () {
return Math.random() > 0.5;
}
}
function checkfy(obj) {
for (var key in obj) {
if (key.indexOf('post') === 0 && typeof obj[key] === 'function') {
(function (key) {
var fn = obj[key];
obj[key] = function () {
if (obj.check()) {
fn.apply(obj, arguments);
}
};
}(key));
}
}
} // end checkfy()
checkfy(Page.prototype);
var obj = new Page();
obj.postA('checkfy');
obj.postB('checkfy');
obj.postC('checkfy');