以下总结是我工作室的小伙伴的心得，可以参考一下
html+css知识点总结
HTMl+CSS知识点收集
1、letter-spacing和word-spacing的区别
letter-spacing：指字母间距
word-spacing：指单词间距
2、列举常见的复合属性（常见的17种，有可能结合js问）：
Background，Font，Border，Padding，Margin，list-style
3、img标签的属性alt和title的区别
Alt：图片加载不了的时候用以替代图片信息，同时利于搜索引擎抓取图片信息，safari不兼容
Title：图片提示信息，效果鼠标置于其上显示出来
4、abbr标签：标记简称或者缩写的，可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本
q标签：短引用（引用别人说的话）
5、A标签的功能
• <a href=”” target=”_sef”></a>链接
• 下载功能：<a href=”文件名”></a>
• 锚点：<a href=”#div1”></a>
注：href的四个值：_blank，_parent，_self，top，Framename
6、A标签的四个伪类：
Link：未访问，默认效果
Hover：鼠标悬停或者滑过效果
Active：链接激活（鼠标按下）、
Visited：访问过后（点击过后）
记忆方法：l（link） v（visited） h（hover） t（active）—love hate
7、内联元素和块元素的区别
内联：— 默认同行可以继续跟同类型标签
— 不支持宽高，由内容撑开宽高
— 不支持上下的margin和padding
— 代码换行被解析
块 ：— 默认独占一行
— 支持所有css命令
8、display标签的属性：block，inline，inline-block，inline-table，table，cell-inline，box（弹性），none，table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell，table-caption-inherit
9、文档流的概念：是文档中显示对象在排列时所占用的位置
10、position属性值（解释其区别，和文档流结合考）：static（静态，默认 ），relative，absolute，fixed，inherit（废弃）；
11、清浮动的几种方法
— 父级加宽高
— 给父级加浮动（弊端：margin等失效，加inline-block解决）
— 给父级加display:inline-block;
— 增加一高度为0的新标签，属性clear:both; ie6兼容性问题，font-size:0;
— 在浮动元素下加<br clear=”all” />
— haslayout（拥有布局，ie下的兼容问题，大多源于这玩意，大多标签默认有布局，有些没有，为何没有？只为了浏览器渲染效果而设计的，检查是否布局用zoom或者直接定宽高）根据元素内容的大小，或根据元素的父级的大小来计算元素的宽高
zoom:1;是用来触发haslayout的，不兼容火狐
— after伪类，父级加zoom:1; :after{ content:””; display:block; clear:both; }（常用方法）
— overflow清浮动（不常用）
— 给父级加绝对定位和固定定位清浮动
12、表格标签
<table> 定义表格
<caption> 定义表格标题。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。
cellpadding 单元格边距
cellspacing 单元格间距
rowspan 行合并
colspan 列合并
13、表单标签（指html4）
<fieldset> 定义域
<label> 定义一个控制的标签
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<legend> 定义域的标题
<select> 定义一个选择列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个按钮
几个表单控件（html4）：
文本输入框：<input type=”text” />
提交按钮： <input type=”submit” name=”” value=”提交” />
重置按钮： <input type=”reset” name=”” value=”重置” />
一般按钮： <input type=”button” name=”” value=”按钮” />
单选框： <input type=”radio” name=”” />
复选框： <input type=”checbox” name=”” />
下拉列表： <select><option></option></select>
Form标签的属性：action="url" method="get/post" enctype="mime" target="..."
14、列表标签
— ul（无序）
— ol（有序）
— dl （自定义，会问到怎么用，适合什么场合用）
15、ie6的兼容性问题
— 最小高度问题：overflow:hidden;
— dotted：背景图替代
— 子元素的margin传给父级：任意一个加浮动或者overflow:hidden;
— 父级有边框，子元素的margin值消失：触发haslayout，即zoom:1;
— 双边距bug（浮动情况下发生）：display:inline;
— a标签的兼容问题（伪类显示效果不一样）
— display：inline-block；ie6不识别block；
— ie6、7下，li本身没浮动，但里面内容有浮动时，li下边就会产生一个间隙：给li加vertical-align:top;
— ie6下的文字溢出
— 当浮动元素和绝对定位元素是并列关系时，ie6的绝对定位会消失：给定位元素外边加div标签包裹
— ie6、7下元素有相对定位的话，父级的overflow包不住子元素：给父级加相对定位
— 在ie6下绝对定位元素父级宽高是奇数的时候，元素的right和bottom值有1像素差
— fixed：js解决
— 透明度（opacity）：滤镜解决filter：alpha（opacity=30）；
— table中的兼容性问题（背景图片）：不要同时加
— 表单兼容
— 图片兼容（png）：js插件
16、兼容解决方式（之一）：
<!-- [if IE 6]>
// 语句
<![end if] -->
17、word-break：break-all；（排版都会整理好）
Word-wrap：break-word；（只会折掉超出文本）
Text-overflow：ellipsis； overflow：hidden；（超出文本加省略号）
18、display和visibility的区别
19、
— 盒模型两种模式：主要是内容区的解析方式不同，标准下内容宽不包含padding，但怪异下将其解析为内容的一部分，导致定义好的整体宽变小，解决方法，记得定义文档声明。
— 盒模型的两种模式与css3的box-sizing:boeder-box;及box-sizing:content-box;的关系
20、Css hack（建议不用，维护很麻烦，可以涉及important的运用的弊端）
— \9 ie10之前包括ie10的浏览器解析
— +，* ie7之前包括ie7解析
— _ ie6包括之前
— @media ……，html5的方法（媒体查询，主要针对不同分辨率的浏览器，事实上响应式的原理就是运用这个）
21、选择器权重问题
默认 < 类型标签 < class < id < 行内style < important(ie6不识别)
22、双飞翼布局（圣杯布局）
— 用绝对定位实现
— 用margin负值实现
23、等高布局，即左右高度会彼此关联，实现保持等高的效果，此增彼增。
24、Css sprite运用的优缺点（网站性能）
25、标签语义话
— 概念：由文档内容语义选择合适其语义的标签
— 优点：
去样式后结构清晰
有利于seo，和搜索引擎建立良好沟通，有利于爬虫抓取更多有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析，按其意义渲染网页
便于团队开发
26、网页中的长度单位
— rem 后面肯定会运用更多的一个单位
（详解：REM是CSS3中新增的一个单位。在W3C官网上是这样描述rem的——“font size of the root element”。也就是说rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据自己的需求。但他并不能实现，随着浏览器的缩小或放大，而改变元素的字号。他仅能通过修改<html>的字号大小来进行修改。）
— em相对于父元素的字体大小，不会自适应
— ex 相对于小写字母“x”的高度
— px 相对于屏幕分辨率而不是视窗大小
— in 英寸
— cm，mm，pt，pc
— % 相对于父元素
27、css样式
— 外部样式链入<link>，优点，缓存、多个页面调用、易维护
— 内部样式<style>，置于头部
— 行内样式<p style=””></p>
— 导入样式 @import url（）,缺点：css标签，js无法控制；无缓存；搜索引擎爬取不到；与html文档不同步，加载完才解析，页面刚开始会出现无样式现象；总之性能就是差！
28、几种颜色的表示方式
— 英文
— 十六进制
— rgb（确定数值表示）
— rgb（百分数表示）
— rgba
— HSL表示法，事实上这是即将变为最好的一个颜色表示单位
H Hue 色调 任意数值
S saturation 饱和度 0%-100%
L Lightness 亮度 0%-100%
— 将操作系统中的颜色赋给 background-color:windowInfoBackground;
29、css中属性的继承
— 可被所有元素继承：visibility和cursor
— 被内联元素继承：letter-spacing，word-spacing，line-height，color，font，text-decoration
— 被块状元素继承：text-indent和text-align
— 被列表元素继承：list-style
— 被表格元素继承：border-collapse
30、css中属性不可继承
— display，margin，border，padding，background，height，overflow，position，left，z-index，float，clear，vertical-align等
31、谈谈盒模型：盒模型内部主要是由content，padding，border，margin等组成，整体的显示效果或者渲染效果有六种不同方式：内联，内联块状，块状，表格，浮动，绝对定位等盒模型。以及html5中的盒模型。（这块内容可以扯很多）
32、简单谈谈布局：
— 静态布局，即常规方法，依托文档流按部就班的往下排，一般比较常用的样式操作就是margin以及块状元素和行内元素的搭配使用。
— 浮动布局：最为常见的布局，随便扯
— 绝对定位布局：也很常见，扯的时候就专门说下absolute，根本性质及运用过程该注意的地方
— 分栏布局：主要是对于前两种布局的性能提升，可以借bootstrap的栅格系统来说，原理基本相同，只是后者做到了响应式，分栏布局的最大优点便是将静态布局和浮动布局的模块间的毫无关联联系了起来，这样在布局的时候方便了很多，无须在页面变动的情况下意义去改动页面中的每一个版块的布局。
— css3盒布局及弹性盒布局：盒布局在分栏布局的基础上有进行了改进，同时将display这个属性的值的运用进行了衍生和改进。总之后两个布局后期会成为主要的布局方式。具体html5和css3会介绍。
33、谈谈浏览器内核：
— webkit：chrome和Safari
— trident：ie系列，及国内几乎所有的浏览器都是用这个内核的
— Gecko：火狐，可去了解下历史上的浏览器大战，火狐绝对是要给个赞的
— Presto：欧朋，事实上对于新技术特别是html5、css3的支持比较好，前景比较好
说到浏览器内核也可以扯到html5和css3，比如-webkit-，-moz-，-o-都是用来干吗的。
暂时就上面这些，其他的大家一起补充，另外我总结的未必正确，可以指正。
javascript知识点总结
javascript知识点收集
1、ECMAScript中的数据类型
— 简单数据类型（基本数据类型）：未定义（Underfined），空（Null），布尔值（Boolean），数值（Number），字符串（String）
— 复杂数据类型（引用数据类型）：Object（obj、[ ]、{ }、null，RegExp，String等），是由一组无序的名值对组成的
— typeof的存在便是用来检测这些基本数据类型的：
返回“underfined”，表示这个值只是被声明了，却没有给其定义，也可以理解为没有赋值，所以也就不知道它到底是什么，在数据类型里面找不到，同样对于typeof操作符来说返回的结果依然是”找不到“，即”underfined“；
返回“boolean”表示这个值是布尔值，布尔值的运用大多时候是结合表达式的
返回”string“表示这个值是字符串
返回”number“表示这个值是数值
返回”object“表示这个值是对象或者null（此处也体现出js的松散性，似乎显得不够严谨，但正是这个特性使得js更为灵活了，此处null被认为是一个空的对象引用也就是空的对象指针，所以返回object）
返回”function“ 表示这个值是函数，其实函数也是对象，js是面向对象的，所以有种说法，js中一切皆对象，只是这里调用typeof返回了function，这也说明了function是对象里的一个特例，有其不同之处。
— instanceof，主要是用以检测引用类型的值，可以检测到具体的引用类型的实例，返回结果true或者false；比如：
alert（person instanceof Object）；// 变量person是对象吗？
alert（colors instanceof Array）；//变量colors是数组吗？
alert（pattern instanceof RegExp）；//变量pattern是RegExp吗？
— 两种数据类型的区别
存储方式不同：简单数据类型存储在栈内存中，引用数据类型存储在堆内存中
访问方式不同：简单数据类型直接访问其值，操作时也是直接对其值进行操作；引用数据类型是按引用进行访问，要访问的值得根据其引用路径一直找到那个最终的值
值传递方式不同：简单数据类型复制的时候，新出现的变量会重新产生一个栈内存地址，来保存”孵化“出的新值，与原变量没有关系；复杂数据类型值的传递是按引用进行的，来个不是很恰当的比喻，引用传递有点像身份证复印件，可以有很多份复印件但都是来源于身份证，其实引用值传递复制的是存储在栈中的指针，这个复制而来的指针和之前的指针指向的是存储在堆中的同一个对象。
2、强制数据类型转换
— Number（）
var a = ‘+100‘;
// alert( a+100 ); // ‘100100‘
// alert( Number(a) ); // 100
var a1 = ‘ ‘;
// alert( Number(a1) ); // 0
var a2 = true;
// alert( Number(a2) ); // true->1 false->0
var a3 = [ 1 ];
// alert( Number(a3) ); // 1 0
var a4 = null;
// alert( Number(a4) ); // 0
— parseInt（）
// var b = ‘ 200px‘;
// alert( parseInt(b) );
— parseFloat（）
//var c = ‘12.34元‘;
// alert( parseFloat(c) );
例：判断一个数是否是整数
var num = ‘200.45‘;
if( parseInt(num) == parseFloat(num) ){
alert( num + ‘是整数‘ );
}else{
alert( num + ‘是小数‘ );
}
— var json = {};
// alert( Number(json) ); //NaN
var u;
// alert( Number(u) ); //NaN
— var a3 = function (){ alert(1); };
// alert( Number(a3) ); // NaN
3、隐式类型转换
+ 200 + ‘3‘ 变成字符串
- * / % ‘200‘ - 3 变成数字
++ -- 变成数字
> < 数字的比较 、字符串的比较
! 取反 把右边的数据类型转成布尔值
== alert(‘3’= 3);//true
扩展：
NaN：not a number 不是个 数字 的 数字类型
isNaN：Is not a number 是不是不是一个数字？（判断某些值是不是数字，它更喜欢看到的结果是不是数字，可理解为一个反问句）
4、html属性（属性名.属性值）操作：
• 读操作（获取、找到），元素.属性名，或者元素[属性名]
• 写操作（替换、修改）
— “=”，元素名.属性名 = 新的值
— 元素名.innerHtml = 新的值
— Attribute
元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值
元素.setAttribute(属性名称，属性值); 方法 给指定元素指定的属性设置值
元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性
注：用.和[]的形式无法操作元素的自定义属性，getAttribute可以。
5、js中不允许出现“-”连接符
6、系统时间对象：
Var myTime = new Date();
— getFullYear()
— getMotnh()
— getDate()
— getHours()
— getMinutes()
— getDateSeconds()
7、倒计时的设置
— 原理：用设定的未来的一个时间减去现在从系统获取的当前的时间值
—代码：
Function daoJiShi () {
var str = “’;
var timer = null;
var iNew = new Date( “自己设定的未来值，即到期时间” );
clearInterval( timer );
timer = setInterval (function (){
var iNow = new Date(); //新建时间对象，获取当前时间
t = Math.floor( ( iNew - iNow ) / 1000 ); // 将获取到的时间用“秒”这个单位来表示，并且向上取整
if ( t >= 0 ) {
str = Math.floor(t/86400)+‘天‘+Math.floor(t%86400/3600)+‘时‘+Math.floor(t%86400%3600/60)+‘分‘+t%60+‘秒‘;
return str;
} else {
clearInterval( timer );
return;
}
}, 1000);
};
8、js中math对象的几个方法
— parseInt() 丢弃小数部分，保留整数部分
— Math.ceil() 向上取整，有小数就整数部分加1
— Math.round() 四舍五入
— Math.floor() 向下取整
— abs() 返回数的绝对值
……
9、字符串方法
— charAt()
— charCodeAt()
— charFromCode()
— indexof()
— lastIndexof()
— substr()
— substring()
— slice()
— split()
— toUpperCase()
— toLowerCase()
— concat()
— trim()
— match()
— search()
— replace
10、数组的方法
— instanceof()
— toString()
— concat()
— join()
— push()
— pop()
— shift()
— unshift()
— typeof()
— slice()
— splice()
— reverse()
— sort()
— indexof()
11、DOM
— 什么是DOM
文档对象模型，它的存在将html或者xml描述成了一个有层次感的结构模型，即所谓的DOM树。
也可这样理解：
文档：html页面
文档对象：页面中元素
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素
— DOM节点（操作）
• childNodes \ children（常用这个，兼容问题少）
属性，只读，子节点列表集合，获取第一级子元素，有兼容性问题（当有空白节点的时候）
• firstChild \ firstElementChild
获取子元素里的第一个
元素.firstChild ：属性 只读 第一个子节点
标准下：firstChild会包含文本类型的节点
非标准下：只包含元素节点
元素.firstElementChild ：属性 只读 标准下获取第一个元素类型的子节点
• lastChild \ lastElementChild
获取子元素里的最后一个
• nextSibling \ nextElementSibling
获取指定元素的下一个兄弟节点
• previousSibling \ previousElementSibling
获取指定元素的上一个兄弟节点
• parentNode
获取父节点，例：点击链接隐藏整个li
• parentNode&offsetParent区别
offsetLeft \ offsetTop
offsetWidth \ clientWidth
元素.offsetParent：属性 只读 离当前元素最近的一个有定位属性的父节点
如果没有定位父级，默认是body
ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上
— DOM中创建元素的两种方法
• document.creatElement(‘元素名’)
父级.appendChild(要添加的元素) 方法 追加子元素
父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
在ie下如果第二个参数的节点不存在，会报错
在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
• innerHTML = “<div><ul><li></li></ul></div>”;
— 删除DOM元素
removeChild(节点) 删除一个节点 例子：删除留言
— 替换DOM元素
replaceChild(节点, 已有节点) 替换节点
— DOM节点类型（12种）
元素.nodeType : 只读 属性 当前元素的节点类型（以数字来区别）
元素节点：1
属性节点：2
文本节点：3
……
注释节点：8
文档节点：9
— DOM操作之表格操作
— DOM操作之表单操作
12、BOM
— 浏览器对象模型，核心是window对象，此处的window有两个角色，一个是ECMAscript所规定的Global对象，同时也是js访问浏览器窗口的一个接口。
— 打开、关闭窗口
open() window.open(‘http://www.baidu.com‘, ‘_self‘); 默认是空白页面
close() window.close();
关闭时有提示但有兼容性问题 ff : 无法关闭 chrome : 直接关闭 ie : 询问用户
— 常用属性
• window.navigator.userAgent：判断浏览器类型
• window.location地址
window.location.href = window.location内容
window.location.search = url?后面的内容
window.location.hash = url#后面的内容
— 窗口尺寸与大小
• 可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
• 滚动距离
document.body.scrollTop/scrollLeft
document.documentElement.scrollTop/scrollLeft
• 内容高度
document.body.scrollHeight
• 文档高度
document.documentElement.offsetHeight
document.body.offsetHeight
注：ie : 如果内容没有可视区高，那么文档高就是可视区高
— window对象常用事件
• onscroll 当滚动条滚动的时候触发
• onresize 当窗口大小发生变化的时候触发
• 弹窗的例子
— 简单谈谈几个值
• 偏移量
offsetHeight：垂直方向上占用的空间大小，包括元素的高度，可见的水平滚动条高度，上边框和下边框的高度。（同理解析offsetWidth）
offsetLeft：元素的左外边框到用它的定位父级的左内边框的距离
• 可见区大小
clientWidth和clientHeight：指元素内容宽或高加上左右或上下内边距值
• 滚动大小
scrollHeight：在没有滚动条的情况下，元素内容的总高度（同理解scrollWidth）
scrollLeft：被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置
scrollTop：被隐藏在内容区域上方的像素数，通过设置这个属性可以改变元素的滚动位置
（看完DOM和BOM谈谈Dom树和渲染树的区别）
13、事件（响应用户操作时的一些指令）
— 事件对象：（event） 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方---event对象，供我们在需要的调用。
事件对象必须在一个事件调用的函数里面使用才有内容
— 事件函数：事件调用的函数，一个函数是不是事件函数，不在定义时决定，而是取决于这个调用的时候（事件绑定的一个简单模式）
— 兼容
ie/chrome : event是一个内置全局对象
标准下 : 事件对象是通过事件函数的第一个参数传入
代码：var ev = ev || window.event;
注：如果一个函数被事件调用了，那么这个函数定义的第一个参数就是事件对象
— clientX[Y] : 当一个事件发生的时候，鼠标到页面可视区的距离
— 事件类型：UI事件、焦点事件、鼠标与滚轮事件、键盘与文本事件、h5事件等
— 焦点事件
• 获取焦点的几种方式：鼠标点击、tab键、js控制
• onfocus：当元素获取到焦点的时候触发
• onblur：当元素时区焦点的时候触发
• obj.select() 选择指定元素里面的文本内容
注：不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点
— 事件流：指事件冒泡和事件捕获这两个动态发生的过程或者内容
• 事件捕获：事件从父元素流出，经过中间件，向下传达到最先指定的子元素，这一过程就叫做“事件捕获”
• 事件冒泡：子元素访问事件的时候，事件又通过“事件冒泡”机制反向流回层级中的高层节点。
• 为了保证系统的轻量，使得性能有较高提升，在各浏览器厂商、原生开发框架中基本都采用了事件冒泡来处理事件，但部分框架依旧是事件捕获机制的运用。
• 事件处理器可以在任意时刻调用event对象的stopPropagation函数来阻止事件沿事件捕获链向下传递或通过冒泡阶段向上传递。
• 阻止冒泡：event.cancelBubble = true;
• 事件捕获：
方式一：obj.onclick = fn;
方式二：ie（非标准） obj.attachEvent(‘onclick’,fn)
标准浏览器 obj.addEventListener(‘click’, fn, false);
注：标准浏览器下参数三表示是否捕获，默认是false（冒泡），true（捕获）
非标准浏览器下是没有事件捕获的。
• 事件绑定简单封装函数
function bind(obj, evname, fn) {
if( obj.addEventListener ){
return obj.addEventListener( evname, fn, false )
} else {
return obj.attachEvent(‘on’+evname, function(){
rn.call(obj);
});
}
}
— 键盘事件
• keyCode
获取用户按下键盘的哪个按键。例子：键盘控制Div移动
• 其他属性
ctrlKey、shiftKey、altKey 例子：提交留言
回车 提交
ctrl+回车 提交
— 默认事件（浏览器厂商自设的）
• 阻止默认事件
普通写法：return false;
例子：屏蔽右键菜单：oncontextmenu 弹出自定义右键菜单
14、事件2----拖拽
— 原理：
onmousedown：鼠标按下选择元素
onmousemove：跟随鼠标移动元素
onmouseup：鼠标抬起释放元素
— 拖拽时存在的问题
• 拖拽的时候，如果有文字被选中，会产生问题
原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果
解决：标准：阻止默认行为；
非标准ie：设置全局捕获setCapture()，释放全局捕获releaseCapture();
注：全局捕获：当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发；对于全局捕获ie : 有，并且有效果；ff : 有，但是没效果；chrome : 没有。
• 兼容性问题（主要针对偏移量这个东东）
• 代码
function drag(obj) {
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
obj.style.left = ev.clientX - disX + ‘px‘;
obj.style.top = ev.clientY - disY + ‘px‘;
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}
• 磁性吸附
• 碰撞检测--原理：九宫格
• 拖拽改变窗口大小
• 拖拽模拟滚动条
15、事件3---滚轮和cookie
— 滚轮
ie/chrome : onmousewheel
event.wheelDelta
上：120
下：-120
firefox : DOMMouseScroll 必须用addEventListener
event.detail
上：-3
下：3
注：return false阻止的是 obj.on事件名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault()阻止;
— cookie：访问网站（网页）的时候会将一些数据临时存储于本地计算机，浏览器或服务器运用的时候可随时取用，这个存储数据的地方就是cookie。
1.不同的浏览器存放的cookie位置不一样，也是不能通用的
2.cookie的存储是以域名形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样
6.我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来
7.如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
8.cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁
9.设置cookie的时候最好编码存放（转码）encodeURI，比如encodeURI(‘你好‘)的结果是“你好”—>“%E4%BD%A0%E5%A5%BD”;
代码：实现获取、设置、删除cookie
var oDate = new Date();
oDate.setDate( oDate.getDate() + 5 );//加入时间是为了对缓存的一个处理，此处主要是对hash值的改变来实现这个功能的。
function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate( oDate.getDate() + t );
document.cookie = key + ‘=‘ + value + ‘;expires=‘ + oDate.toGMTString();
}
function getCookie(key) {
var arr1 = document.cookie.split(‘; ‘);
for (var i=0; i<arr1.length; i++) {
var arr2 = arr1[i].split(‘=‘);
if ( arr2[0] == key ) {
return decodeURI(arr2[1]);
}
}
}
function removeCookie(key) {
setCookie(key, ‘‘, -1);
}
setCookie(‘zyc‘,‘男‘, 10);
removeCookie(‘username‘);
removeCookie(‘age‘);
removeCookie(‘sex‘);
alert(document.cookie)
16、堆和栈（链接）的区别于联系
— 栈：由编译器自动分配释放，存储函数的参数值，局部变量的值等
— 堆：一般有程序员分配释放，可被垃圾回收机制回收
17、javascript的作用域及作用域链及函数执行上下文（无需再看）
18、理解闭包
定义：函数嵌套函数；内部函数可以访问外部函数的变量；参数和变量不会被垃圾回收机制回收。
闭包的好处：希望一个变量长期存储在内存中；避免全局变量的污染；私有成员的存在
运用的地方：模块化代码的时候，函数自执行；在for循环中直接找到对应元素的索引
需要注意的地方：IE下会引发内存泄露（相互引用时），浪费内存
/ * function fn1() {
var a = 1;
function fn2() {
//我们是可以访问到fn1中定义a的值的
//alert(a);
alert(a++);
}
fn2();
}
fn1();
fn1();
//当一个函数被执行的时候，和函数有关的一些变量会被申明（出现在内存中），当这个函数执行完成以后，如果函数中申明的变量没有再被其他地方所调用，则和这个函数有关的数据自动会被销毁
* /
function fn1() {
var a = 1;
function fn2() {
alert(a++); // alert(a); a=a+1;
//alert(++a) // a=a+1; alert(a);
}
return fn2; //返回出去的是一个引用类型的值，可理解为返回出去的是一个指针地址，有了外部的调用，所以当外部对函数内部的值调用时，垃圾回收机制就消除不了这个变量，也就是参数和变量不会被垃圾回收机制回收。
}
var f = fn1();
f();
f();
/*f = 1;
f = fn1();
f();*/
19、理解递归：函数通过函数名调用函数自身，执行递的动作；最后一次判断一个终止条件，可以执行归的动作。
经典案例：运用arguments的属性callee实现递归。Argument.callee是一个指向正在执行的函数的指针，可用它实现函数递归。
注：arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。
示例代码
Function factorial (num) {
If( num<1 ){
Return 1;
} else {
Return num * argument.callee( num-1 );
}
}
20、argument.calee和argument.caller
arguments.callee返回当前正在执行的函数，function.caller返回函数的调用体所在函数，可理解为调用该函数的函数。
示例代码
function parentCheck() {
check("");
function check() {
subCheck();
function subCheck() {
console.log(arguments.callee);
console.log(subCheck.caller.caller)
}
}
}
parentCheck();
注解：arguments.callee返回subCheck的函数体，subCheck.caller返回调用subCheck的函数，即check，而再往上一层，subCheck.caller.caller就是返回调用check的函数体，也就是parentCheck。那如果是继续往上一层呢？subCheck.caller.caller.caller？就会变成null。书里也有讲，arguments.caller在非严格模式下永远是undefined。我们就可以判断值是null还是undefined来区分arguments.caller和函数的caller。
JS的函数是可以无限嵌套的，就构成了一棵树，而function.caller就提供了一个访问父节点的方法，通过灵活应用function.caller，我们甚至可以用脚本画出整棵树，只要我们在任意地方成功插入一段JS代码，又或者是，像网站统计之类的第三方代码，我们就能窥视其他代码。
所以为了安全期间，严格模式禁止调用caller、callee、arguments变量，在浏览器中的报错为
1
Uncaught TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode functions or the arguments objects for calls to them
21、call和apply--每个函数都有的方法，但并不是继承而来
function fn1(a, b) {
console.log(this);
console.log(a + b);
}
//fn1.call(document, 1, 2);
//apply 和call基本一致，不同的是参数的传递上
//fn1.apply(document, [1, 2]); //第二个参数就是fn1中的arguments，apply运用较多
//案例
var arr = [1,6,4,8,3,10,2];
//console.log( math.max(1,6,4,8,3,10,2) ); //arguments => [1,6,4,8,3,10,2]
console.log( math.max.apply(null, arr) ); //arguments => arr
22、This
函数外 ： window
函数内 ：
当一个函数被对象调用，则该函数内的this指向调用该函数的对象
当一个函数被事件调用，则该函数内的this指向触发该事件的对象
通过call、apply去调用一个函数，那么这个函数指向call、apply的第一个参数（如果call、apply的第一个参数是undefined/null，则this指向调用该函数的对象）
注：匿名函数中的this通常指向window，因为匿名函数多数其执行环境具有全局性
24、算法之冒泡排序（还有查重，快排等“经典”算法）
var arr = [3,4,1,2,7,5,6];
/*for (var j=0; j<arr.length-1; j++) { //第一次循环
var a = arr[j];
var b = arr[j+1];
if (a < b) {
arr[j] = b;
arr[j+1] = a;
}
//alert(arr);//不可用console.log()，原因同对象引用
}*/
for (var i=0; i<arr.length-1; i++) {
var f = false;
for (var j=0; j<arr.length-1-i; j++) {
var a = arr[j];
var b = arr[j+1];
if (a < b) {
f = true;
arr[j] = b;
arr[j+1] = a;
}
}
if (!f) {
break;
}
//alert(arr);
}
//了解console.log()方法
console.log(arr);
//
//console.log( Math.random() ); //0-1
//0-10
//console.log( Math.random() * 10 );
//10 - 20 0:10 1:20 随机数 * 最小值 + 差值
//console.log( Math.random() * 10 + 10 );
25、ajax相关知识
— 什么是ajax：异步的javascript和xml，在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术。
— Ajax过程详解：分为四步：
1.创建ajax对象
var xhr = new XMLHttpRequest();
非标准：var xhr = new AcitiveXObject( ‘Microsoft.XMLHTTP’ );
2.建立请求
xhr.open( ‘get’, ‘地址’，true )；
3.发送请求
xhr.send();
4.浏览器响应接收数据
xhr.onreadystatechange = function() {
if( xhr.readyState == 4 && status == 200){
xhr.responseText;
}
}
— get和post提交数据的区别：
1.get：get通过url地址传输，在url地址中的？后面跟上所传输内容，同时后面链接一个随机数（时间戳）来解决缓存问题，因为是跟着ulr传输所以可以被用户看到，不够安全，同时对所传输数据有大小限制，一般不超过2k，所以get一般是向服务器请求数据，同时get传输数据的格式也有一定的限制，而且中文会乱码。
2.post，数据放在send()方法里面，作为参数传递，且同时说明提交的数据的数据格式即设置请求头xhr.setRequestHeader( ‘content-type’,‘application/x-www-form-urlencoded’ )中文不会乱码，传输数据大小无限制，但还是受到服务器本身的限制。
— xmlhttprequest 具有六个常用的方法,分别是:
(1)abort---------停止当前的请求.
(2)getAllResponseHeader--------把当前的所有HTTP请求的响应头部作为键值对返回.
(3)getResponseHeader(“header”)----------返回指定的首部串值.
(4)open(“method”,”url”,”Boolean”,”username”,”password”)------建立对服务器的请求,其中method方法为get,put,post等.
(5)send(content)------------具休向服务器提出请求.
(6)setRequestHeader(“header”,”value”)-----------为指定的首部设置值,注在设置之前,必须先调用OPEN()方法.
xmlhttprequest 还提供了六个常用的属性.
(1)onreadystatechange--------------------当状态改变时就调用由此指定的函数.
(2)readystate----------------------------获得当前状态.通常有5个可取值(0-4)对我们真真正用用的就是4代表完成..
(3)responseText--------------------------通常由服务器返回一个字符串.
(4)responseXML---------------------------表示返回一个XML对象.
(5)status--------------------------------返回服务器状态.(200代表OK,404代表没有找到)
(6)statuse-------------------------------http状态码的相应文本.(ok或未找到).
readystate
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
Status值
1xx:信息响应类，表示接收到请求并且继续处理
2xx:处理成功响应类，表示动作被成功接收、理解和接受
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求
一次HTTP操作称为一个事务，其工作过程可分为四步：
首先客户机与服务器需要建立连接。只要单击某个超级链接，HTTP的工作就开始了。
建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可能的内容。
服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。
客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客
户机与服务器断开连接。
如果在以上过程中的某一步出现错误，那么产生错误的信息将返回到客户端，由显示屏输出。对于用户来说，这些过程是由HTTP自己完成的，用户只要用鼠标点击，等待信息显示就可以了。
许多HTTP通讯是由一个用户代理初始化的并且包括一个申请在源服务器上资源的请求。最简单的情况可能是在用户代理和服务器之间通过一个单独的连接来完成。在Internet上，HTTP通讯通常发生在TCP/IP连接之上。缺省端口是TCP 80，但其它的端口也是可用的。但这并不预示着HTTP协议在Internet或其它网络的其它协议之上才能完成。HTTP只预示着一个可靠的传输。
这个过程就好像我们打电话订货一样，我们可以打电话给商家，告诉他我们需要什么规格的商品，然后商家再告诉我们什么商品有货，什么商品缺货。这些，我们是通过电话线用电话联系（HTTP是通过TCP/IP），当然我们也可以通过传真，只要商家那边也有传真。
26、跨域
— flash（传统）
— iframe（传统，基本都不用了）
— jsonp（好用，但不够安全，主要是源资源的安全难以保障，说实现机制）
— html5（跨文档消息通信和升级版的xhr对象的运用，具体看html5）
— 服务器端跨域资源的处理
27、jQuery优缺点，干什么
— 优点：高效快速开发，性能好，插件多。
— 缺点：兼容性问题。
— js库
28、模块化开发框架之seajs
①引入sea.js的库
②如何变成模块？
define
③如何调用模块？
exports
seajs.use
④如何依赖模块？
Require
— cmd规范
— amd规范
29、有无用过模板语言
freemarker jinja handlebars（这块我也不是很了解）
30、做过哪些性能优化
— ySlow（其实项目或者练习过程中都有注意这块，很多细节做好都可以理解为是对网站的性能的一个优化，最基础的便是这个ySlow所要求的）
— 对于js性能优化比较典型的是定时器、for循环的优化，大多都可以扯到面向对象开发，利用面向对象的特点：抽象、封装、继承、多态去扯。（事实上这块绝对可以撤扯很多）
31、写过哪些组件（谈及bootstrap，然后是扯项目中的模块化开发，讲到团队开发中的协作、问题处理）
32、轮播图实现思路（实现一：js基础的考核主要是array和string方法的考核，二：还有jquery animate考核，三：css3动画的考核。这块你可以扯很多）
33、bootstrap（一般都会问到less或者sass）
33、Node、backbone、angular的了解
34、你接触的前端框架
35、经典的http问题，在浏览器地址输入一个网址到按回车键到底都发生了什么？
目前就这些，后期会补充，有问题我们聊聊，不一定对，也不一定掌握的恰到好处
html5知识点总结
HTML5的相关知识总结
1、新的页面结构及宽松的语法规范
<!DOCTYPE html>
<meta charset=”utf-8”>
2、语义化标签的增加
<header></header> 主要用于页面头部的信息介绍，也可用于版块头部
<hgroup></hgroup> 页面上的一个标题组合
<nav></nav> 导航，包含链接的一个列表，标签内部可以包含a、ul、p标签等
<footer></footer> 页脚，页面的底部或者版块的底部
<section></section> 页面上的版块，用于划分页面上的不同区域或者文章中的不同的节
<article></article> 用来在页面中表示一套结构完整且独立的内容部分
<aside></aside>有别于主要内容的部分，包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组
<figure></figure>用于对元素进行组合，一般用于图片和视频
<figcaption></figcaption> figure的子元素，用于对figure的内容进行说明
<time></time> 用来表示时间或日期
<datelist></datelist>选项列表。与input元素配合使用，来定义input可能的值
<details></details> 用于描述文档或文档的某个部分的细节，比如摘录引用等，其open属性默认展开
<summary></summary> details元素的标题
<dialog></dialog> 定义一段对话
<address></address> 定义文章或页面作者的详细联系信息
<keygen> 给表单添加一个公钥
<progress></progress> 定义进度条
3、新标签ie（6-8）下的兼容
—Js来解决，如果新标签较少的话，document.creatElement(‘header’);，同时display:block;
—插件来解决，原理同上面
4、Forms中的变化
• 新的输入型控件
Email：电子邮箱文本框，跟普通的没什么区别
—当输入不是邮箱的时候，验证不通过
—移动端的键盘会有变化
Tel：电话号码
Url：网页的url
Search：搜索引擎
—chrome下输入文字后，会多出一个关闭的X
Range：特定范围内的数值选择器
—min、max、step（步数）
—例子：用js来显示当前数值
• 新的输入型控件2
Number：只能包函数字的输入框
Color：颜色选择器
Datetime-local：显示完整日期，不含时区
Time：显示时间，不含时区
Date：显示日期
Week：显示周
Month：显示月
• 新的表单特性和函数
Placeholder：输入框提示信息
Autocomplete：是否保存用户输入值，默认为on，关闭提示选择off
Autofocus：指定表单获取输入焦点
List和datelist：为输入框构造一个选择列表，list值为datelist标签的id
Required：此项必填
Pattern：正则验证pattern=”\d{1,5}”
Formaction：在submit里定义提交地址
• 表单验证：
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证
Invalid事件 : 验证反馈 input.addEventListener(‘invalid‘,fn,false)
阻止默认验证：ev.preventDefault()
formnovalidate属性 : 关闭验证
5、新的选择器
• querySelector() 根据制定的选择规则，返回在页面中找到的第一个匹配元素
• queryselectorAll
• getElementsByClassName
提示：selectors API不仅仅只是方便，在遍历DOM的时候，Selectors API通常会比以前的子节点搜索API更快。同时浏览器也做了高效的搜索匹配。
5、获取class列表属性
• classList
—length：class的长度
—add()：添加class的方法
—remove()：删除class的方法
—toggle()：切换class的方法
6、JSON的新方法
• Parse()：把字符串转成JSON，字符串中的属性要严格加上引号
• Stringify()：把json转换成字符串，会自动加上双引号
• 新方法与eval的区别
• 新方法的应用：深度克隆新对象
• 兼容解决：下载json2.js
7、date自定义数据
• Dateset
—data-name : dataset.name
—data-name-first : dataset.nameFirst
• Data数据在jquery mobile中有着重要作用
8、延迟加载JS
• JS的加载会影响后面的内容加载
—很多浏览器都采用了并行加载JS，但还是会影响其他内容
• Html5的defer和async
—defer : 延迟加载，会按顺序执行，在onload执行前被触发
—async : 异步加载，加载完就触发，有顺序问题
• Labjs库
9、历史管理
• onhashchange ：改变hash值来管理
• history ：
—服务器下运行
—pushState : 三个参数 ：数据 标题(都没实现) 地址(可选)
—popstate事件 : 读取数据 event.state
—注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
10、拖放事件
• draggable ：设置为true，元素就可以拖拽了
• 拖拽元素事件 : 事件对象为被拖拽元素
—dragstart , 拖拽前触发
—drag ,拖拽前、拖拽结束之间，连续触发
—dragend , 拖拽结束触发
• 目标元素事件 : 事件对象为目标元素
—dragenter , 进入目标元素触发，相当于mouseover
—dragover ,进入目标、离开目标之间，连续触发
—dragleave , 离开目标元素触发，相当于mouseout
—drop , 在目标元素上释放鼠标触发
11、拖放事件2
• 事件的执行顺序 ：drop不触发的时候
—dragstart > drag > dragenter > dragover > dragleave > dragend
• 事件的执行顺序 ：drop触发的时候(dragover的时候阻止默认事件)
—dragstart > drag > dragenter > dragover > drop > dragend
不能释放的光标和能释放的光标不一样
12、拖放事件3
• 解决火狐下的问题：必须设置dataTransfer对象才可以拖拽除图片外的其他标签
• dataTransfer对象
—setData() : 设置数据 key和value(必须是字符串)
—getData() : 获取数据，根据key值，获取对应的value
13、dataTransfer对象_2
• effectAllowed
—effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
• setDragImage
—三个参数：指定的元素，坐标X，坐标Y
• files
—获取外部拖拽的文件，返回一个filesList列表
—filesList下有个type属性，返回文件的类型
14、FileReader(读取文件信息)
• readAsDataURL：参数为要读取的文件对象，将文件读取为DataUrl
• onload
—当读取文件成功完成的时候触发此事件
—this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
• 实例
—拖拽删除列表
—拖拽购物车
—上传图片预览功能
15、canvas相关知识
• 标签：<canvas>这里可以加入其它标签来解决兼容性问题</canvas>（默认的宽为300px高为150px）
• 获取：绘制环境getContext(‘2d’)：目前支持2d的场景，3d即webgl兼容性问题较多
• 绘制方块：fillRect(L,T,W,H):默认颜色是黑色
strokeRect(L,T,W,H):带边框的方块，默认1像素黑色边框（但是效果并不是1像素，原因是浏览器自补导致的，可以给top和left值中带0.5个小数值）
L：left；T：top；W：width；H：height；
• 绘制方法：基于上下文执行划线的操作，代码中调用三个方法，beginPath、moveTo和lineTo。最后调用stroke() 方法完成线条的绘制
• Context.translate(); canvas变换函数
• Context.save(); 保存当前绘图状态
• Context.restore(); 恢复原有的绘图状态
• context.lineWidth=4;加宽线条
• context.lineJoin = “round”; 平滑路径的结合点
• context.strokeStyle = red; 将绘制颜色改为红色
• Context.fillStyle=“#fff”;
• Context.fill(); 将填充颜色设置为白色并填充
• context.drawImage(bark,-5,-50,10,50); 在canvas上显示图像
• Context.rotate(),canvans变换之旋转
• Context文本，fillText(text, x, y, maxwidth)
• strokeText(text, x, y, maxwidth);
• context.shadowColor = ‘rgba()’; 运用阴影
• context.shadowoffsetX = 15;将阴影向右移动15px
• Context.shadowBlur = 2;轻微模糊阴影；
16、SVG矢量图
17、音频和视屏
• 音频 <audio control src=””></audio>
• 视频 <video control src=””></video>
• Source标签的作用：主要是用来解决不同浏览器对不同格式的媒体文件的支持，
<video>
<source src=”第一种视频格式”></source>
<source src=”第二种视频格式”></source>
</video>
• 视频容器：容器文件，类似于压缩了一组文件，其中包括：
—音频轨道
—视频轨道
—元数据：封面，标题，字幕等
—格式：.avi、.flv、.mp4、.mkv、.ogv等
• 编解码器：原始的视频容器非常大，添加需编码，播放需解码
—音频编解码器：AAC、MPEG-3、Ogg Vorbis
—视频编解码器：H.264、VP8、Ogg Theora
• 媒体元素
• Controls：显示或隐藏用户控制界面，没有此元素的时候是不可以对插入的视频或音频进行播放等控制的
• Autoplay：媒体是否自动播放
• Loop：媒体是否循环播放
• currentTime：开始到播放现在所用的时间
• Duration：媒体总时间(只读)
• Volume：0.0-1.0的音量相对值
• Muted：是否静音
• Autobuffer：开始的时候是否缓冲加载，autoplay的时候，忽略此属性
• Paused：媒体是否暂停(只读)
• Ended：媒体是否播放完毕(只读)
• Error：媒体发生错误的时候，返回错误代码 (只读)
• currentSrc：以字符串的形式返回媒体地址(只读)
• play()：媒体播放
• pause()：媒体暂停
• load()：重新加载媒体
• Video额外特性
—Poster：视频播放前的预览图片
—width、height：设置视频的尺寸
—videoWidth、 videoHeight：视频的实际尺寸(只读)
18、Geolocation（地理信息）
• 地理位置
经度：南北极的连接线
纬度：东西连接的线
• 位置信息从何而来
IP地址
GPS全球定位系统
Wi-Fi无线网络
基站
• 地理位置对象
navigator.geolocation
单次定位请求 ：getCurrentPosition(请求成功，请求失败，数据收集方式)
• 请求成功函数
经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
时间戳 : new Date(position.timestamp)
• 请求失败函数
失败编号 ：code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息，但失败了
3 : 设置了timeout值，获取位置超时了
数据收集 : json的形式
enableHighAcuracy : 更精确的查找，默认false
timeout : 获取位置允许最长时间，默认infinity
maximumAge : 位置可以缓存的最大时间，默认0
• 多次定位请求 : watchPosition(像setInterval)
移动设备有用，位置改变才会触发
配置参数：frequency 更新的频率
关闭更新请求 : clearWatch(像clearInterval)
19、Cookie
• 概念：数据存储到计算机中，通过浏览器控制添加与删除数据
• Cookie的特点
—存储限制
—域名100个cookie,每组值大小4KB
—客户端、服务器端，都会请求服务器（头信息）
—页面间的cookie是共享
20、本地存储（web storage）
• 与cookie的区别：cookie里面的方法需要我们自己去封装，但是web storage已经替我们封装好了，同时web storage性能比cookie好，因为其有两个存储方式，临时存储和长久存储
• Storage
—sessionStorage
session临时回话，从页面打开到页面关闭的时间段
窗口的临时存储，页面关闭，本地存储消失
—localStorage
永久存储（可以手动删除数据）
• Storage的特点
—存储量限制 ( 5M )
—客户端完成，不会请求服务器处理
—sessionStorage数据是不共享、 localStorage共享
• Storage API
—setItem():
设置数据，key\value类型，类型都是字符串
可以用获取属性的形式操作
—getItem():
获取数据，通过key来获取到相应的value
—removeItem():
删除数据，通过key来删除相应的value
—clear():
删除全部存储的值
例子 : 保存注册信息
—存储事件:
当数据有修改或删除的情况下，就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
—Key : 修改或删除的key值，如果调用clear(),key为null
—newValue : 新设置的值，如果调用removeStorage(),key为null
—oldValue : 调用改变前的value值
—storageArea : 当前的storage对象
—url : 触发该脚本变化的文档的url
注：session同窗口才可以,例子：iframe操作
例子 : 同步购物车
21、Websocket
概念：WebSocket协议是一种双向通信协议，它建立在TCP之上，同http一样通过TCP来传输数据，但是它和http最大的不同有两点：1.WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据，就像Socket一样，不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议；2.WebSocket需要通过握手连接，类似于TCP它也需要客户端和服务器端进行握手连接，连接成功后才能相互通信。WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议，Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的。WebSocket和Http协议一样都属于应用层的协议，那么他们之间有没有什么关系呢？答案是肯定的，WebSocket在建立握手连接时，数据是通过http协议传输的，正如我们上一节所看到的“GET/chat HTTP/1.1”，这里面用到的只是http协议一些简单的字段。但是在建立连接之后，真正的数据传输阶段是不需要http协议参与的。
// 创建一个Socket实例
var socket = new WebSocket(‘ws://localhost:8080‘);
// 打开Socket
socket.onopen = function(event) {
// 发送一个初始化消息
socket.send(‘I am the client and I\‘m listening!‘);
// 监听消息
socket.onmessage = function(event) {
console.log(‘Client received a message‘,event);
};
// 监听Socket的关闭
socket.onclose = function(event) {
console.log(‘Client notified socket has closed‘,event);
};
// 关闭Socket....
//socket.close()
};
22、communication
实时跨院通信的两个模块：
（1）跨文档消息通信
跨文档消息通信可以确保iframe、标签页、窗口间安全地进行跨源通信，它把postMessage API定义为发送消息的标准方式。
chatFrame.contentWindow.postMessage(‘hello, world’,’http://www.example.com/’);
接收消息时仅需要在页面中增加一个事件处理函数。当某个消息到达时，通过检查信息的来源来决定是否对这条消息进行处理，可通过事件监听器来进行处理
（2）XMLHttpRequest Level2
XMLHttpRequest Level2实现了跨源XMLHttpRequest，即跨源资源共享
23、离线存储
三个步骤：
1.服务器设置头信息
— AddType text/cache-manifest.manifest
2.html标签里添加：manifest=”xxxx.manifest”
3.写manifest文件：离线的清单列表
先写：CASHE MANIFEST
FALLBACK：第一个网络地址没有获取到，就走第二个缓存的
NETWORK：无论缓存中存在与否，均从网络获取
24、web works---解决js单线程的问题，提高js执行性能
什么是web works
— js的单线程（放入ui队列的个数，利用定时器解决）
— 可以让web应用程序具备后台处理能力，对多线程的支持非常好
Worker API
— new Worker（‘后台处理的js地址’）
— 利用postMessage传输数据，onmessage进行数据接收
— importScript（’到入其它js文件‘）；
CSS3知识点总结
CSS3相关知识总结
1、Css3 选择器 --属性选择器
E[attr]只使用属性名，但没有确定任何属性值
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写
E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
实例：百度文库;
备注：IE7及以上支持;
2、Css3 选择器 –结构性伪类
E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点
实例：新浪头部导航
3、Css3 选择器 --伪类
E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素
Content 属性
4、新增颜色模式
• rgba
r Red 红 0-255
g Green 绿 0-255
b Blue 蓝 0-255
a Alpha 透明 0-1
实例: 背景透明，文字不透明
问题：注意边框颜色透明有问题
• Hsl
H Hue 色调 任意数值
S saturation 饱和度 0%-100%
L Lightness 亮度 0%-100%
5、文字阴影
• 文字阴影
text-shadow：x y blur color, …
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡很卡很卡
• 文字阴影应用
最简单用法
text-shadow:2px 2px 4px black
阴影叠加
text-shadow:2px 2px 0px red, 2px 2px 4px green;
先渲染后面的，再渲染前面的
几个好玩的例子
层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
6、文字描边
-webkit-text-stroke:宽度 颜色
7、新增文本功能
• Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从右向左排列
注意要配合unicode-bidi 一块使用
• Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)
8、自定义文字
• 格式
@font-face {
font-family: ‘miaov‘;
src: url(‘111-webfont.eot‘);
src: url(‘111-webfont.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘111-webfont.woff‘) format(‘woff‘),
url(‘111-webfont.ttf‘) format(‘truetype‘),
url(‘111-webfont.svg#untitledregular‘) format(‘svg‘);
font-weight: normal;
font-style: normal;
}
• 转换字体格式生成兼容代码http://www.fontsquirrel.com/fontface/generator
9、弹性盒模型
• 注意在使用弹性盒模型的时候
父元素必须要加display:box 或 display:inline-box
• Box-orient 定义盒模型的布局方向
Horizontal 水平显示
vertical 垂直方向
• box-direction 元素排列顺序
Normal 正序
Reverse 反序
• box-ordinal-group 设置元素的具体位置
• Box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
• box-pack 对盒子富裕的空间进行管理
Start 所有子元素在盒子左侧显示，富裕空间在右侧
End 所有子元素在盒子右侧显示，富裕空间在左侧
Center 所有子元素居中
Justify 富余空间在子元素之间平均分布
• box-align 在垂直方向上对元素的位置进行管理
Star 所有子元素在据顶
End 所有子元素在据底
Center 所有子元素居中
10、盒模型阴影
• 用法
box-shadow:[inset] x y blur [spread] color
参数
—inset：投影方式
inset：内投影
不给：外投影
—x、y：阴影偏移
—blur：模糊半径
—spread：扩展阴影半径
先扩展原有形状，再开始画阴影
—color
11、其他盒模型新增属性
• box-reflect 倒影
direction 方向 above|below|left|right;
距离
渐变（可选）
• resize 自由缩放
Both 水平垂直都可以缩放
Horizontal 只有水平方向可以缩放
Vertical 只有垂直方向可以缩放
注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放
• box-sizing 盒模型解析模式
Content-box 标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content
12、Css3分栏布局
column-width 栏目宽度
column-count 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线
13、Css3响应式布局
• 媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech ‘听觉‘类似的媒体类型
tty 不适用像素的设备
tv 电视
• 关键字
and
not not关键字是用来排除某种制定的媒体类型
only only用来定某种特定的媒体类型
• 媒体特性
(max-width:600px)
(max-device-width: 480px) 设备输出宽度
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips
• 样式引入（所谓的媒体查询，css3的响应式写法）
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
@import url("css/reset.css") screen;
@media screen{
选择器{
属性：属性值；
}
}
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)”href=”landscape.css”>
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0 auto;}}
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
<link rel="stylesheet" type="text/css" href="styleC.css" media="screen and (max-width: 600px)">
14、移动端meta
• <meta name="viewport" content="" />
width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放 （no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
15、圆角
• border-radius: 1-4个数字 / 1-4个数字
前面是水平，后面是垂直
不给“/”则水平和垂直一样
—border-radius: 10px/5px;
• 参数
各种长度单位都可以：px，%，…
%有时很方便
—但宽高不一致时不太好
• 用法
1个：都一样
—border-radius: 一样
2个：对角
—border-radius: 左上&右下 右上&左下
3个：斜对角
—border-radius: 左上 右上&左下 右下
4个：全部，顺时针
—border-radius: 左上 右上 右下 左下
16、边框
• 边框图片 border-image
border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式
round 平铺,repeat 重复,stretch拉伸
• 边框颜色 border-colors
17、线性渐变
• 线性渐变格式
—linear-gradient([<起点> || <角度>,]? <点>, <点>…)
—只能用在背景上
IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘,endColorstr=‘#ff0000‘,GradientType=‘1‘);
—参数
起点：从什么方向开始渐变 默认：top
left、top、left top
角度：从什么角度开始渐变
xxx deg的形式
点：渐变点的颜色和位置
black 50%，位置可选
• 线性渐变实例
—最简单
red, green
从上到下
—起点位置
left top, red, green
30deg, red, green
逆时针
—repeating-linear-gradient
• 线性渐变实例(2)
—加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px
—配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
—加入背景图片
background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)
实例：百度音乐图片光影效果
18、径向渐变
• radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点：可以是关键字（left,top,right,bottom），具体数值或百分比
形状： ellipse、circle
大小 :具体数值或百分比，也可以是关键字（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持关键字
19、背景
• 多背景
逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;
• 背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
• background-origin ： border | padding | content
border-box： 从border区域开始显示背景。
padding-box： 从padding区域开始显示背景。
content-box： 从content区域开始显示背景。
• background-clip
border： 从border区域向外裁剪背景。
padding： 从padding区域向外裁剪背景。
content： 从content区域向外裁剪背景。
no-clip： 从border区域向外裁剪背景。
• 实例：iphone开机动画
20、遮罩
Mask-image
Mask-position
Mask-repeat
实例：特殊形状的幻灯片效果
21、Transition过渡
• transition-property 要运动的样式 （all || [attr] || none）
• transition-duration 运动时间
• transition-delay 延迟时间
• transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/
实例：幻灯片效果
• 过渡完成事件
Webkit内核： obj.addEventListener(‘webkitTransitionEnd‘,function(){},false);
firefox: obj.addEventListener(‘transitionend‘,function(){},false);
实例：苹果产品展示
实例2：360浏览器 ipad 版导航
22、2D变换
• transform
—rotate() 旋转函数 取值度数
deg 度数
Transform-origin 旋转的基点
—skew() 倾斜函数 取值度数
skewX()
skewY()
—scale() 缩放函数 取值 正数、负数和小数
scaleX()
scaleY()
—translate() 位移函数
translateX()
translateY()
实例1：钟表效果
实例2：怪异的导航
• Transform 执行顺序问题 — 后写先执行
• matrix(a,b,c,d,e,f) 矩阵函数
—通过矩阵实现缩放
x轴缩放 a=x*a c=x*c e=x*e;
y轴缩放 b=y*b d=y*d f=y*f;
—通过矩阵实现位移
x轴位移: e=e+x
y轴位移: f=f+y
—通过矩阵实现倾斜
x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
• matrix(a,b,c,d,e,f) 矩阵函数
—通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
• 变换兼容IE9以下IE版本只能通过矩阵来实现
—filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod=‘auto expand‘);
—IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
23、3d变换
• transform-style（preserve-3d） 建立3D空间
• Perspective 景深
• Perspective- origin 景深基点
• Transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()
实例1：3D盒子
实例2：3D图片切换
24、animation
• 关键帧——keyFrames
—类似于flash
只需指明两个状态，之间的过程由计算机自动计算
—关键帧的时间单位
数字：0%、25%、100%等
字符：from(0%)、to(100%)
—格式
@keyframes 动画名称
{
动画状态
}
• animate——关键帧
格式(2)
@keyframes miaov_test
{
from { background:red; }
to { background:green; }
}
可以只有to
• animate——调用动画
—调用的标签(#div1、xxx:hover之类的)
必要属性
animation-name 动画名称（关键帧名称）
animation-duration 动画持续时间
例如：
-webkit-animation-name: ‘miaov‘;
-webkit-animation-duration: 4s;
例子：进度条
animation-play-state 播放状态（ running 播放 和paused 暂停 ）
• animate——可选属性
—可选属性
animation-timing-function 动画运动形式
linear 匀速。
ease 缓冲。
ease-in 由慢到快。
ease-out 由快到慢。
ease-in-out 由慢到快再到慢。
cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
• 可选属性(2)
—animation-delay 动画延迟
只是第一次
—animation-iteration-count 重复次数
infinite为无限次
—animation-direction 播放前重置
动画是否重置后再开始播放
alternate 动画直接从上一次停止的位置开始执行
normal 动画第二次直接跳到0%的状态开始执行
• animate——和JS结合
—通过class
在class里加入animation的各种属性
直接给元素加-webkit-animation-xxx样式
—animation的问题
写起来麻烦
没法动态改变目标点位置
—obj.addEventListener(‘webkitAnimationEnd‘, function (){}, false);
实例1：无缝滚动