前端重点-整理集合
2014-07-12 12:10 臭小子1983 阅读(675) 评论(0) 编辑 收藏 举报一、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、\0:用于IE8,IE9
4、\9:用于 IE6,IE7,IE8,IE9
5、\9\0:用于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-width:500px) and(max-width:100px)" href="main.css" rel="stylesheet">
内部样式:@media screen and (min-width:400px) and (max-width: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 { width: 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到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
7、动画
1、transition:将动画在一定的时间内执行一次
-webkit-transition: all .5s ease-in-out 1s; // 简单点说这四个值 要执行的事,多长时间执行完,运动的效果,延迟多长时间开始执行
四个属性:
执行变换的属性:transition-property
变换延续的时间:transition-duration
在延续时间段,变换的速率变化transition-timing-function
变换延迟时间transition-delay
li { width: 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、预加载
八、移动端重点
九、算法重点