前端重點－整理集合

時間 2019-12-10

原文原文鏈接

1、XHTML+CSS重點

1、各瀏覽器兼容問題和解決方法javascript

　　一、3px的Bug：ie6下一個容器的浮動和文字之間會產生3px的間距，php

　　　　解決方法：給浮動的盒子添加一個margin-right:-3px;（與浮動方向反方向）。css

　　二、浮動雙邊距Bug：當一個盒子像左浮動的同時有一個向左的margin-left的時候，IE6解析這段代碼時就會把margin-left解析爲原來的2倍，這個就是所謂的浮動雙邊距BUG。
　　　　解決方法：浮動盒子添加屬性display:inline;將浮動盒子屬性改成內聯，或單使用「_」來處理ie6html

　　三、IE6下多出來的文字：產生的緣由，是兩個設置了float的元素之間加了個註釋
　　　　解決方法：刪除註釋前端

2、佈局有哪些方式java

　　一、三列布局中間列自適應node

　　二、讓div元素上下左右居中jquery

　　三、兩列布局左固定右自適應，或右固定左列自適應佈局css3

　　四、兩個列的高度相同，根據內容自適應git

3、樣式的優化級

一、#：id

二、.：類選擇器

三、div：標籤選擇器

四、h1 + p：相鄰選擇器

五、div < p：子選擇器

六、div < li：後代選擇器

七、*：通配符

八、input[type=「text」]：屬性選擇器

九、a:hover：僞類選擇器

4、css hack

一、_ ：用於IE6　

二、*和+：用於IE6,IE7

三、\0：用於IE8，IE9

四、\9：用於 IE6，IE7，IE8，IE9

五、\9\0：用於IE9

六、！important：改變樣式的優先級不能算作是hack了，不推薦使用

5、haslayout

IE瀏覽器下的不少bug都是haslayout = false 引發的：

1.文字消失，截斷　　2.邊框消失　　3.3像素誤差　　4.絕對元素定位錯誤　　5.濾鏡不生效　　6.滾動頁面跳動　7其餘（歡迎補充哦~）

使用css來觸發haslayout，觸發後haslayout=true;

觸發方法：

一、position:absolute

二、float:left/right

三、display:inline-block

四、width,height:除「auto」外的任意值

五、zoom:除"normal"外 ...

6、DOCTYPE的各類模式詳解

IE有兩個渲染方式：（標準標式）和（怪異模式）。

一、處發怪異模式兩種方法：

　　將HTML中的DOCTYPE聲明去掉就能夠引起怪異模式

　　將<!DOCTYPE>前面加一個字符，如：a<!DOCTYPE>

二、怪異模式樣式有哪些變化

　　IE下的怪異模式width是padding和border加到一塊兒，而標準模式不會

7、CSS的權重

權重值：

一、內聯樣式style屬性：權值爲1000

二、id選擇符：權值爲100

三、類，僞類、屬性選擇符：權值爲10

四、標籤選擇符、僞元素：如div p，權值爲1

五、其它優先符：通配符選擇器等，優先級爲0

2、HTML5重點

1、新增標籤：

2、canvas功能：

3、本地存儲：

存儲5MB，分爲localStorage永久和sessionStorage臨時存儲

存儲：LocalStorage.setItem(key, val);

獲取：localStorage.getItem(key);

所有清除：localStorage.clear();

4、離線存儲：

　　就是將要緩存的文件存儲在manifest文件中，cache下存儲要緩存的文件，在<html lang="en" manifest='test.manifest'>引用manifest文件，還須要在服務器端修改配置文件

5、跨文檔消息：

6、多線程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 }

7、獲取地理位置：

8、webSocket：

9、video和audio：

3、CSS3重點

1、HTML5定義

　　<!DOCTYPE HTML>

2、兼容不一樣適配器

　　外部樣式：<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

3、viewport虛擬窗口

　　手機瀏覽器把頁面放在一個虛擬窗口中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其餘手機瀏覽器也基本支持。

　　各屬性：

　　一、width：控制 viewport 的大小，能夠指定的一個值，若是 600，或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 CSS 的像素）。

　　二、height：和 width 相對應，指定高度。

　　三、initial-scale：初始縮放比例，也便是當頁面第一次 load 的時候縮放比例。

　　四、maximum-scale：容許用戶縮放到的最大比例。

　　五、minimum-scale：容許用戶縮放到的最小比例。

　　六、user-scalable：用戶是否能夠手動縮放

4、定義緩存

　　一、手機緩存通常經過meta元素來設置，<meta http-equive="Cache-Control" content="">

content的可選值：
一、public：表示能夠在任何地方緩存網頁，若是定義爲public，一般代理服務器做爲一個共享緩存能夠緩存到該網頁
二、private：表示單個用戶所私有，
三、no-cache：表示不緩存該網頁，即便相同的客戶重複使用，也不會緩存
四、no-store：響應和致使該響應的請求不能存儲在任何存區內，
五、no-transform：
六、must-revalidate:
七、proxy-revalidate:
八、max-age:以秒爲單位定義緩存的最大過時時間 content="max-age:3600" 將網頁緩存存爲一個小時3600秒
九、s-maxage:用於代理的共享緩存，它能夠 max-age

　　二、定義網頁到期
　　　　<meta http-equiv="Expires" content="Ture, 20 Aug 1996 14:25:27 GMT">

　　三、定義應用程序名
　　　　<meta http-equiv="application-name" content="WWW聊天室">

5、選擇器

　　一、基本選擇器：

　　　　*：通配符　　　　. 類選擇符　　　　#id選擇符　　　　li元素選擇符　　　　.nav li 後代選擇符　　　　.nav < li 子選擇符

　　　　.nav + li 相鄰選擇符　　　　.nav ~li 兄弟選擇符　　　　.nav li， .header li組合選擇符

　　二、屬性選擇器：

　　　　[attr] 屬性名匹配　　　　[attr=value] 指定屬性值匹配　　　　[name*='s'] 屬性中包括指定值的匹配

　　　　[data-attr^='obj'] 屬性值中以obj開頭的匹配　　　　[data-attr$='obj'] 屬性值中以obj結尾的匹配

　　三、結構性僞類選擇器：

　　　　:first-line 元素中第一行的樣式　　　　:first-letter 元素中第一個字母　　　　:before 指定元素以前插入內容　　　　

　　　　:after 指定元素以後插入內容　　　　 :first-child 指定第一個元素　　　　　:last-child 指定最後一個元素

　　　　:nth-child(n) 指定第幾個元素　　　　 :nth-last-child(n) 指定從後數的第幾個元素　　　　:only-child 獲取元素中只有一個子元素

　　四、UI元素僞類選擇器：

　　　　:hover 鼠標移上去　　　　:active 鼠標按下未放開觸發　　　　:foucs 處於當前狀態　　　　

　　五、僞類與僞元素

　　　　僞類使用一個：，如a:hover 　　　　僞元素使用兩個：: 如 .box::first-child

　　　　區別：僞元素能夠獨自使用，僞類不能夠　　

6、css3樣式

　　兼容開頭：-o 、-webkit、-moz

　　一、陰影：盒陰影、文字陰影

　　　　格式：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

　　二、邊框：

　　　　圓角樣式：border-radius：4px;　　　// 四個角的弧度爲4px

　　三、背景：

　　　　背景漸變：linear-gradient：

　　　　background-image:-webkit-linear-gradient(left , #ffff00, #000);　　　　// 線性漸變從左開始，黃色到黑色

　　　　背景圖的尺寸：background-size:

　　　　　　contain：與cover相反，是把背景圖縮小到適合容器的

　　　　　　cover：背景圖片本身會放大到適合容器的尺寸

　　　　背景裁剪：background-clip

　　　　　　指定背景的範圍：

　　　　　　border-box：

　　四、文本

　　　　文本換行 web-break：

　　　　word-break的三個值：一、normal：使用瀏覽器默認換行　　　二、keep-all：只能在半角空格或連字符處換行　　　三、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 */
}

　　五、變型 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爲左上角

　　六、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%; }

一、translate3d(tx, ty, tz) 3D移動

tx：表明橫向座標位移向量的長度；
ty：表明縱向座標位移向量的長度；
tz：表明Z軸位移向量的長度。此值不能是一個百分比值，若是取值爲百分比值，將會認爲無效值。

二、scale3d(sx,sy,sz) 3D縮放

三、rotate3d(x,y,z,a) 3D旋轉（.6，1，.6，45deg）

x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，若是其值爲正值，元素順時針旋轉，反之元素逆時針旋轉。

　　七、動畫

　　　　一、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; }

　　　　二、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}

}

4、JavaScript重點

1、DOM文檔對象模型

2、函數

一、函數聲明和函數表達式

函數聲明：function test(){ … }

函數表達式：function test（函數名可寫可不寫）(){ … }，若是不寫名爲匿名函數表達式

將匿名函數表達式賦給變量：

var oTest = function(){ … }

(function(w){ … })(winow);

二、遞歸

　　函數調用函數自身這個過程叫遞的動做，在最後一次在判斷停止條件，能夠執行歸的動做，

　　當一個函數調用遞歸，函數的計算結果暫時被掛起.

 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>

三、拉圾回收機制：

在執行完函數後，內部變量將會從內存中自動刪除，除閉包外，由於閉包的一個函數還引用着外層函數的變量。

閉包：函數嵌套函數，內部函數調用外部函數的變量，致使拉圾回收機制不能回收，變量一直存在內存中，IE下容易內存泄露。

閉包的好處：一、但願一個變量長期的在內存中二、避免全局變量的污染

 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 }

3、事件

一、事件流：

　　事件流就是描述頁面中接收事件的順序，IE事件流是事件冒泡流，Netscape是事件捕獲流。

　　DOM事件流包括三個階段：事件捕獲、處理目標階段、事件冒泡

二、事件捕獲和冒泡：

　　冒泡：若是點擊box，會沿着DOM樹一直向上傳播直到document對象

　　捕獲：與冒泡相反，先從document對象向下傳播直到找到box爲止

三、事件處理

　　標準：addEventListener、removeElementListener

　　ie下：attachEvent、detachEvent

三、事件源：無論在哪一個事件中，只要你操做的那個元素就是事件源

1 oUl.onmouseover = function(event){
2     var ev = event || window.event;
3     var target = ev.target || ev.srcElement; // 獲取到事件源
4     console.log(target.innerHTML);
5 }

四、事件委託：利用冒泡原理，把事件加到父級上，觸發執行元素

　　好處：一、提升性能二、新添加的元素也會有事件，由於事件是在父級上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 }

五、自定義事件

六、事件類型

　　一、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 }

　　二、焦點事件：

　　　　blur：失去焦點　　focus：獲取焦點　　

　　三、鼠標事件：

　　　　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 })

　　四、滾輪事件：

　　　　IE：mousewheel 向上120、向下-120　　　　FF：DOMMouseScroll　向上-三、向下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 }

　　五、文本事件：

　　六、鍵盤事件：

　　　　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 })

　　七、菜單事件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 })

　　八、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 })

七、關於事件的其它

　　oBox.onclick(e){ }

　　一、event對象的兼容

　　　　var evt = e || window.event;

　　二、事件目標

　　　　var oTarget = evt.target || evt.srcElement;

　　三、獲取事件類型

　　　　var getType = evt.type;　　　　// click

　　四、阻止冒泡和默認事件

　　　　阻止冒泡：evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;

　　　　取消默認事件：evt.preventDefault ? evt.preventDefault() : evt.returnValue = true;

4、對象

一、對象引用：

 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

二、克隆對象但不引用對象

 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

5、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的變化

二、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 }

6、跨域請求

存在跨域和不存在跨域的問題：

　　一、同域下和同域不一樣文件夾下，不存在跨域

　　二、子域存在跨域

　　三、不一樣域也是存在跨域問題

解決跨域的方法：

一、子域了主域之間

方法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>

7、操做iframe:

一、經過ifr.contentWindow來獲取iframe的window對象，都兼容，但在chrome下須要有服務器環境才能夠，chrome安全沙箱的緣由

二、經過ifr.conentDocument來獲取iframe的document對象，但ie六、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這個頁面

三、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 }

8、正則表達式

一、 test()、search()、replace()、Match()：

str.test(reg)：返回一個布爾值，若是查找到返回true，不然返回false

str.search(reg)：查找匹配的位置，若是沒有找到返回-1

str.replace(reg, str1)：匹配字符並替換

str.match(reg)：若匹配不到返回null，不然返回數組

9、JSON與JSON對象

一、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對象的鍵能夠不是字符串

二、json串與對象的互轉

　　json字符串轉爲json對象：

　　方法一：eval()

　　　　var data = eval("('+ d +')");

　　方法二：stringify()：將對象轉成json串、parse()：將json串轉成對象

　　IE六、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)

4、DOM

1、覽器的渲染方式有關係，通常瀏覽器的渲染操做：

　　一、解析HTML結構

　　二、加載外部腳本和樣式

　　三、解析並執行腳本

　　四、構造DOM模型

　　五、加載外部圖片等外部文件

　　六、頁面加載完成

5、jQuery重點

6、javascript性能重點

1、js性能：

一、儘量減小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);

二、使用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;

三、能夠減小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");

四、DOM與瀏覽器的優化

重排：改變頁面的內容，當js改變了頁面一個元素的位置、寬、高，這個過程叫重排。

重繪：瀏覽器顯示的內容，當執行完重排後瀏覽器會把內容顯示出來，這個過程叫重繪，重排和重繪都會消耗瀏覽器的性能。

若是好比改變元素的背景顏色文字顏色，這樣只觸發了重繪的過程不會進行操做重排

減小重排、重繪的幾個方法：

　　一、儘可能在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");

　　二、文檔碎片

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); // 最後插入的只是袋子