一 資料型別檢測的四種方式

1、typeof：用來檢測資料型別的運算子。

• 使用typeof檢測資料型別，首先返回的都是一個字串，其次字串中包含了對應的資料型別，
  侷限性：
• typeof null -> "object"
• 不能具體的細分是陣列還是正則，還是物件中其他的值，因為使用typeof檢測資料型別，對於物件資料型別中的左右的值，最後返回的結果都是"object"
  2、instanceof：檢測某一個例項是否屬於某個類。instanceof的特性：只要在當前例項的原型鏈上，我們用其檢測出來的結果都是true。
  侷限性：
• 1、不能用來檢測和處理字面量方式創建出來的基本資料型別值。
  對於基本資料型別來說，字面量方式創建出來的結果和例項方式創建出來的結果是有一定的區別的 ，從嚴格意義上來講，只有例項創建出來的結果才是標準的物件資料型別值，也是標準的Number這個類的一個例項。對於字面量方式創建出來的結果是基本資料型別值，不是嚴禁的例項，但是由於JS的鬆散特點，導致了可以使用Number.prototype上提供的方法。
  3、constructor 建構函式 作用和instanceof非常的相似。
• 可以處理基本資料型別的檢測。
  4、Object.prototype.toString.call(); 最準確最常用的方式。
• 首先獲取Object原型上的toSTring方法，讓方法執行，並且改變方法中的this關鍵字的指向。

二 同步 非同步

JS是單執行緒的，當前事情沒有完成之前，絕對不會做下一件事情。
JS的兩種程式設計思想：同步、非同步。

• 1、同步：上一件事情沒有完成，繼續處理上一件事情，只有上一件事情完成了，才會做下一件事情（JS大部分都是同步程式設計的）。
• 2、非同步：規劃要做一件事情，但是不是當前立馬去執行這件事情，需要等待一定的時間，這樣的話，我們不會等著他執行，而是繼續執行下面的操作，只有當下面的事情都處理完成了，才會返回頭處理之前的事情。如果下面的事情並沒有處理完成，不管之前的事情有沒有到時間，都得等著完成。
  在JS中非同步程式設計
  只有四種：
• （1）定時器
• （2）所有的事件繫結
• （3）Ajax讀取資料的時候，我們一般都設定為非同步程式設計
• （4）回撥函式

三 圖片的延時載入（懶載入）

• 作用：保證頁面開啟的速度
• 原理：
  （1）對於首屏內容中的圖片，首先給對應的區域一張預設圖片佔著位置（預設圖需要非常的小，一般維持在5KB以內），當首屏內容都載入完成後（或者也可以給一個延遲的時間），在開始載入真實的圖片。
  （2）對於其他屏中的圖片，也是給一張預設的圖片佔位，當滾動條滾到對應區域的時候，我們在開始載入真實的圖片。
  （3）擴充套件：資料的非同步載入，開始只把前兩屏的資料載入綁定出來，後面的資料不進行處理，當頁面滾動到對應區域的時候在重新請求資料然後繫結渲染資料。

四 盒子模型

JS盒子模型指的是通過JS中提供的一系列的屬性和方法，獲取頁面中元素的樣式資訊值。
1、client系列（當前元素的幾個私有的屬性）

• clientheight/clientwidth：內容的高度/寬度+上下/左右填充

內容的高度/寬度：我們設定的width和height這兩個樣式就是內容的寬和高。如果沒有設定height值，容器的高度會根據裡面的內容自己進行適應，這樣獲取的值就是真實內容的高，如果設定固定的高度了，不管內容是多了還是少了，其實我們內容的高度指的都是設定的那個值。

真實內容的寬度和高度：這個代指的是實際內容的寬高（和我們設定的height沒有必然的聯絡），例如：如果內容有溢位，那麼真實內容的高度要加上溢位內容的高度。

• clientleft：左邊框的寬度 clienttop：上邊框的高度
  2、offset系列
• offsetwidth/offsetheight（和內容是否溢位沒有任何關係）：clientwidth/clientheight+左右/上下邊框
• offsetleft/offsettop：當前元素的外邊框距離父級參照物的內邊框的偏移量
  3、scroll系列
• scrollwidth/scrollheight：和我們的clientwidth/clientheight一模一樣，（前提是：容器中的內容沒有溢位的情況下）

如果容器中的內容有溢位，我們獲取的結果是如下規則：
scrollwidth：真實內容的寬度（包含溢位）+左填充
scrollheight：真實內容的高度（包含溢位）+上填充
獲取到的結果都是約等於的值，因為同一個瀏覽器我們是否設定overflow="hidden"，對於最終的結果都是有影響的；在不同的瀏覽器中，我們獲取到的結果也是不相同的。

• scrollleft/scrolltop：滾動條捲去的寬度或高度

五 關於JS盒子模型屬性

1、關於JS盒子模型屬性取值問題：我們通過以上屬性值獲取的結果永遠不可能出現小數，都是整數，瀏覽器獲取結果的時候，在原來真實結果的基礎上進行四捨五入。
2、關於操作瀏覽器本身的盒子模型資訊：clientheight/clientwidth是當前瀏覽器可視視窗（一螢幕的高度和寬度）的高度和寬度
scrollwidth/scrollheight是當前頁面的真實寬度和高度（所有屏加起來的寬度和高度，但是是一個約等於的值）。

我們不管是哪些屬性，也不管是什麼瀏覽器，也不管是獲取還是設定，想要都相容的話，需要寫兩套：

document.documentElement[attr] || document.body[attr]; 
必須document.documentElement在前
例如：
獲取：document.documentElement.clientwidth || document.body.clientwidth; 
設定：document.documentElement.clientwidth=0; document.body.clientwidth=0;

六

1、獲取元素的某一個具體的樣式屬性值

• 元素.style.屬性名：需要我們把元素的樣式都寫在行內樣式上才可以（寫在樣式表中是不管用的）
  在真實專案中，這種方式不常用，因為不能為了獲取值而把所有的樣式都寫在行內（無法實現CSS和HTML分離）
  2、使用window.getComputedStyle這個方法獲取所有經過瀏覽器計算過的樣式。
  所有經過瀏覽器計算過的樣式：只要當前的元素標籤可以在頁面中呈現出來，那麼他的所有的樣式都是經過瀏覽器計算過得（渲染過的），哪怕有些樣式沒有寫，我們也可以獲取到。
• window.getComputedStyle(當前要操作的元素物件，當前元素的偽類[一般我們不用偽類寫null])。獲取的結果是是CSSStyleDeclaration這個類的一個例項：包含了當前元素的所有樣式屬性和值。但是IE6-8不相容。

console.log(window.getComputedStyle(box,null)["height"]);

3、在IE6-8下我們可以使用currentStyle來獲取所有經過瀏覽器計算過得樣式。

標準瀏覽器：window.getComputedStyle(box,null).height;
非標準瀏覽器IE6-8：box.currentStyle.height

七 :hover :after 偽類的應用補充

1、可在元素前後新增內容
2、清除浮動

.clear {
    zoom:1;
}
.clear:after {
    display:block;
    width:0;
    height:0;
    content:"";
    overflow: hidden;
    clear:both;
}

八 scrolltop/scrollleft

1、JS盒子模型中，client系列/offset系列/scrollwidth/scrollheight都是“只讀”屬性，只能通過屬性獲取值，不能通過屬性修改元素樣式
2、scrolltop/scrollleft：滾動條捲去的高度/寬度，這兩個屬性是唯一“可讀寫”屬性
3、scrolltop/scrollleft存在邊界值（最大和最小值）
最小值：0
最大值=真實的高度-當前容器一螢幕的高度=box.scrollHeight-box.clientHeight

九 定時器

1、setTimeout

window.setTimeout(function () {

},1000);

設定一個定時器，等到1000ms後開始執行對應的方法，方法執行完成後，定時器結束。
2、setInterval

window.setInterval(function () {

},1000);

設定一個定時器，等到1000ms後開始執行對應的方法，方法執行完成後，定時器並沒有結束，以後每隔1000ms都會把定時器中的方法執行一次，直到手動清除定時器為止。
3、設定定時器的時候是有返回值的，返回的結果是一個數字，代表當前是第幾個定時器。

var timer1 = window.setTimeout(function () { },1000); ->1
var timer2 = window.setTimeout(function () { },1000); ->2
var timer3 = window.setInterval(function () { },1000); ->3

4、window.clearTimeout（1） 清除定時器的時候，我們裡面放一個數字，代表把這個數字代表的那個第N個定時器清除掉。
window.clearInterval（timer2）使用的是setTimeout設定的第二個定時器，使用clearInterval也可以把它清除掉。
5、setInterval來實現一個多次運動的動畫

/*setInterval來實現一個多次運動的動畫*/
var n=0;
var timer=window.setInterval(function () {
    n++;
    console.log(n);
    if (n===5) {
        window.clearTimeout(timer); /*或者是window.clearInterval(timer);*/
    }
},1000);

6、setTimeout來實現一個多次運動的動畫

/*setTimeout來實現一個多次運動的動畫*/
var n=0;
    var timer=null;
    function move() {
        /*在每一次執行方法之前，先把之前設定的沒用的定時器清除掉*/
        window.clearTimeout(timer);
        n++;
        console.log(n);
        if(n===5) {return;}
        /*第一次執行完成後，設定一個定時器，每隔1000ms重新執行move*/
        timer=window.setTimeout(move,1000); /*遞迴*/
    }

十

獲取頁面中元素的方法
1、document.getElementById()
2、context.getElementsByTagName(TAGNAME)：把指定容器中子子孫孫輩的所有標籤名為TAGNAME的都獲取到了
3、context.getElementsByClassName(CLASSNAME)：IE6-8不相容
4、document.getElementsByName()：在IE瀏覽器中只對表單元素的name起作用
5、document.body
6、document.documentElement
7、context.querySelector/context.querySelectorAll：IE6-8不相容，通過這個獲取的節點集合不存在DOM對映
描述節點和節點之間關係的屬性（在標準瀏覽器中會把空格和換行當做文字節點處理）
1、childNodes
2、children：獲取所有的元素子節點，IE6-8下獲取的結果和標準瀏覽器獲取的結果不一致
3、parentNode：父親節點
4、previousSibling：獲取上一個哥哥節點/previousElementSibling
獲取上一個哥哥元素節點，在IE6-8不相容
5、nextSibling：獲取下一個弟弟節點/nextElementSibling
獲取下一個弟弟元素節點，在IE6-8不相容
6、lastChild/lastElementChild：獲取最後一個子節點
7、firstChild/firstElementChild：獲取第一個子節點
DOM的增刪改
1、creatElement
2、document.createDocumentFragment()
3、appendChild
4、insertBeforecloneNode(true/false)
5、replaceChild
6、removeChild
7、get/set/removeAttribute
DOM盒子模型

十一 清除浮動

1、overflow: hidden; 清除子元素的浮動對父級元素的影響
2、clear: both;清除哥哥元素的浮動對弟弟元素的影響
3、

.box ul:after {
    display: block;
    content: "";
    clear: both;
}

十二 JS動畫

JS實現高效能動畫的黃金法則：1、邊界判斷是要加步長
2、清除沒有用的定時器：用settimeout實現輪循動畫，每一次都要把沒用的定時器清除掉
3、move方法需要傳參，裡面需要寫一個小move，來避免不銷燬作用域的層級巢狀
4、讓當前元素在同一個時間只能執行一個動畫的話，把定時器返回值放在自定歸屬性上

十三 回撥函式

回撥函式：把一個函式A當做一個值傳遞給另外一個函式B，這樣在B方法執行的時候，可以在任何位置執行一到多次A方法