一、XHTML+CSS重点
一、各浏览器兼容问题和解决方法
1、3px的Bug：ie6下一个容器的浮动和文字之间会产生3px的间距，
解决方法：给浮动的盒子添加一个margin-right:-3px;（与浮动方向反方向）。
2、浮动双边距Bug：当一个盒子像左浮动的同时有一个向左的margin-left的时候，IE6解析这段代码时就会把margin-left解析为原来的2倍，这个就是所谓的浮动双边距BUG。
解决方法：浮动盒子添加属性display:inline;将浮动盒子属性改为内联，或单使用“_”来处理ie6
3、IE6下多出来的文字：产生的原因，是两个设置了float的元素之间加了个注释
解决方法：删除注释
二、布局有哪些方式
1、三列布局中间列自适应
2、让div元素上下左右居中
3、两列布局左固定右自适应，或右固定左列自适应布局
4、两个列的高度相同，根据内容自适应
三、样式的优化级
1、#：id
2、.：类选择器
3、div：标签选择器
4、h1 + p：相邻选择器
5、div < p：子选择器
6、div < li：后代选择器
7、*：通配符
8、input[type=“text”]：属性选择器
9、a:hover：伪类选择器
四、css hack
1、_ ：用于IE6
2、*和+：用于IE6,IE7
3、 ：用于IE8，IE9
4、9：用于 IE6，IE7，IE8，IE9
5、9 ：用于IE9
6、！important：改变样式的优先级不能算做是hack了，不推荐使用
五、haslayout
IE浏览器下的很多bug都是haslayout = false 引起的：
1.文字消失，截断 2.边框消失 3.3像素偏差 4.绝对元素定位错误 5.滤镜不生效 6.滚动页面跳动 7其他（欢迎补充哦~）
使用css来触发haslayout，触发后haslayout=true;
触发方法：
1、position:absolute
2、float:left/right
3、display:inline-block
4、width,height:除“auto”外的任意值
5、zoom:除"normal"外 ...
六、DOCTYPE的各种模式详解
IE有两个渲染方式：（标准标式）和（怪异模式）。
1、处发怪异模式两种方法：
将HTML中的DOCTYPE声明去掉就可以引发怪异模式
将<!DOCTYPE>前面加一个字符，如：a<!DOCTYPE>
2、怪异模式样式有哪些变化
IE下的怪异模式width是padding和border加到一起，而标准模式不会
七、CSS的权重
权重值：
1、内联样式style属性：权值为1000
2、id选择符：权值为100
3、类，伪类、属性选择符：权值为10
4、标签选择符、伪元素：如div p，权值为1
5、其它优先符：通配符选择器等，优先级为0
二、HTML5重点
一、新增标签：
二、canvas功能：
三、本地存储：
存储5MB，分为localStorage永久和sessionStorage临时存储
存储：LocalStorage.setItem(key, val);
获取：localStorage.getItem(key);
全部清除：localStorage.clear();
四、离线存储：
就是将要缓存的文件存储在manifest文件中，cache下存储要缓存的文件，在<html lang="en" manifest='test.manifest'>引用manifest文件，还需要在服务器端修改配置文件
五、 跨文档消息：
六、多线程webworks：
1 var oBox = document.getElementById("box"); 2 // 创建个多线程 3 var oWorks = new Worker("test.js"); 4 oWorks.postMessage(10000); // 向线程发消息 5 oWorks.onmessage = function(event){ // 接收消息事件 6 oBox.innerHTML = event.data; 7 } 8 9 test.js 10 onmessage = function(event){ 11 var num = event.data; 12 var result = 0; 13 for(var i=0; i<num; i++){ 14 result += i; 15 } 16 17 // 向线程创建源送回消息 18 postMessage(result); 19 }
七、获取地理位置：
八、webSocket：
九、video和audio：
三、CSS3重点
一、HTML5定义
<!DOCTYPE HTML>
二、兼容不同适配器
外部样式：<link media="screen and(min-500px) and(max-100px)" href="main.css" rel="stylesheet">
内部样式：@media screen and (min-400px) and (max-800px) {body{background:blue;}} // 可视区大于400并小于800
三、viewport虚拟窗口
手机浏览器把页面放在一个虚拟窗口中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
各属性：
1、width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
2、height：和 width 相对应，指定高度。
3、initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
4、maximum-scale：允许用户缩放到的最大比例。
5、minimum-scale：允许用户缩放到的最小比例。
6、user-scalable：用户是否可以手动缩放
四、定义缓存
1、手机缓存一般通过meta元素来设置，<meta http-equive="Cache-Control" content="">
content的可选值：
1、public：表示可以在任何地方缓存网页，如果定义为public，通常代理服务器作为一个共享缓存可以缓存到该网页
2、private：表示单个用户所私有，
3、no-cache：表示不缓存该网页，即使相同的客户重复使用，也不会缓存
4、no-store：响应和导致该响应的请求不能存储在任何存区内，
5、no-transform：
6、must-revalidate:
7、proxy-revalidate:
8、max-age:以秒为单位定义缓存的最大过期时间 content="max-age:3600" 将网页缓存存为一个小时3600秒
9、s-maxage:用于代理的共享缓存，它可以 max-age
2、定义网页到期
<meta http-equiv="Expires" content="Ture, 20 Aug 1996 14:25:27 GMT">
3、定义应用程序名
<meta http-equiv="application-name" content="WWW聊天室">
五、选择器
1、基本选择器：
*：通配符 . 类选择符 #id选择符 li元素选择符 .nav li 后代选择符 .nav < li 子选择符
.nav + li 相邻选择符 .nav ~li 兄弟选择符 .nav li， .header li组合选择符
2、属性选择器：
[attr] 属性名匹配 [attr=value] 指定属性值匹配 [name*='s'] 属性中包括指定值的匹配
[data-attr^='obj'] 属性值中以obj开头的匹配 [data-attr$='obj'] 属性值中以obj结尾的匹配
3、结构性伪类选择器：
:first-line 元素中第一行的样式 :first-letter 元素中第一个字母 :before 指定元素之前插入内容
:after 指定元素之后插入内容 :first-child 指定第一个元素 :last-child 指定最后一个元素
:nth-child(n) 指定第几个元素 :nth-last-child(n) 指定从后数的第几个元素 :only-child 获取元素中只有一个子元素
4、UI元素伪类选择器：
:hover 鼠标移上去 :active 鼠标按下未放开触发 :foucs 处于当前状态
5、伪类与伪元素
伪类使用一个：，如a:hover 伪元素使用两个：: 如 .box::first-child
区别：伪元素可以独自使用，伪类不可以
六、css3样式
兼容开头：-o 、-webkit、-moz
1、阴影：盒阴影、文字阴影
格式：box-shadow：投影方式， 横向长度， 垂直长度， 阴影模糊半径， 阴影扩展半径， 阴影颜色
box-shadow：2px 2px 1px 3px rgba(0,0,0,0.5); // 内阴影加入inset
text-shadow：2px 2px 1px 3px rgba(0,0,0,0.5); // 内阴影加入inset
2、边框：
圆角样式：border-radius：4px; // 四个角的弧度为4px
3、背景：
背景渐变：linear-gradient：
background-image:-webkit-linear-gradient(left , #ffff00, #000); // 线性渐变从左开始，黄色到黑色
背景图的尺寸：background-size:
contain：与cover相反，是把背景图缩小到适合容器的
cover：背景图片自己会放大到适合容器的尺寸
背景裁剪：background-clip
指定背景的范围：
border-box：
4、文本
文本换行 web-break：
word-break的三个值：1、normal：使用浏览器默认换行 2、keep-all：只能在半角空格或连字符处换行 3、break-all：允许在单词内换行
字体图标 @font-face：
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
5、变型 transform
旋转 transform：rotate(45deg); // 顺时针和负为逆时针
移动 transform：translate(x, y); // x、y轴移动，如果单独对x轴移动transform：translateX(val);
缩放 transform：salce(1.5); // 放大1.5倍
扭曲 transform：skew(30deg,10deg); //
改变元素的基点位置 transform-origin：20% 20%; // 正常是以元素的中心来作为基点 0 0为左上角
6、3D变形
transform-style：preserve-3d或flat // flat将所有子元素转为2D元素
.box { 200px; height: 200px; background: #ccc; -webkit-transform-style:preserve-3d; -webkit-transform:rotate3d(.2, 1, .6, 69deg); position: absolute; left: 50%; top: 50%; }
1、translate3d(tx, ty, tz) 3D移动
tx：代表横向坐标位移向量的长度；
ty：代表纵向坐标位移向量的长度；
tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。
2、scale3d(sx,sy,sz) 3D缩放
3、rotate3d(x,y,z,a) 3D旋转（.6，1，.6，45deg）
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
7、动画
1、transition：将动画在一定的时间内执行一次
-webkit-transition: all .5s ease-in-out 1s; // 简单点说这四个值 要执行的事，多长时间执行完，运动的效果，延迟多长时间开始执行
四个属性：
执行变换的属性：transition-property
变换延续的时间：transition-duration
在延续时间段，变换的速率变化transition-timing-function
变换延迟时间transition-delay
li { 200px; height: 200px; background: #ccc; position: absolute; left: 50%; top: 50%; display: block; margin-left:-100px; margin-top: -100px; box-shadow:4px 4px 2px rgba(0, 0, 0, .4);
li:active{ -webkit-transform-style:preserve-3d; -webkit-transform:rotate3d(.2, 1, .6, 69deg); -webkit-transition:all 3s ease-in-out 1s; }
2、animate
-webkit-animation：pic_2_ico1 5.5s ease infinite; // 动画名 执行时间 动画频率 延迟时间 循环次数(infinite为无限次)
@-webkit-keyframes pic_2_ico1{
0%{-webkit-transform:rotate(0deg);}
50%{opacity:1}
100%{-webkit-transform:rotate(360deg);opacity:0.6}
}
四、JavaScript重点
一、DOM文档对象模型
二、函数
1、函数声明和函数表达式
函数声明：function test(){ … }
函数表达式：function test（函数名可写可不写）(){ … }，如果不写名为匿名函数表达式
将匿名函数表达式赋给变量：
var oTest = function(){ … }
(function(w){ … })(winow);
2、递归
函数调用函数自身这个过程叫递的动作，在最后一次在判断中止条件，可以执行归的动作，
当一个函数调用递归，函数的计算结果暂时被挂起.
1 <script> 2 function recursive(num){ 3 if(num == 1){ 4 return num; 5 } 6 else{ 7 return num * recursive(num-1); 8 } 9 } 10 11 var s = recursive(5); // 210 12 13 /* 14 * 调用方式 15 * 5 * recursive(4) 16 * 5 * 4 * recursive(3) 17 * 5 * 4 * 3 * recursive(2) 18 * 5 * 4 * 3 * 2 *recursive(1) 19 * 5 * 4 * 3 * 2 *1 20 * 5 * 4 * 3 * 2 21 * 5 * 4 * 6 22 * 5 * 24 23 * */ 24 console.log(s); 25 </script>
3、拉圾回收机制：
在执行完函数后，内部变量将会从内存中自动删除，除闭包外，因为闭包的一个函数还引用着外层函数的变量。
闭包：函数嵌套函数，内部函数调用外部函数的变量，导致拉圾回收机制不能回收，变量一直存在内存中，IE下容易内存泄露。
闭包的好处：1、希望一个变量长期的在内存中 2、避免全局变量的污染
1 function fn1(){ 2 var a1 = 5; 3 function fn2(){ 4 alert(a1); 5 } 6 return fn2; 7 } 8 var temp = fn1(); 9 temp(); 10 // 这个闭包会导致内存泄露，无论跳转到哪个页面oBox都存在，导致内存不断累加，cpu负载加重 11 window.onload = function(){ 12 var oBox = document.getElementById("box"); 13 oBox.onclick = function(){ 14 oBox.innerHTML = "aaa"; 15 } 16 17 // 解决方法，离开页面时将对象释放 18 window.onunload = function(){ 19 oBox = null; 20 } 21 }
三、事件
1、事件流：
事件流就是描述页面中接收事件的顺序，IE事件流是事件冒泡流，Netscape是事件捕获流。
DOM事件流包括三个阶段：事件捕获、处理目标阶段、事件冒泡
2、 事件捕获和冒泡：
<div id="box">aaaa</div>
冒泡：如果点击box，会沿着DOM树一直向上传播直到document对象
捕获：与冒泡相反，先从document对象向下传播直到找到box为止
3、事件处理
标准：addEventListener、removeElementListener
ie下：attachEvent、detachEvent
3、 事件源：不管在哪个事件中，只要你操作的那个元素就是事件源
1 oUl.onmouseover = function(event){ 2 var ev = event || window.event; 3 var target = ev.target || ev.srcElement; // 获取到事件源 4 console.log(target.innerHTML); 5 }
4、 事件委托：利用冒泡原理，把事件加到父级上，触发执行元素
好处：1、提高性能 2、新添加的元素也会有事件，因为事件是在父级上jquery里的live和delegate()事件都是通过事件委托原理
1 var oBox = getId("box1"); 2 oBox.onmouseover = function(event){ 3 var evt = event || window.event; 4 var target = evt.target || evt.srcElement; 5 // 判断一下处理的标签是否正确 6 if(target.tagName.toLowerCase() == "li"){ 7 target.style.backgroundColor = "#ffff00"; 8 } 9 } 10 oBox.onmouseout= function(event){ 11 var evt = event || window.event; 12 var target = evt.target || evt.srcElement; 13 if(target.tagName. toLowerCase() == "li"){ 14 target.style.backgroundColor = "#fff"; 15 } 16 }
5、自定义事件
6、事件类型
1、UI事件：
load、unload：当页面、图像、框架、<object>加载完后触发和卸载后触发
resize、scroll：窗口大小改变和滚动条滚动时触发。
1 // 页面加载完成 2 window.onload = function(){ 3 4 // 创建图像对象 5 var oImg = new Image(); 6 oImg.src = "..."; 7 oImg.onload = function(){ 8 // 图像加载完成 9 } 10 }
2、焦点事件：
blur：失去焦点 focus：获取焦点
3、鼠标事件：
onclick：点击 dblclick：双击事件 mousedown：按下鼠标 mouseup：抬起鼠标
mouseover、mouseenter：按下鼠标左健但mouseenter不冒泡
mouseout、mouseleave：鼠标离开目标触发，mouseleave不冒泡
button属性
返回鼠标按下的键：1为左键 2为右键 3为中间滚轮键
1 var oBox = document.getElementById("box"); 2 3 function addEvent(obj, type, fn){ 4 if(obj.addEventListener){ 5 obj.addEventListener(type, fn, true); 6 } 7 else{ 8 obj.attachEvent("on"+type, fn); 9 } 10 } 11 12 addEvent(document.body, "mousedown", function(e){ 13 var evt = e || window.event; 14 var but = evt.button ? evt.button : evt.which; 15 switch (but){ 16 case 1: 17 console.log("左键"); 18 break; 19 case 2: 20 console.log("右键"); 21 evt.preventDefault ? evt.preventDefault() : evt.returnValue = true; 22 break; 23 case 3: 24 console.log("中键"); 25 break; 26 default : break; 27 } 28 })
4、滚轮事件：
IE：mousewheel 向上120、向下-120 FF：DOMMouseScroll 向上-3、向下3
返回滚动向上和向下的值
detail：支持FF
wheelDelta：支持/IE/Opera/Chrome
1 var oBox = document.getElementById("box"); 2 var isIE = navigator.userAgent; 3 var eDtail, evt; 4 5 function addEvent(obj, type, fn){ 6 if(obj.addEventListener){ 7 obj.addEventListener(type, fn, true); 8 } 9 else{ 10 obj.attachEvent("on"+type, fn); 11 } 12 } 13 14 if(isIE.indexOf("Firefox") > -1){ // ff 15 addEvent(document, "DOMMouseScroll", function(e){ 16 evt = e || window.event; 17 eDtail = evt.detail ? evt.detail : evt.wheelDelta; 18 oBox.innerHTML = "ff"+ eDtail; 19 }) 20 } 21 else{ // ie、chrome、opera、Safari 22 addEvent(document, "mousewheel", function(e){ 23 evt = e || window.event; 24 eDtail = evt.detail ? evt.detail : evt.wheelDelta; 25 oBox.innerHTML = "ie" + eDtail; 26 }) 27 }
5、文本事件：
6、键盘事件：
keydown：按下按键，按住不放会重复事件 keypress：按下字符键触发，按住不放会重复事件 keyup：抬盘按键
按键码keyCode、which、charCode属性：
1 addEvent(document, "keypress", function(e){ 2 var e = e || window.event; 3 /* 4 * 在IE下：支持keyCode，不支持which和charCode,二者值为 undefined 5 * 在Firefox下：支持keyCode，除功能键外，其他键值始终为 0， 支持which和charCode，二者的值相同 6 * 在Opera下：支持keyCode和which，二者的值相同，不支持charCode，值为 undefined 7 */ 8 var curKey = e.keyCode || e.which || e.charCode; 9 console.log(curKey); 10 if(curKey === 13){ 11 console.log("已经按下回车"); 12 } 13 })
7、菜单事件contextmenu
1 var oBox = document.getElementById("box"); 2 3 function addEvent(obj, type, fn){ 4 if(obj.addEventListener){ 5 obj.addEventListener(type, fn, true); 6 } 7 else{ 8 obj.attachEvent("on"+type, fn); 9 } 10 } 11 12 // 停闭浏览器默认的菜单 13 addEvent(window, "contextmenu", function(e){ 14 var e = e || window.event; 15 if(e.preventDefault){ 16 e.preventDefault(); 17 } 18 else{ 19 e.returnValue = true; 20 } 21 }) 22 23 // 右击oBox时打开自定义菜单 24 addEvent(oBox, "contextmenu", function(e){ 25 // 自定义菜单 26 })
8、DOMContentLoaded和readystatechange
DOMContentLoaded：在DOM树加载完就会触发，不会理会javascript、图像、css或其它资源是否下载完
1 function addEvent(obj, type, fn){ 2 if(obj.addEventListener){ 3 obj.addEventListener(type, fn, true); 4 } 5 else{ 6 obj.attachEvent("on"+type, fn); 7 } 8 } 9 10 addEvent(window, "load", function(){ 11 console.log("a"); // 后输出 12 }) 13 14 addEvent(document, "DOMContentLoaded", function(){ 15 console.log("b"); // 先输出 16 });
readystatechange：对返回文档或元素的加载信息的状态，每个对象都有一个readyState和complete属性;
IE下使用readyState 标准浏览器complete
0：未初始化 uninitialized 1：正在加载 loading 2：加载完毕 loaded
3：可以操作但未加载完成 interactive 4：加载完毕可以对数据进行操作 complete
1 var oImg = new Image(); 2 oImg.src = "http://zcimg.zcool.com.cn/zcimg/d49653a64c47000001791f12a170.jpg"; 3 4 addEvent(oImg, "load", function(){ 5 // IEreadyState是否等于complete，其它浏览器是通过complete是否为true来判断是否加载完成 6 console.log("complete:" + oImg.complete + "，readyState：" + oImg.readyState); 7 if(oImg.complete == true || oImg.readyState == "complete"){ 8 console.log("图片预加载成功"); 9 var timer = setTimeout(function(){ 10 document.getElementsByTagName("body")[0].appendChild(oImg); 11 }, 3000); 12 } 13 })
7、关于事件的其它
oBox.onclick(e){ }
1、event对象的兼容
var evt = e || window.event;
2、事件目标
var oTarget = evt.target || evt.srcElement;
3、获取事件类型
var getType = evt.type; // click
4、阻止冒泡和默认事件
阻止冒泡：evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
取消默认事件：evt.preventDefault ? evt.preventDefault() : evt.returnValue = true;
四、对象
1、对象引用：
1 // 变量的赋值关系 2 var a = 10; 3 var b = a; 4 b += 10; 5 alert(b); // 20 6 alert(a); // 10 7 8 // 对象的引用 9 var a = [1, 2, 3]; 10 var b = a; 11 b.push(4); 12 alert(b); // 1,2,3,4 13 alert(a); // 1,2,3,4 14 15 var a = [1, 2, 3]; 16 var b = a; 17 b = [1,2,3,4]; // 这块相当于b又创建了一个对象，而不是引用a 18 alert(b); // 1,2,3,4 19 alert(a); // 1,2,3
2、克隆对象但不引用对象
1 // 如果这种方法克隆对象，改变obj2的时候obj属性也会改变 2 /* 3 var obj2 = obj; 4 obj2.test = 20; 5 6 alert("obj:" + obj.test); // 20 7 alert("obj2:" + obj2.test); // 20 8 */ 9 10 // 克隆方法，不改变obj，将每个键和值复制过去而不是对象 11 function extend(o){ 12 var oObj = {}; 13 for(var key in o){ 14 console.log(o[key]); 15 oObj[key] = o[key]; 16 } 17 return oObj; 18 } 19 var obj2 = extend(obj); 20 obj2.test = 20; 21 alert("obj:" + obj.test); // 10 22 alert("obj2:" + obj2.test); // 20
五、ajax
XMLHttpRequest对象：标准下创建 new XMLHttpRequest()、iE下使用new ActiveXObject.
open("get", "data.php", false)： 调用open并不会真正发送请求，参数：请求方式get或post，请求地址，是否异步请求.
setRequestHeader()：传入头字段名称.
send(null)：请求主体发送的数据，不需要传入Null.
responseText：响应以为文本返回.
responseXML：响应以xml格式返回.
status：响应的HTTP状态，如果为200响应成功，404请求地址不存在.
statusText：HTTP说明.
readyState：表示请求或响应过程的阶段变化。
0：未初始化，未调用open 1：启动，已调用open，未调用send();
2：发送，已调用send，但未接到数据 3：接收：已经接收到部分响应数据
4：完成，已接收全部响应数据，可以使用
onreadystatechange事件：检测readyState的变化
2、HTTP头信息
Accept：浏览器能够处理的内容类型。
Accept-Charset：浏览器能够显示的字符集。
Accept-Encoding：浏览器能够处理的压缩编码。
Accept-Language：浏览器当前设置的语言。
Connection：浏览器与服务器之间连接的类型。
Cookie：当前页面设置的任何Cookie。
Host：发出请求的页面所在的域 。
Referer：发出请求的页面的URI。注意，HTTP规范将这个头部字段拼写错了，而为保证与规范一致，也只能将错就错了。（这个英文单词的正确拼法应该是referrer。）
User-Agent：浏览器的用户代理字符串。
1 // 创建XMLHttpRequest对象 2 function newRequest(){ 3 var ajax = false 4 if(window.XMLHttpRequest) { 5 ajax = new XMLHttpRequest(); 6 } 7 else if (window.ActiveXObject) { 8 try { 9 ajax = new ActiveXObject("Msxml2.XMLHTTP"); 10 } 11 catch (e) { 12 try { 13 ajax = new ActiveXObject("Microsoft.XMLHTTP"); 14 } catch (e) {} 15 } 16 } 17 return ajax; 18 } 19 20 // GET请求 21 function ajaxGet(url, data, asyn, fn){ 22 var xhr = newRequest(); 23 if(!xhr){ return false; } 24 25 xhr.open("get", url + "?" + data, asyn); 26 xhr.send(null); 27 xhr.onreadystatechange = function(){ 28 if(xhr.status == 200 && xhr.readyState == 4){ 29 if(fn){ 30 fn(xhr.responseText); 31 } 32 else{ 33 return xhr.responseText; 34 } 35 } 36 } 37 } 38 39 // POST请求 40 function ajaxPOST(url, data, asyn, fn){ 41 var xhr = newRequest(); 42 if(!xhr){ return false; } 43 44 xhr.open("post", url, asyn); 45 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 46 xhr.setRequestHeader("If-Modified-Since","0"); 47 xhr.send(data); 48 xhr.onreadystatechange = function(){ 49 if(xhr.status == 200 && xhr.readyState == 4){ 50 if(fn){ 51 fn(xhr.responseText); 52 } 53 else{ 54 return xhr.responseText; 55 } 56 } 57 } 58 }
六、跨域请求
存在跨域和不存在跨域的问题：
1、 同域下和同域不同文件夹下，不存在跨域
2、 子域存在跨域
3、 不同域也是存在跨域问题
解决跨域的方法：
1、 子域了主域之间
方法1：将主域和子域都设置document.domain = “www.365.com”;
方法2：使用script标签的src，也就是jsonp的形式Jsonp=json+padding()
方法3：通过loaction.hash值
方法4：通过iframe、
方法5：window.name
方法6：flash
方法7：HTML5 postMessage
Jsonp：请求服务器端文件，服务器将函数和返回的值都打印到页面中，showBox来调用这个方法
1 <script> 2 function showBox(json){ 3 console.log(json.data); 4 } 5 </script> 6 <script src="jsonp.php?callback=showBox"></script>
七、操作iframe:
1、通过ifr.contentWindow来获取iframe的window对象，都兼容，但在chrome下需要有服务器环境才可以，chrome安全沙箱的原因
2、通过ifr.conentDocument来获取iframe的document对象，但ie6、7都不支持
例：父页面操作iframe页面
1 var oIfr = document.getElementById("ifr"); 2 var oBtn = document.getElementById("btn"); 3 oBtn.onclick = function(){ 4 var docIfr = oIfr.contentWindow.document.getElementById("listNum"); 5 docIfr.style.backgroundColor = "#ff0000"; 6 }
例：iframe页面操作父页面
通过window.parent()，返回的是父页面的window对象
1 var oSelectBtn = document.getElementById("selectBtn"); 2 selectBtn.onclick = function(){ 3 var parentIfr = window.parent.document.getElementById("ifr"); 4 parentIfr.style.width = "500px"; 5 parentIfr.style.height = "300px"; 6 }
通过window.top为找到最顶层，例如：index页面嵌套一个iframe为demo1.html，demo1中又嵌套一个iframe为demo2，这样如果在demo2中使用window.parent，其实找到的demo1这个页面，如果使用window.top就可以直接找到index.html这个页面
3、iframe的onload事件
1 window.onload = function(){ 2 var oIfr = document.getElementById("ifr"); 3 oIfr.src = "index.html"; 4 addEvent(oIfr, "load", function(){ 5 alert("aa"); 6 }) 7 8 function addEvent(obj, type, fn){ 9 if(obj.addEventListener){ 10 obj.addEventListener(type, fn, true); 11 } 12 else{ 13 obj.attachEvent("on"+type, fn); 14 } 15 } 16 }
八、正则表达式
1、 test()、search()、replace()、Match()：
str.test(reg)：返回一个布尔值，如果查找到返回true，否则返回false
str.search(reg)：查找匹配的位置，如果没有找到返回-1
str.replace(reg, str1)：匹配字符并替换
str.match(reg)：若匹配不到返回null，否则返回数组
九、JSON与JSON对象
1、json的三种定义：
var jsonStr = '{"name": "haha", "age": 20}'; // 注意js中定义json串里面key要使用""，如果使用单引号会报错
简单值：{"name": "haha", "age": 20}可以在json中使用字符串、数字、布尔、null，但不能在json中使用undefined;
json对象：{"data": {"name": "haha", "age": 20}， "data1": {"name": "haha1", "age": 21}}
json数组：[ {"name": "haha", "age": 20}， {"name": "haha1", "age": 21}]
json与js对象的区别：json是没有变量的，果断json的键只能是字符串，而js对象的键可以不是字符串
2、json串与对象的互转
json字符串转为json对象：
方法一：eval()
var data = eval("('+ d +')");
方法二：stringify()：将对象转成json串、parse()：将json串转成对象
IE6、7不支持这两个方法，只在ECMAScript5中才被引入，所以需要下载：https://github.com/douglascrockford/JSON-js/blob/master/json2.js
1 if(JSON.parse){ 2 var str = '{"name":"haha","age":20}'; 3 var oJson = JSON.parse(str); 4 console.log(oJson.name); 5 } 6 7 if(JSON.stringify){ 8 var jsonStr = JSON.stringify(oJson); 9 console.log(typeof jsonStr, jsonStr); 10 }
方法三：jquery将json串转成json对象$.parseJSON(jsonStr)
四、DOM
一、览器的渲染方式有关系，一般浏览器的渲染操作：
1、解析HTML结构
2、加载外部脚本和样式
3、解析并执行脚本
4、构造DOM模型
5、加载外部图片等外部文件
6、页面加载完成
五、jQuery重点
六、javascript性能重点
一、js性能：
1、 尽可能减少Javascript与DOM的操作
1 var str = "" 2 var oBox = $("#box"); 3 for(var i= 0,len=5000; i<len; i++){ 4 str += "s"; 5 } 6 oBox.html(str);
2、 使用innerHTML要比appendChild要快
1 /* webkit内核：DOM的innerHTML性能要好 */ 2 var str = "" 3 var oBox = document.getElementById("box"); 4 for(var i= 0,len=5000; i<len; i++){ 5 str += "<li>"+ i +"</li>"; 6 } 7 oBox.innerHTML = str; 8 9 var str = "" 10 var oBox = document.getElementById("box"); 11 for(var i= 0,len=5000; i<len; i++){ 12 var oLi = document.createElement("li"); 13 oBox.appendChild(oLi); 14 } 15 oBox.innerHTML = str;
3、 可以减少DOM操作的几个方法
1 // 第一种方法：cloneNode克隆节点 2 var oBox = document.getElementById("box"); 3 var oLi = document.createElement("li"); 4 oLi.innerHTML = "aa"; 5 6 console.time("a"); 7 for(var i= 0,len=5000; i<len; i++){ 8 var oCreateLi = oLi.cloneNode(true); 9 oBox.appendChild(oLi); 10 } 11 console.timeEnd("a"); 12 13 // 第二种方法：访问元素集合，尽量使用局部变量 14 // 获取两个节点，但都使用了document对象 15 var obox = document.getElementById("box"); 16 var oLis = document.getElementsByTagName("li"); 17 18 // 可以改成 19 var oDoc = document; 20 var obox = oDoc.getElementById("box"); 21 var oLis = obox.getElementsByTagName("li");
4、DOM与浏览器的优化
重排：改变页面的内容，当js改变了页面一个元素的位置、宽、高，这个过程叫重排。
重绘：浏览器显示的内容，当执行完重排后浏览器会把内容显示出来，这个过程叫重绘，重排和重绘都会消耗浏览器的性能。
如果比如改变元素的背景颜色文字颜色，这样只触发了重绘的过程不会进行操作重排
减少重排、重绘的几个方法：
1、 尽量在appendChild之前添加操作
1 var oBox = document.getElementById("box"); 2 var oLi = document.createElement("li"); 3 oLi.innerHTML = "aa"; 4 console.time("a"); 5 for(var i= 0,len=5000; i<len; i++){ 6 var oLi = document.createElement("li"); 7 oLi.innerHTML = "哈哈"; 8 9 // 如果将innerHTML放到appendChild下执行就会先执行重排在执行重绘 10 // 如果放到appendChild之前执行，只执行重排，不会执行重绘 11 oBox.appendChild(oLi); 12 } 13 console.timeEnd("a");
2、文档碎片
1 var oBox = document.getElementById("box"); 2 var oFrg = document.createDocumentFragment(); // 创建一个文档碎片 3 for(var i= 0,len=5000; i<len; i++){ 4 var oLi = document.createElement("li"); 5 oFrg.appendChild(oLi); // 将创建的元素都放到文档碎片中，相当于放到这个袋子中 6 } 7 oBox.appendChild(oFrg); // 最后插入的只是袋子
七、前端新技术性能重点
一、css预处理less和sass
二、sea.js
用于模块化，对项目模块间依赖关系较强的处理比较好
三、nodejs
服务器端的js，可以处理线程，scoket、并发和数据库的操作
四、前端自动构建工具Grunt
五、新技术
1、懒加载lazyload
2、预加载