JavaScript入門指南(學習筆記) 兩萬餘字的基礎總結

本片文章記錄一下當時自己學習JavaScript的過程以及一些知識點和注意事項,從基礎到中高階的內容都有,會以章節的形式慢慢展示出來

學前準備

• 學習基礎：DIV+CSS基礎紮實
• 開發工具: sublime/webstorm/VScode等等

第一章 初識JavaScript

JavaScript（JS）是什麼?

• JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言。
• JavaScript通常用來操作HTML頁面，響應使用者操作，驗證傳輸資料等
• java和JavaScript有什麼關係？java和JavaScript沒有關係
• jQuery和JavaScript有什麼關係？jQuery是由JS編寫的一個js庫。

JS程式碼寫在哪裡？

• 內嵌 js，
• 外鏈 js檔案裡面，利用src屬性引入
• 標籤屬性裡面（不推薦）
• script標籤中的屬性type="text/javascript"或language=”javascript”，HTML5新規則下可以什麼都不用加；
• script標籤可以放置於任何位置，不同的位置要注意載入順序，通常放在head或body結束之前；

寫JS程式碼需要注意什麼?

• 嚴格區分大小寫；
• 語句字元都是半形字元；（字串裡面可以使任意字元）
• 某些完整語句後面要寫分號 (;)
• 程式碼要縮排，縮排要對齊。

JS裡的系統彈窗程式碼

• alert('內容')
• confirm('確定?)
• prompt('請輸入您的姓名:')

變數

很多時候，當我們重複使用某個元素或者某個資料時，內容可能太長或者資料要進行改變，這時就需要定義變數來代替他們。

語法：var + 變數名 或者 let + 變數名 (var 和 let 宣告的區別見後續章節)

Js中的註釋

• 單行註釋 //
• 多行註釋 /* */

獲取元素

• 特殊的標籤

document.body
document.head
document.title
複製程式碼

• 一般標籤

document.getElementById()       // 匹配ID名稱…
ele.getElementsByTagName()      // 匹配標籤名是…的集合動態方法
document.getElementsByName()    // 匹配name是…的集合 動態方法
ele.getElementsByClassName()    // 匹配class名稱…的集合 動態方法
ele.querySelector()             // 匹配css選擇器的第一個
ele.querySelectorAll()          // 匹配css選擇器匹配的所有集合
複製程式碼

獲取和修改元素HTML

• 元素HTML內容

// ele代表獲取的元素
ele.innerHTML             // 獲取元素HTML
ele.innerHTML = '字串'  // 修改元素HTML
複製程式碼

• 元素文字內容

// 標準
ele.textContent             // 獲取元素文字
ele.textContent = '字串'  // 修改元素文字

// 非標準(ie低版本)
ele.innerText               // 獲取元素文字
ele.innerText = '字串'    // 修改元素文字
複製程式碼

第二章 函式、自定義屬性、事件

變數與屬性的區別

//此為變數
var a = 123;  

//此時object 為節點物件（node）
var object = document.getElementById('box');

//為object自定義了abc屬性，且此屬性的值888888
object.abc = 888888; 

// 物件.屬性名 可以獲取屬性值
object.abc； //888888 
複製程式碼

• 屬性分為 : 節點屬性 和 js屬性
• 節點屬性 : 元素自帶屬性
• js屬性 : js中自定義的屬性

當js屬性為合法節點屬性的時候，可以修改節點屬性的值

//此時object 為節點物件（node）
var object = document.getElementById('box')

// 修改節點物件object的id屬性, id屬性為節點物件的合法屬性
var object.id = 'box';
複製程式碼

函式

函式申明

• 有名函式

// 此時abc就代表此函式，函式不會自動執行，需要呼叫執行。
function abc(){
    console.log(我是有名字的函式)
}
複製程式碼

帶名字的函式，需函式名加小括號執行，如abc();

• 匿名函式

function (){} 
複製程式碼

匿名函式，不進行賦值會報錯

• 函式表示式

// 匿名函式
var a = function(){}
a() //此時用變數名加()來呼叫

//匿名函式
var b = function abc(){}
b() //此時用變數名加()來呼叫; 如果abc()呼叫會報錯
複製程式碼

函式/物件方法

• 物件可以自定義屬性
• 物件的屬性，如果賦值的是一個函式function(){}, 稱之為物件的方法

// 此時object 為節點物件（nodelist）
var object = document.getElementById('box'); 
// 為object自定義了方法
object.abc = function(){}; 
複製程式碼

事件屬性

事件 : 是當事人，在特定的時間在特定的地點發生了某事

• js中的事件: 元素.事件屬性 = 事件函式

// 獲取當前符合條件的節點
var object = document.getElementById('box');
// 給當前節點新增一個點選事件, 配合這對應的處理函式
object.onclick = function(){}
複製程式碼

function () {}是一個固定的寫法，在這個例子中，它被稱之為事件函式。

事件函式也可以使用有名函式

var object = document.getElementById('box');
object.onclick =  fn;
function fn(){}
複製程式碼

• javascript中的事件 [ 滑鼠事件, 鍵盤事件, 表單事件, 系統事件, 等等]

onclick —————— 點選（單擊）事件
onmouseover ———– 滑鼠滑入事件（會冒泡）
onmouseout—————滑鼠離開事件（會冒泡）
onmouseenter————滑鼠滑入事件（不會冒泡）
onmouseleave————滑鼠離開事件（不會冒泡）
ondblclick ——————- 雙擊（單擊）事件
複製程式碼

更多方法參考www.w3school.com.cn/tags/html_r…

• 函式中的this

事件函式裡面的this就是指觸發這個事件的元素

<script>
    box.onclick = function(){
       alert( this); //box,本函式是由box觸發的
    }
    function fn(){
        //this指向window,因為fn()屬於window
        // fn()其實是window.fn();是window讓fn執行的
        alert( this );
    }
    fn();
</script>
複製程式碼

更多關於this的介紹請看後續章節

第三章 操作元素屬性 CSS樣式以及 []的使用

cssStyle 操作

• style 物件
• 複合樣式改寫 background-color ------> backgroundColor
• cssText
• tyle.float的相容 cssFloat /styleFloat

attribute 屬性節點

• 獲取： getAttribute(名稱)

優勢:  用.和[]的形式無法操作元素的自定義屬性 getAttribute可以操作元素的自定義屬性
設定： el.setAttribute(名稱, 值)
包含： el.hasAttribute(名稱)
刪除： el.removeAttribute(名稱)
複製程式碼

[]的運用

當我們需要使用字串表示屬性的時候，或者此時屬性會變化的時候

obj.style.width = '100px';
//可改為
obj.style['width'] = '100px'；
//亦可
var str = 'width'；
obj.style[str] = '100px'
複製程式碼

第四章 javascript資料型別 判斷 條件語句

javascript資料型別

七大資料型別 Number String Boolean Null Object Undefined es6新增Symbol

• number 數字

let num = 123
複製程式碼

• String 字串

let str = '只會番茄炒蛋'
複製程式碼

• Boolean 布林值

// true / false
let falg = true
複製程式碼

• Null 空

// 函式表示式
let abc = function(){}

// 函式宣告/定義
funticon abc () {}
複製程式碼

• Object 物件

// (節點物件、自定義物件、array(陣列)、json、function、系統物件)
複製程式碼

• Undefined 未定義
• Symbol

// Symbol是由ES6規範引入的一項新特性，它的功能類似於一種標識唯一性的ID。
複製程式碼

判斷語句

判斷語句返回布林值

    ==  // 判斷值
    >   // 大於
    <   // 小於
    <=  // 小於等於
    >=  // 大於等於
    !=  // 不等於
    === // 全等於 除了判斷值,還會判斷資料型別
    !== // 不全等
複製程式碼

if 條件語句

if ( 條件 ) {
    code // 這是條件 滿足時執行的程式碼
}

// 如果（）括號裡面是true則執行{} 中程式碼
if ( 條件 ) {
    code 1 // 這是條件滿足時執行的程式碼
} else {
    code 2 // 這是條件不滿足時執行的程式碼
}
// 如果（）括號裡面是false 則執行 else 大括號中的程式碼, 總有一個會執行
if ( 條件一 ) {
    code 1 // 這是條件一滿足時執行的程式碼
} else if (條件二) {
    code 2 // 這是條件二滿足時執行的程式碼
} else {
    code 3  // 這是以上兩種條件都不滿足時執行的程式碼
}
複製程式碼

if () 中的條件會強制轉化為布林值，為false資料: false 0 '' null undefined NaN

三目運算

三目運算子的語法為conditions ? statementA : statementB ;

let num = 5
num = 5 ? 6 : 5
// 上面這段話的意思就是 num 等於5的話 值就改為6 不等於5的話值改為5
複製程式碼

switch case 條件語句

switch (data) {
    case 1:
        code1 // 執行程式碼
        break // break 來阻止程式碼自動地向下一個 case 執行。
    case 2:
        code2 //// 執行程式碼
        break // break 來阻止程式碼自動地向下一個 case 執行。
    default:
        與 case 1 和 case 2 不同時執行的程式碼
}
複製程式碼

break break 語句。它用於跳出 switch() 語句，來阻止程式碼自動地向下一個 case 執行

default 關鍵詞來規定匹配不存在時做的事情

第五章 for迴圈 while後迴圈 do while前迴圈

for迴圈

• for () {}迴圈

for (初始值; 判斷條件; 步幅) {
    code // 執行程式碼
}

for (let i = 0; i < 5; i++) { // i初始值為0；i是否小於5；每次迴圈後i加1
    console.log(i) // 0 1 2 3 4
}
複製程式碼

• continue 跳過本次迴圈

for (let i = 0; i < 5; i++) { // i初始值為0；i是否小於5；每次迴圈後i加1
    if  (i === 3) {
        continue
    }
    // 因為在i為3的時候跳過了此次迴圈，所有3沒有被列印出來
    console.log(i) // 0 1 2 4
}
複製程式碼

• break的運用

for (let i = 0; i < 5; i++) { // i初始值為0；i是否小於5；每次迴圈後i加1
    if  (i === 3) {
          console.log(i) // 3
          break // 跳出中止迴圈, 提升效能
    }
}
複製程式碼

變數自增/自減

• i++ 和 i-- 先賦值後自增或者自減

let a = 20;
let b = a++ // 先把a的值賦值給b, 然後在自增1
console.log(b) // 20
console.log(a) // 21
複製程式碼

• ++i 和 --i 先自增或者自減後賦值

let a = 20;
let b = ++a // a的值先自增1, 在賦值給b
console.log(b) // 21
console.log(a) // 21
複製程式碼

while 後迴圈 do while前迴圈

• while後迴圈

while (條件) {
    code // 這裡寫要執行的程式碼，條件滿足不斷執行
}
// 條件滿足才會執行code程式碼
複製程式碼

• while前迴圈

do {
    code 1 // code 1會先執行一遍，然後在根據條件決定是否再執行code 1;
} while (條件) {
    code // 這裡寫要執行的程式碼，條件滿足不斷執行
}
複製程式碼

第六章 運算子 型別轉換

算術運算

加—————[+]
減—————[-]
乘—————[*]
除—————[ / ]
取模/取餘—————[%]
複製程式碼

• 隱式型別轉換

+ 在有字串的時候,會進行字串拼接
- * / % 會盡力把不是數字的轉化為數字
複製程式碼

• NaN ———— not a number(不是一個數字)

不是數字的數字型別（number型別）
NaN和自己都不相等
isNaN( obj ) 判斷是否為NaN,是返回true,否返回false;
複製程式碼

• 顯示型別轉化

轉數字

Number() 可以用於任何資料型別轉換成數值
parseInt()、parseFloat():專門用於把字串轉換成數值都是忽略前導的空格

1) Number()
能把字串轉化為數字。
如果字串是空的（不包含任何字元），則將其轉換為0
如果帶非數字的字串,返回NaN。
undefined,返回NaN。
true和false將分別轉換為1和0。
null值，返回0。
var a = Number( '-100.02' );
console.log( a );       // -100.02
var a = Number( '100px' );
console.log( a );       // NaN
var a = Number( '' );
console.log( a );       // 0
var a = Number( undefined );
console.log( a );       // NaN
var a = Number( true );
console.log( a );       // 1
var a = Number( null );
console.log( a );       // 0

2) parseInt() （取整）取 非數字整前的數字 ，或小數點前的數字
3) parseFloat() 能取得小數，第二個小數點前的數字
複製程式碼

轉字串

String( obj );
obj.toString();
複製程式碼

賦值運算

=  +=  -=  *=  /=  %=  ++  --
複製程式碼

比較運算

<————–小於
> ————-大於
= = ————- 等於
<= ————-小於等於
>= ————- 大於等於
!= ————- 不等於
= = =————- 全等，除了值的判斷，還會進行unicode 編碼的對比
!==————-不全等
返回boolean值
複製程式碼

邏輯運算

|| ———— 邏輯或
&& ———— 邏輯與

賦值操作
let c = a || b // 如果a為true,則用a賦值, 如何a為false,則用b賦值

let c = a && b // 如果a為true,則通過，用 b 賦值,如果a為false,用 a 賦值

布林值操作
if (a || b) {
    //如果a為true,則為true
    //如果a為false,則看b
}

if (a && b) {
    //如果a為true,則通過，看b,b為true則為true
    //如果a為false,則false
}

取反
if (!obj) {
    // 首先會把obj轉化為布林值，如果 obj是true,則!obj為false
}
複製程式碼

運算子優先順序

JavaScript中的運算子優先順序是一套規則。該規則在計算表示式時控制運算子執行的順序。具有較高優先順序的運算子先於較低優先順序的運算子執行。

下圖按從最高到最低的優先順序列出JavaScript運算子。具有相同優先順序的運算子按從左至右的順序求值

第七章 函式[自執行] [傳參] [return] getComputedStyle()

函式自執行

函式自執行方式,即建立立即呼叫一次

• 函式後面加用小括號,然後在用小括號包起來

(function(){}()) // 函式後面加用小括號,然後在用小括號包起來
複製程式碼

• 函式用小括號包起來,然後後面加小括號

(function(){})() // 函式用小括號包起來,然後後面加小括號
複製程式碼

• 函式後面加小括號,然後在函式前面加 + - ~ ！其中的一個符號

+function(){}()
-function(){}()
!function(){}()
~function(){}()
複製程式碼

函式傳參

• 對應傳參

形參:即形式引數，是用來接收函式呼叫時傳遞過來的資料，命名與變數一致

實參:即真實引數，是給形參傳遞的具體資料，任何資料型別都可以稱為實參

function fn(a, b) { // a,b為形參，且a 為 20，b為10，一一對應
    console.log(a) // 20
    console.log(b) // 10
    console.log(a + b) // 30
}
fn(20, 10) // 20,10為實參
複製程式碼

• 不定參 arguments

不定參：實參個數不確定 arguments: 是所有實參的集合，arguments是一個類陣列，arguments.length 可以返回實參個數

function fn() {
    console.log(arguments) // 返回一個包含實參的類陣列
}
fn(20, 10, 5) // 20, 10, 5為實參
複製程式碼

關於什麼是類陣列,請看以後的章節

函式中的return

• 函式中預設return的返回值為undefined

function fn(a, b) {
    a + b
}
let a = fn(10, 20)
console.log(a) // undefined, 函式如果沒有指定返回值,預設返回undefined
複製程式碼

• 自定義返回值

有時候我們需要函式中返回我們需要的值，這個時候return很有用

function fn(a, b) {
    return a + b
}
let a = fn(10, 20)
console.log(a) // 30 
複製程式碼

return 返回的資料型別可以是任意型別

function fn(a, b) {
    a +b
    return function () {
        alert('ok')
    }
}
let a = fn(10, 20)
a() // 此時a就是返回的函式, a()開啟了一個系統彈窗 
複製程式碼

return 然後的程式碼不再執行，整個函式結束

function fn(a, b) {
    a +b
    return function () {
        alert('ok')
    }
    console.log('我不會被列印出來,因為上面有return')
}
fn()
複製程式碼

getComputedStyle()

getComputedStyle(obj,null)[cssStyle]獲取計算後的樣式物件,只讀

<style>
    #elem-container{
    position: absolute;
    left:     100px;
    top:      200px;
    height:   100px;
    }
</style>
<div id="elem-container">dummy</div>
<script>
    let elem = document.getElementById("elem-container");
    let theCSSprop = window.getComputedStyle(elem,null)['left']
    console.log(theCSSprop) // 100px
</script>
複製程式碼

不要獲取複合樣式:如background

不要獲取未設定的樣式: 谷歌是具體寬度, ie是auto

相容：ie8及以下 obj.currentStyle[cssStyle]

if (window.getComputedStyle) {
    return getComputedStyle(obj)[attr]
} else {
    return obj.currentStyle[attr]
}
複製程式碼

第八章 作用域 js預解析 閉包

作用域 指令碼的有效範圍，作用範圍。分兩大類：全域性(script)和區域性（function ）

全域性(script)域

直接定義在script標籤下的變數及函式，他們都作用在一個域，全域性作用域，so..
<script>
    var a = 123;
    alert( window.a ); // 123
    function abc(){}
    alert( window.abc ); // function abc(){}
 </script>
複製程式碼

直接定義在script標籤下的變數 稱之為全域性變數,script標籤下的函式，稱之為全域性函式

全域性變數及函式 都是window的一個屬性,都能通過window.變數名訪問

區域性（function ）域

任何一個function(){},都會開啟一個區域性作用域

定義在function(){} 內部的變數稱之為 區域性變數

作用域鏈 ：區域性作用域內部可以訪問父級作用域變數及全域性作用域變數，也可以訪問父級的函式，及全域性函式 ( 往上爬)

let a = 10
function fn() {
    console.loa(a) // 10
}
複製程式碼

區域性變數會覆蓋父級（全域性）變數，函式亦如此

let a = 10
function fn() {
    let a = 20
    console.loa(a) // 20
}
複製程式碼

javascript解析

javascript解析 即讀取程式碼過程

• javascript解析 是 致上而下
• 預解析:正式解析前的工作，預解析過程會出現 變數提升，函式提升

function () {
    console.log(a) // undefined
    var a = 10
}
複製程式碼

• 變數提升

在作用域內宣告的變數會被提升到作用域的頂部，且對其賦值undefined,這個過程稱之為變數提升

上面的列子解析過程為
function() {
    var a = undefined
    console.log(a) // undefined
    var a = 10
}
複製程式碼

• 函式提升

在作用域內的函式定義函式會被提升到作用域的頂部，其值為其函式本身,這個過程稱之為函式提升

function () {
    console.log(fn) // function fn () {}
    function fn () {}
}
複製程式碼

• var和函式重名函式優先，留下函式，函式和函式重名 後面定義的覆蓋前面的-後來居高

console.log(a) // function a() { console.log(a2) }
var a = 10
function a() {
    console.log(a1)
}
function a() {
    console.log(a2)
}
a() // 報錯
console.log(a) // 10
複製程式碼

• 不會提升的函式：在作用域內的函式表示式函式不會被提升到作用域的頂部，so ~

function () {
    console.log(fn) // undefined
    var fn = function () {}
}
複製程式碼

閉包

• js垃圾回收機制

js 中的 變數 函式 不再使用後，會被自動js垃圾回收機制回收
複製程式碼

• 形成閉包條件

條件一： 函式內部巢狀函式
條件二： 內部函式引用外部函式的 變數 引數
使用 return 返回了 此內部函式,上面的 變數 和引數 不會被回收

例如:
function fn(x) {
    var a = 5;
    function bibao() {
        var b = a + x
        console.log(x) // 20
        console.log(a) // 5
        console.log(b) // 25
    }
    return bibao
}
var c = fn(20)
console.log(c()) // 20 5 25
複製程式碼

第九章 字串方法和陣列

String 字串

String即文字（字串），字串方法都不改原字串；

建立字串的三種辦法: new String(), String(), 直接量，三種方式建立出來可以建立

var str = new String('hello')

var str = String('hello')

var str = 'hello' // 直接量
複製程式碼

string.length 屬性可以返回字串長度

string[index] 通過下標獲取字串

String方法

• str.concat( str,str...) 字串拼接

用於把一個或多個字串連線 到一塊，返回拼接好的字串
複製程式碼

• str.indexOf(value,index )查詢字串，返回查詢字串首次出現的位置;

方法對大小寫敏感！
value 匹配字元
index 開始檢索的位置, 合法值是 0 到 string.length - 1,預設0
匹配失敗返回-1
複製程式碼

• str.charAt(index ) 返回指定索引的字串

var str = 'hello'
console.log(str.charAt(3)) // l
複製程式碼

• str.charCodeAt(index )返回指定索引的ASCII編碼
• str.substring(start,end ) 擷取字串，從start 開始，截止到end前，不包含end

如果沒有end則從num開始整個查詢
如果 start 比 stop 大，那麼該方法在提取子串之前會先交換這兩個引數。str.substring(1,4)
複製程式碼

• str.slice(start,end ) 擷取字串，從start 開始，截止到end前，不包含end
• str.toLocaleUpperCase()/ str.toLocaleLowerCase()

str.toLocaleUpperCase() 把字串轉換為大寫。
str.toLocaleLowerCase() 把字串轉換為小寫。
複製程式碼

• str.replace( value/RegExp,new ) 用一些字元替換另一些字元,new可以是字串，也可以是函式
• str.split(value/RegExp,length-1) 方法用於把一個字串分割成字串陣列, 返回分割後的陣列
• str.search( value/RegExp )返回 檢索字串首次出現的位置;未找到返回-1
• str.match( value/RegExp )``查詢指定的值，返回匹配的值。未找到返回null.正則可以找一個或多個表示式

更多字串方法請見developer.mozilla.org/zh-CN/

Array 陣列

建立陣列的三種辦法: new Array(), Array(), [] ，三種方式建立出來都是一樣的

var arr = new Array()

var arr = Array()

var arr = [] // 直接量
複製程式碼

• arr.length可以訪問陣列的長度
• 建立即指定陣列長度Array( length )及 new Array( length ),length是 數字的時候，建立的並不是陣列的項，而是陣列的長度，項的內容為undefined
• [] 通過陣列索引，訪問值

var arr = [1, 2, 3, 4, 5]
arr[0] // 1
複製程式碼

• 修改陣列指定索引下的值

var arr = [1, 2, 3, 4, 5]
arr[0] = 8888
console.log(arr) // [8888, 2, 3, 4, 5]
複製程式碼

• 在陣列後面新增項

var arr = [1, 2, 3, 4, 5]
arr.length = 8888
console.log(arr) // [1, 2, 3, 4, 5, 8888]
複製程式碼

• arr.indexOf( item ) 查詢項
• 陣列去重

利用for迴圈給陣列去除重複項

var arr = [1,2,3,4,5,6,5,4,3,2,1];
var arr2 = []
for (let i = 0; i < arr.length; i++) {
    if (arr2.indexOf(arr[i] == -1)) {
        arr2.push(arr[i])
    }
}
console.log(arr2) // [1, 2, 3, 4, 5, 6]
複製程式碼

Array() 陣列方法

• arr.unshift( item1,item1,…. ) 向陣列的頭部新增一個或更多元素，並返回（新的長度）。
• arr.push( item1,item1,…. ) 向陣列的尾部新增一個或更多元素，並返回（新的長度）。
• arr.shift( ) 刪除陣列的第一個元素（返回刪除物件）;。
• arr.pop( ) 刪除陣列的最後一個元素（返回刪除物件）。
• arr.splice(index,howmany,item1,…..,itemX) （刪除/新增） 元素，然後（只返回刪除物件）。

index 必需。整數，規定新增/刪除專案的索引，可以使用負數,如果是新增，原有元素會往高位移動。
howmany 必需。要刪除的專案數量。如果設定為 0，則不會刪除專案。
item1, ..., itemX可選。向陣列新增的新專案。
複製程式碼

• arr.sort() 排序

預設arr.sort() 以首字元編碼大小排序
陣列length小於10以氣泡排序
氣泡排序下依次比較，
return > 0 調換位置，= 0不調換位置，< 0 不調換位置
陣列length大於10以二分排序
複製程式碼

• arr.reverse() 反轉陣列

以上方法不建立新的陣列，而是直接修改原有的陣列,同時索引會變化

以下方法會建立出一個新的陣列, 而不是直接修改原陣列

• arr.concat() 陣列拼接

該陣列是通過把所有 arrX 引數新增到 arr 中生成的。
如果要進行 concat() 操作的引數是陣列，那麼新增的是陣列中的元素，而不是陣列 ——不修改原陣列
複製程式碼

• arr.slice() 擷取

arr.slice(start,end)方法從已有的陣列中返回選定的元素
複製程式碼

• arr.join() 拼接成字串
• Array.isArray( ) 判斷是不是陣列

ECMAscript5 的遍歷陣列方法

以下下方法都能實現遍歷，語法也都一樣，只是返回值不一樣—————————————不修改原陣列
array.xxxx( function(currentValue,index,arr ), thisValue )
引數 描述
currentValue ———————必須。當前元素的值
index ——————————–可選。當期元素的索引值
arr————————————可選。當期元素屬於的陣列物件
thisValue ————————–可選。物件作為該執行回撥時使用，傳遞給函式，用作 "this" 的值。
如果省略了 thisValue ，”this” 的值為 “undefined”

function(currentValue, index,arr) 必須。函式，陣列中的每個元素都會執行這個函式
複製程式碼

• forEach()

arr.forEach() 從頭至尾遍歷陣列 ——————————————————————————–無返回值
複製程式碼

• map() 返回值陣列

arr.map() 返回一個陣列，包含函式所有返回值—————————————————————-返回陣列
var arr = [1, 2, 3, 4]
var newArr = arr.map(function(x){
    return x * x
})
console.log(newArr) // [1, 4, 9, 16]
複製程式碼

• filter() true陣列

arr.filter() 返回值是一個 return 值為true或能轉化為true的值——————————————–返回陣列
var arr = [1, 2, 3, 4]
var newArr = arr.filter(item => {
    return item > 3
})
console.log(newArr) // [4]
複製程式碼

• every()

arr.every() 針對所有元素，即都為true 則返回true———————————————————————————–返回值
var  arr = [1,2,3,4];
var newArr = arr.every(item => {return item < 5}); 
console.log(newArr) // true, 因為陣列的每一項都小於5

var newArr = arr.every(item => {return item < 3}); 
console.log(newArr) // false, 因為陣列中的某一項不小於3
複製程式碼

• some()

arr.some() 是否存在 即有一個是true則為true———————————————————————————–返回值
var  arr = [1,2,3,4];
var newArr = arr.some(item => {return item % 2 === 0});
console.log(newArr) // true, 因為有偶數存在
複製程式碼

第十章 物件(JSON ) for/in function[all apply bind]

JSON

• 建立物件（JSON） 物件是Javascript的基本資料結構，物件是引用型別 建立物件的三種方式 物件直接量，new Oject(), Object.create({})[ ES5 ],create建立需要一個物件引數

// 物件都是一個key(鍵):value( 值 )一一對應

var obj = {} // 直接量
var obj = new Object()
var obj = Object.create()
複製程式碼

• 訪問JSON的值

obj.attribute 和 obj[attribute]

var obj = {
    age: 20,
    name: '番茄炒蛋',
    sex: '男'
}
console.log(obj.age) // 20
console.log(obj[age]) // 20
複製程式碼

• 修改JSON的屬性值

var obj = {
    name: '番茄炒蛋'
}
obj.name = '只會番茄炒蛋'
複製程式碼

• 新增JSON屬性

var obj = {
    name: '番茄炒蛋'
}
obj.age = 20
複製程式碼

• 刪除JSON屬性

var obj = {
    name: '番茄炒蛋',
    age: 20
}
delete obj.name 或者 delete obj[name]
複製程式碼

• JSON數字屬性

var obj = {
    name: '番茄炒蛋',
    age: 20
}
obj[1] = 'hello'
obj[2] = 'word'
複製程式碼

• in 判斷物件是否存在某個屬性

var obj = {
    name: '番茄炒蛋',
    age: 20
}
console.log('age' in obj) // true
複製程式碼

for in遍歷json

• for in 遍歷JSON

var obj = {
    name: '番茄炒蛋',
    age: 20
}
for (let attr in obj) { //attr 為屬性，attr不是必須的，可以為任意變數名
    console.log(attr) // 屬性名 name age
    console.log(obj[attr]) // 對應的屬性值 '番茄炒蛋' 20
}
複製程式碼

• for in 也可以遍歷陣列

var arr = [1, 2, 3, 4]

for (let attr in arr) { //attr 為屬性，attr不是必須的，可以為任意變數名
    console.log(attr) // 下標
    console.log(obj[attr]) // 對應下標的值 1 2 3 4
}
複製程式碼

for迴圈不能遍歷JSON

JSON物件仿jQuery 鏈式操作 css html

function $ (option) {
    var t = typeOf option
    if (t == 'function') {
        window.onload = option
    } else if (t.toLowerCase() == 'string') {
        var ele = option.subString(1, option.length)
        el = document.getElementById(ele)
    }
    var obj = {
        css: function (attr, val) {
            el.style[attr] = val
            return obj;
        },
        html: function (val) {
            el.innerHTML = val
            return obj
        }
    }
    return obj
}
$('#box').css('backgroundColor','red').html('hello');
複製程式碼

JSON.parse() 物件化 / JSON.stringify() 物件字元化

• JSON.parse() JSON.parse(obj )方法解析一個JSON字串，構造由字串描述的JavaScript值或物件。可以提供可選的reviver函式以在返回之前對所得到的物件執行變換。

var obj = '{
    "name": "只會番茄炒蛋",
    "age": 10,
    "sex": "男"
}'

JSON.parse(obj)
// 解析後的值為: 
obj = {
    name: "只會番茄炒蛋",
    age: 10,
    sex: "男"
}
複製程式碼

• JSON.stringify() JSON.stringify( obj )與JSON.parse()進行的是反操作

JSON.stringify({});                     // '{}'
JSON.stringify(true);                   // 'true'
JSON.stringify("foo");                  // '"foo"'
JSON.stringify([1, "false", false]);    // '[1,"false",false]'
JSON.stringify({ x: 5 });               // '{"x":5}'
JSON.stringify({x: 5, y: 6});           // "{"x":5,"y":6}"
複製程式碼

Function call() applay() bind()方法

• call()和apply都用於函式呼叫

function fn () {
    console.log(this)
}
fn() // window
fn.call('hello') // String {"hello"}
fn.call(123) // Number {123}
複製程式碼

區別

call( thisvalue, val1，val2，….)

// thisvalue 是函式內部this的值
// 後面是引數列表
複製程式碼

apply( thisvalue, [val1，val2，….])

// thisvalue 是函式內部this的值
// 後面是引數陣列，所有引數放陣列裡面
複製程式碼

• bind()都用於建立中

1) 適用於匿名函式
var fn = function (a, b) {
    console.log(this, a, b)
}.bind('hello', 1, 2)
fn() // String {"hello"} 1 2

2)有名函式,有些特殊
function fn() {
    console.log(this)
}
fn.bind('hello')() // String {"hello"}

3)自執行函式
(function fn() {
    console.log(this)
}.bind('hello')())  // String {"hello"}

(function fn() {
    console.log(this)
}.bind('hello'))() // String {"hello"}

(function fn() {
    console.log(this)
}).bind('hello')() // String {"hello"}
複製程式碼

第十一章 定時器 Math函式

定時器

• setInterval()

setInterval(function(){}, 1000) 多用於動畫

第一個引數是一個函式

第二個引數是事件, 表示1秒(1000毫秒)後呼叫一次, 然後每個1秒呼叫執行一次第一個函式裡面的內容

1) 一般使用
var a = 0;
setInterval(function () {
    a++;
    console.log(a) // 每隔一秒列印a 並且a在自增
}, 1000)

var a = 0;
function fn() {
    a++;
    console.log(a)
}
setInterval(fn, 1000)  // 和上面的寫法資料一樣

2)第一個引數fn 與 fn()的區別, fn()會不等延遲直接呼叫, 後面不在呼叫
var a = 0;
function fn() {
    a++;
    console.log(a)
}
setInterval(fn(), 1000)  // 1 列印1,然後就不在呼叫

3) 帶return值的fn
var a = 0;
function fn() {
    a++;
    console.log(a)
    return function(){console.log('ok')}
}
setInterval(fn(), 1000) // 1 列印1,然後就不在呼叫
複製程式碼

• clearInterval() 清除定時器

clearInterval(timerManger) 裡面的引數是定時管理器
var timer = setInterval(function(){}, 1000) // 設定變數timer為定時管理器
clearInterval(timer) // 清除timer定時管理器
複製程式碼

• setTimeout() 一次定時器

setTimeout( function(){},1000 )

第一個引數是一個函式

第二引數是時間，表示1秒（1000毫秒）後呼叫一次，然後不再呼叫

var a = 0;
setTimeout(function () {
    a++;
    console.log(a) // 1 只有一次列印
})
複製程式碼

• clearTimeout() 清除定時器

clearTimeout(timerManger) 裡面的引數是定時管理器
var timer = clearTimeout(function(){}, 1000) // 設定變數timer為定時管理器
clearTimeout(timer) // 清除timer定時管理器
複製程式碼

Math 數字函式

Math物件用於執行數學任務 Math物件 無需new，直接呼叫Math方法就行

• Math.random() 求隨機值 左閉右開區間

// 隨機 0~1之間的數
var rand = Math.random()
console.log(rand) // 0~1之間的數

// 隨機 5~10之間的數
var rand =  Math.random() *(10-5) + 5; 
console.log(rand) // 5~10之間的數

// 封裝隨機x至y之間的數
function random(x, y) {
    var rand = x + Math.random() * (y - x)
    return rand
}
複製程式碼

• Math.round()————四捨五入

var num = 12.6
Math.round(num) // 13

var num = 12.3
Math.round(num) // 12
複製程式碼

• Math.ceil() ————向上取整 (上舍入)
• Math.floor()————向下取整 (下舍入)
• Math.abs()—————求絕對值
• Math.pow(x,y)———–x的y次冪（x的y次方）
• Math.sqrt(x) —————返回數的平方根
• Math.max(x,y,z...)——-求x和y的最大值
• Math.min(x,y,z...)——-求x和y的最小值

Math方法二

“度”的定義是，“兩條射線從圓心向圓周射出，形成一個夾角和夾角正對的一段弧。當這段弧長正好等於圓周長的360分之一時，兩條射線的夾角的大小為1度。（如圖1） 弧度的定義是：兩條射線從圓心向圓周射出，形成一個夾角和夾角正對的一段弧。當這段弧長正好等於圓的半徑時，兩條射線的夾角大小為1弧度。

角所對的弧長是半徑的幾倍，那麼角的大小就是幾弧度。

它們的關係可用下式表示和計算：

( 弧度 )＝ 弧長 / 半徑

圓的周長是半徑的 2π倍，所以一個周角（360度）是 2π弧度。

• 度跟弧度之間的換算

據上所述，一個平角是 π 弧度。
即 180度＝π弧度
由此可知：
弧度＝π/180度 ( ≈0.017453弧度 )
複製程式碼

• Math.sin（弧度） 正弦 對邊比斜邊 一個以弧度表示的角
• Math.cos（弧度）餘弦 鄰邊比斜邊 是 -1.0 到 1.0 之間的數
• Math.PI

Math.PI 即π 是圓的周長和它的直徑之比。這個值近似為 3.141592653589793
一弧度 = π/180；將角度乘以（2PI/360） 0.017453293 即可轉換為弧度
複製程式碼

第十二章 日期物件Date

日期

• new Date() 本地時間

var d = new Date()
console.log(d) // Mon Sep 16 2019 15:48:31 GMT+0800 (中國標準時間)
複製程式碼

• toUTCString() 當前 世界時

toUTCString() 根據世界時，把 Date 物件轉換為字串。

var d = new Date();
var utc =  d.toUTCString()
console.log(ytc) // "Mon, 16 Sep 2019 07:48:31 GMT"
複製程式碼

• 獲取具體時間

getFullYear()       // 年
getMonth()          // 月( 0 ~ 11 )
getDate()           // 天( 1 ~ 31 )
getDay()            // 星期( 0 ~ 6 )
getHours()          // 時
getMinutes()        // 分
getSeconds()        // 秒
getMilliseconds()   // 毫秒
getTime()           // 返回 1970 年 1 月 1 日至今的毫秒數
複製程式碼

日期格式化

var date = new Date()

• date.toLocaleString() ——————–按照本地時間輸出
• date.toLocaleDateString() —————本地時間 年 月 日
• date.toLocaleTimeString() ————–本地時間 時 分 秒
• date.toTimeString()————————本地 時 分 秒 時區
• date.UTC() ————————————世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數

更多方法參考www.w3school.com.cn/tags/html_r…

第十四章 動畫運動

requestAnimationFrame()

當然最原始的你還可以使用window.setTimout()或者window.setInterval()通過不斷更新元素的狀態位置等來實現動畫，前提是畫面的更新頻率要達到每秒60次才能讓肉眼看到流暢的動畫效果。 現在又多了一種實現動畫的方案，那就是window.requestAnimationFrame()方法。

• 基本使用方式

var num = 0;
function fn() {
    num++;
    document.title = num;
    requestAnimationFrame(fn) //在內部根據使用者瀏覽器(電腦效能)情況,重複呼叫 fn
}
fn() // 頁面不斷變化,數字自增
複製程式碼

• cancelRequestAnimationFrame( timer ) 新增manager定時管理器

var num = 0;
var timer;
function fn() {
    num++;
    document.title = num;
    timer = requestAnimationFrame(fn) //在內部根據使用者瀏覽器(電腦效能)情況,重複呼叫 fn
    if (num == 250) {
        cancelAnimationFrame( timer ); // 清除停止運動
    }
}
fn() // 頁面不斷變化,數字自增
複製程式碼

把 requestAnimationFrame(fn) 賦值給 timer，timer 就是定時管理器

• RequestAnimationFrame( )相容

// RequestAnimationFrame的相容
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (fn){
    setTimeout(fn,1000/60)
}

// cancelAnimationFrame 相容
window.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCanceltAnimationFrame ||
window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || clearTimeout;
複製程式碼

速度版運動框架

<style>
    #elem-container{
    position: absolute;
    left:     100px;
    top:      200px;
    height:   100px;
    }
</style>
<div id="elem-container">dummy</div>
<script>
    let ele = document.getElementById("elem-container");
    let theCSSprop = window.getComputedStyle(ele,null)['left']
    console.log(theCSSprop) // 100px
    
    move(ele, 'left', 20, -6) // 呼叫move函式, 指定傳遞實參 目標標籤/更改的屬性/目標值/步長
    function move(ele, attr, target, speed) { // 指定接受形參 目標標籤/更改的屬性/目標值/步長
        target = parseFloat(target) // 轉化為number
        var initCss = parseFloat(getStyle(ele, attr)) // 獲取初始樣式值
        var timer; // 動畫管理器
        (function requ() {
            initCss += speed
            timer = requestAnimationFrame(requ) // 呼叫reque函式
            if (Math.abs(target-init) <= Math.abs(speed)) { // 用絕對值判斷是否到達目標值
                initCss = target
                cancelAnimationFrame(timer); // 刪除requestAnimationFrame動畫
            }
            ele.style[attr] = initCss + 'px';//設定樣式
        })()
    } 
    
    //定義獲取樣式函式
    function getStyle(ele, attr) {
        // 處理好相容
        return window.getComputedStyle ? window.getComputedStyle(obj)[attr] : obj.currentStyle[attr];
    }
</script>
複製程式碼

時間版運動框架

<style>
    #elem-container{
    position: absolute;
    left:     100px;
    top:      200px;
    height:   100px;
    }
</style>
<div id="elem-container">dummy</div>
<script>
    let ele = document.getElementById("elem-container");
    let theCSSprop = window.getComputedStyle(ele,null)['left']
    console.log(theCSSprop) // 100px
    
    move(ele, 'left', '800px', 1000) // 呼叫move函式, 指定傳遞實參 目標標籤/更改的屬性/目標值/時間
    function move(ele, attr, target, target_t) { // 指定接受形參 目標標籤/更改的屬性/目標值/時間
        target = parseFloat(target) // 轉化為number
        var initCss = parseFloat(getStyle(ele, attr)) // 獲取初始樣式值
        var initTime = new Date() // 獲取開始時間
        var styleValue;
        (function requ() {
            var cur_t = new Date() - initTime // 獲取動畫時長
            var prop = cur_t / target_t
            if (prop >= 1) { // 動畫執行時長與動畫預設總時間比值大於等於1時
                prop = 1
            } else {
                window.requestAnimationFram(requ)
            }
            styleValue = (target - initCss) * prop // 根據時間比例獲取運動路程比例
            ele.style[attr] = initCss + styleValue + 'px'; // 設定樣式
        })()
    } 
    
    //定義獲取樣式函式
    function getStyle(ele, attr) {
        // 處理好相容
        return window.getComputedStyle ? window.getComputedStyle(obj)[attr] : obj.currentStyle[attr];
    }
</script>
複製程式碼

時間加速版運動框架

加速度

例：假如兩輛汽車開始靜止，均勻地加速後，達到10m/s的速度，A車花了10s，而B車只用了5s。它們的速度都從0變為10m/s，速度改變了10m/s。所以它們的速度變化量是一樣的。但是很明顯，B車變化得更快一些。我們用加速度來描述這個現象：B車的加速度（a=Δv/Δt，其中的Δv是速度變化量）>A車的加速度。 顯然，當速度變化量一樣的時候，花時間較少的B車，加速度更大。也就是說B車的啟動效能相對A車好一些。因此，加速度是表示物體速度變化快慢的物理量。

S是距離，Vf終速度，t是加速的時間。Vf=at，a是加速度，替換可得這是勻加速運動距離的通常表示式

move(Obox, 'left', '800px', 1500); // 呼叫move函式,指定傳遞實參
fucntion move(obj,attr,target,tar_t) { // 指定接受形參
  target = parseFloat(target); // 轉化為number  
  var init = parseFloat( getStyle(obj,attr)); // 獲取初始樣式值
  var init_time = new Date(); // 獲取開始時間
  var sty_v;
  var a = 2 * (target-init) / Math.pow(tar_t,8); // 獲取加速度
  (function requ() {
      var cur_t = new Date()- init_time; // 獲取動畫時長
      if( cur_t >= tar_t ){//動畫執行時長與動畫預設總時間比值大於等於1時,
          cur_t = tar_t;
      } else {
          window.requestAnimationFrame(rQAF);
      }
      sty_v = a * Math.pow(cur_t,8) / 2;//根據時間比例獲取運動路程比例
      obj.style[attr] = init+ sty_v + 'px';//設定樣式
  })()
}

//定義獲取樣式函式
function getStyle(ele, attr) {
    // 處理好相容
    return window.getComputedStyle ? window.getComputedStyle(obj)[attr] : obj.currentStyle[attr];
}
複製程式碼

多值時間版運動框架

move(obox, {
    width: '200px',
    height: '200px',
    left: '800px',
    opacity: 1
}, 2000, function(){console.log('已經達到目標值')}) // 呼叫move函式,指定傳遞實參

function move(obj,json,targ_t,callback){    //指定接受形參
    var target = {} // 目標值
    init ={},       // 初始值
    styleV;         // 樣式
    for (var attr in json) {
        target[attr] = parseFloat(json[attr]) // 將目標值轉為number型別
        init[attr] = parseFloat( getStyle(obj,attr) ) // 獲取初始樣式值並轉化為number型別
    }
    var init_t = new Date(); // 獲取開始時間
    (function rQAF(){
        var cur_t = new Date()-init_t; // 獲取當前時間與開始時間的差值--動畫執行時長
        if( cur_t>=targ_t){ // 判斷動畫執行時長是否大於預設目標
            cur_t=targ_t; // 讓動畫執行時長等於預設目標
        } else {
            window.requestAnimationFrame(rQAF); // 呼叫rQAF函式一次
        }
        for (var attr in json) {
            var a = 2 * (target[attr] - init[attr]) / Math.pow(targ_t,2); // 獲取物件屬性的加速度
            styleV = a * Math.pow(cur_t,2) / 2; // 根據動畫時長設定樣式
            if(attr == 'opacity'){
                obj.style[attr] = init[attr] + styleV;//設定樣式
                obj.style.filter = 'alpha(opacity = ' + styleV * 100 + ')'; // opacity相容
            } else {
                obj.style[attr] = init[attr] + styleV + 'px';//設定樣式
            }
        }
        // 根據動畫時長是否等於了預設目標，true執行回撥函式，並繫結this
        cur_t == targ_t ? callback && callback.call(obj) : '';
    })()
}

//定義獲取樣式函式
function getStyle(ele, attr) {
    // 處理好相容
    return window.getComputedStyle ? window.getComputedStyle(obj)[attr] : obj.currentStyle[attr];
}
複製程式碼

原生的動畫運動大致就以上這幾種, 如果自己能力強的話建議自己搞一個庫出來, 沒有這個時間或者懶得弄的話, github上一堆成熟的庫供你使用。

第十五章 DOM文件物件模型

DOM(Document Object Model) 文件樹物件模型

節點屬性

• childNodes \ children

Ele.childNodes ————————–子節點集合
元素.childNodes : 只讀 屬性 子節點列表集合
標準下： 包含了文字和元素型別的節點，也會包含非法巢狀的子節點
非標準下：只包含元素型別的節點，ie7以下不會包含非法巢狀子節點
childNodes 只包含一級子節點，不包含後輩孫級

ele.children————————– 獲取第一級子元素
nodeType : 只讀 屬性 當前元素的節點型別 共12種
    元素節點
    屬性節點: wrap.attributes[0].nodeType
    文字節點
nodeName 節點名稱

元素節點屬性
    ele.tagName 元素標籤名稱
    有關屬性節點操作:
        獲取 ： obj.getAttributeNode() 方法獲取指定的屬性節點。
        建立 ： document.createAttribute(name) 建立擁有指定名稱的屬性節點，並返回新的 Attr 物件。
        新增 ： obj.setAttributeNode() 方法向元素中新增指定的屬性節點。
複製程式碼

• firstChild \ firstElementChild 第一個子節點

ele.firstChild : 只讀 屬性
標準下：firstChild會包含文字型別的節點
非標準下：只包含元素節點

ele.firstElementChild : 只讀 屬性 標準下獲取第一個元素型別的子節點
非標準下：無
複製程式碼

• lastChild \ lastElementChild —————————————————最後一個子節點

相容性同上
複製程式碼

• nextSibling \ nextElementSibling ——————————————下一個兄弟節點

相容性同上
複製程式碼

• previousSibling \ previousElementSibling ——————————-上一個兄弟節點

相容性同上
複製程式碼

• parentNode———————————————————————獲取父節點
• offsetParent ——————————————————————最近定位父級
• childElementCount ———————————————————子元素節點個數

元素型別子節點數量，等同於 children.length
複製程式碼

建立節點

• document.createElement('') 建立元素節點

innerHTML += 新增元素的問題，原本子元素沒有了，不是原本的元素了
複製程式碼

• document.createTextNode(str) 建立文字節點
• element.cloneNode() 引數true克隆元素及後代不會克隆屬性及事件，false克隆本元素

元素節點操作

• parent.insertBefore(new, node) 在已有元素前插入

插入子元素 ,在指定的子元素前面插入
複製程式碼

• parent.appendChild(new) 在已有元素後插入

插入插入子元素，在指定的子元素前面插入
例子：留言板插入內容
複製程式碼

• parent.removeChild(節點)刪除一個節點

刪除DOM元素
複製程式碼

• parent.replaceChild(new, old)替換節點

換元素
複製程式碼

CSSOM檢視模式(CSS Object Model View)

文件及其內容的視覺屬性，包括佈局框定位、視區寬度和元素滾動

Window檢視屬性

• innerWidth/innerHeight

window.innerWidth window視窗的內部寬度，
不包括使用者介面元素，比如窗框
window.innerHeight內部高度
複製程式碼

Document文件檢視

• document.documentElement.clientWidth

document.documentElement.clientWidth==>瀏覽器視窗可視寬度
document.documentElement.clientHeight==>瀏覽器視窗可視高度
====》 可獲取文件沒有內容時候高度
沒有定義W3C的標準，則 IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
複製程式碼

元素檢視屬性

• clientWidth/ clientHeight 可視寬高

clientWidth物件的——————–width + padding
clientHeight 物件的——————height + padding
==> 不包含子元素（一致）
複製程式碼

• offsetWidth/ offsetHeight 可視寬高

offsetHeight:物件height + padding + border
offsetWidth: 物件width + padding + border
==> 不包含子元素（一致）
複製程式碼

• scrollWidth/ scrollHeight 可視寬高

scrollWidth物件的width + padding
scrollHeight應該等用於scrollTop + clientHeight
如果元素沒有隱藏的部分，則相關的值應該等用於clientWidth和clientHeight
scrollHeight物件的height + padding
==> 包含子元素內容,子元素定位,overflow:hidden`（一致）
複製程式碼

• offsetParent 定位父級

獲取元素最近的定位父級 如果沒有定位父級 則參考body（ 元素必須是定位元素）
複製程式碼

• offsetTop/offsetLeft

offsetLeft:獲取物件相對於offsetParent(left)位置
offsetTop:獲取物件相對於offsetParent(top)位置
複製程式碼

• scrollTop/scrollLeft 滾動寬,滾動高

可讀可寫，有內容溢位元素才有效果
ele.scrollTop 元素Y軸滾動的距離
ele.scrollLeft 元素X軸滾動的距離
設定時不能給px 單位，否則會出錯！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
document.getElementsByTagName("body")[0].scrollTop = 100;
複製程式碼

• document.body.scrollTop/ scrollLeft

網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
 IE, firfox：document.documentElement.scrollTop ! ! ! ! ! ! ! ! ! ! ! ! ! !
複製程式碼

元素方法

• getBoundingClientRect():

getBoundingClientRect():得到矩形元素的界線，返回的是一個物件，
包含 top, left, right, bottom四個屬性值，大小都是相對於瀏覽器視窗top,left 的距離。
返回內容類似於：
{ top: 143, right: 1196, bottom: 164, left: 889}
複製程式碼

• scrollIntoView():

ele.scrollIntoView() 讓元素滾動到可視區域（HTML5標準),引數 true 與瀏覽器對齊，false元素在視窗居中顯示
複製程式碼

• event.clientX/event.clientY

相對於window，為滑鼠相對於瀏覽器視窗的偏移
event.clientX 滑鼠在文件的水平座標
event.clientY 滑鼠在文件的垂直座標
複製程式碼

BOM物件

瀏覽器物件模型 (BOM) 使 JavaScript 有能力與瀏覽器“對話”。

Window 物件 它表示瀏覽器視窗。
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
全域性變數是 window 物件的屬性。
全域性函式是 window 物件的方法。
HTML DOM 的 document 也是 window 物件的屬性之一
window.document.getElementById("header");
複製程式碼

Window 物件屬性

• document Document 物件
• location 瀏覽器地址資訊

Location 物件屬性:
物件屬性	                    描述
window.location.href	    設定或返回完整的 URL。
window.location.search      設定或返回 url?,?+後面的內容。
window.location. hash	    設定或返回 url#後面的內容
window.location.port	    設定或返回當前 URL 的埠號。
window.location.hostname    設定或返回當前 URL 的主機名。
window.location.host	    設定或返回主機名和當前 URL 的埠號
window.location.pathname    設定或返回當前 URL 的路徑部分
window.location.protocol    設定或返回當前 URL 的協議
複製程式碼

• history 歷史記錄

History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL。

屬性
length 返回瀏覽器歷史列表中的 URL 數量。
方法
back() 載入 history 列表中的前一個 URL。
forward() 載入 history 列表中的下一個 URL。
go() 載入 history 列表中的某個具體頁面。
下面一行程式碼執行的操作與單擊兩次後退按鈕執行的操作一樣：
history.go(-2)
複製程式碼

• Navigator 對 Navigator 物件的只讀引用

window.`navigator.userAgent` 瀏覽器資訊
複製程式碼

Window 物件方法

• open() 開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。

window.open(url,target)
open(地址預設是空白頁面，開啟方式預設新視窗) 開啟一個新視窗
window.open('http://www.baidu.com', '_self');
var opener = window.open();//返回值 返回的新開頁面的window物件
opener.document.body.style.background = 'red';
window.close()
opener.close();//可以通過關閉用window.open方法開啟的視窗
複製程式碼

• close() 關閉瀏覽器視窗。
• setInterval() 按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
• setTimeout() 在指定的毫秒數後呼叫函式或計算表示式。
• clearInterval() 取消由 setInterval() 設定的 timeout。
• clearTimeout() 取消由 setTimeout() 方法設定的 timeout。
• scrollTo() 把內容滾動到指定的座標。

document.onclick = function(){
    window.scrollTo(0,500);
}
複製程式碼

• scrollBy()

scrollBy(xnum,ynum) 指定的畫素值來滾動內容。不帶px
xnum 必需。把文件向右滾動的畫素數 。
ynum 必需。把文件向下滾動的畫素數。
document.onclick = function(){
    window.scrollTo(0,500);
}
複製程式碼

• alert( 內容 ) 警告框

alert( 內容 )``警告框經常用於彈出警告資訊，無返回值
複製程式碼

• confirm(“文字”) 確認框

confirm(“文字”)``確認框用於使使用者可以驗證或者接受某些資訊。
如果使用者點選確認，那麼返回值為 true。如果使用者點選取消，那麼返回值為 false。
複製程式碼

• prompt(“文字”,”預設值”)

prompt(“提示”,”預設值”)提示框經常用於提示使用者在進入頁面前輸入某個值。
如果使用者點選確認，那麼返回輸入的值。如果使用者點選取消，那麼返回值為 null。
function disp_prompt(){
    var name=prompt("請輸入您的名字","Bill")
    if (name!=null && name!=""){
        document.write("你好！" + name + " 今天過得怎麼樣？")
    }
}
複製程式碼

window物件常用事件

• onload 文件載入完畢
• onscroll 滾動的時候
• onresize 調整尺寸的時候

第十六章 event物件 阻止冒泡 註冊/ 移除監聽事件

事件event物件

Event物件 用來獲取事件的詳細資訊：滑鼠位置、鍵盤按鍵

相容

標準下 : 事件物件是通過事件函式的第一個引數
傳入 如果一個函式是被事件呼叫的那麼，這個函式定義的第一個引數就是事件物件
ie: event是一個內建全域性物件

var obj.onclick = function (ev) {
    var ev = ev || window.event;
}

Event物件的相容：ev = ev || window.event;
Event物件下的獲取滑鼠位置：e.clientX || e.clientY
複製程式碼

事件冒泡

事件冒泡指子元素觸發事件的時候，會 冒泡（觸發）父級的相同的事件

阻止冒泡:
    非標準：ev.stopPopagation();
    非標準：ev.cancelBubble = true;
複製程式碼

註冊處理事件

• 標準：obj.addEventListener(事件名稱，事件函式，是否捕獲);

是否捕獲
false冒泡
true捕獲
先捕獲後冒泡
有捕獲
事件名稱沒有on
事件執行的順序是正序
this觸發該事件的物件
複製程式碼

• 低版ie：obj.attachEvent(事件名稱，事件函式);

沒有捕獲
事件名稱有on
事件函式執行的順序：標準ie-》正序 非標準ie-》倒序
this指向window
複製程式碼

• 移除 obj.removeEventListener(事件名稱，事件函式)
• 移除 object.detachEvent(事件名稱,function);

拖拽

• onmousedown 滑鼠按下
• onmousemove 滑鼠移動
• onmouseup 滑鼠抬起

預設事件

右鍵選單 : oncontextmenu

解決：文字選中再的問題
標準：解決辦法 return false (阻止預設事件)
非標準ie：全域性捕獲
onselectstart = "return false"` 處理文字選中
ondragstart = "return false" 處理圖片拖動
複製程式碼

標準下阻止預設事件，可以拖拽圖片啦

滑鼠滾輪事件

Ie/chrome: onmousewheel
event.wheelDelta
上：120
下：-120
firefox : DOMMouseScroll 必須用addEventListener()新增

fire: event.detail
上：-3
下：3
滾輪屬性：event.wheelDelta \ event.detail
複製程式碼

相容

obj.onmousewheel = handle; // 相容ie chrome
obj.addEventListener ? obj.addEventListener('DOMMouseScroll', handle,boolean) : false;   // 相容firefox

// 滾動函式event物件處理
function handle(e){
    e = e || window.event;
    e.wheel = e.wheelDelta ? e.wheelDelta : -e.detail * 40;
}
複製程式碼

阻止預設事件：

標準：event.preventDefault()
非標準：event.returnValue = false;

return false阻止的是 obj.on事件名稱=fn 所觸發的預設行為
addEventListener繫結的事件需要通過event下面的event.preventDefault();
detachEvent繫結的事件需要通過event下面的event.returnValue = false;
滑鼠滾輪與自定義滾動條結合
複製程式碼

全相容新增/刪除事件 封裝

function addEvent(obj, type, fn, boolean){
    boolean = boolean || false; // 處理捕獲冒泡
    obj[type + fn.name] = handle;//新增方法
    obj.addEventListener ? obj.addEventListener(type, obj[type+fn.name], boolean) :
    obj.attachEvent('on'+type,obj[type+fn.name]);
    // 滾輪事件
    if(type == 'mousewheel'){
        // obj['on'+type]= handle; // chrome 及ie
        //相容火狐
        obj.addEventListener ? obj.addEventListener('DOMMouseScroll', obj[type+fn.name], boolean) : '';
    }
    // 處理event物件
    function handle(e){
        e = e|| window.event;
        e.wheel = e.wheelDelta?e.wheelDelta:e.detail*(-40); // 處理滾輪方向
        fn.call(obj,e);
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }
}

function removeEvent(obj,type,fn,boolean){
    boolean = boolean || false; // 處理捕獲冒泡
    obj.removeEventListener ? obj.removeEventListener(type, obj[type+fn.name], boolean) :
    obj.detachEvent('on'+type,obj[type+fn.name]);
    // 滾輪事件
    if (type == 'mousewheel') {
        //相容火狐
        obj.removeEventListener ? obj.removeEventListener('DOMMouseScroll', obj[type+fn.name], boolean) : '';
    }
}
複製程式碼

第十七章 表單事件 事件委託 onready封裝 鍵盤事件

表單中的操作

焦點事件

• onfocus 獲取焦點事件 input、textarea 以及 select 和 a 元素
• onblur 獲取焦點事件 input、textarea 以及 select 和 a 元素
• onchange 內容改變觸發 input、textarea 以及 select 元素
• onsubmit 事件 表單提交時間
• onreset 事件 重置表單

obj.focus() 給指定的元素設定焦點
複製程式碼

事件委託

標準：e.target 指向事件觸發物件

非標準：e.srcElement 指向事件觸發物件

window.onready

文件的onreadystatechange 事件
當文件的readyState 屬性發生變化的時候觸發
readyState 屬性返回當前文件的狀態（載入中……）。
該屬性返回以下值:
uninitialized - 還未開始載入
loading - 載入中
interactive - 已載入，文件與使用者可以開始互動
complete - 載入完成
複製程式碼

鍵盤事件

不是所有元素都能夠接收鍵盤事件，能夠響應使用者輸入的元素，能夠接收焦點的元素就能夠接收鍵盤事件,document能夠響應

keydown：使用者在鍵盤上按下某按鍵是發生。一直按著某按鍵則會不斷觸發（opera瀏覽器除外）。
keypress：使用者按下一個按鍵，併產生一個字元時發生（也就是不管類似shift、alt、ctrl之類的鍵，
就是說使用者按了一個能在螢幕上輸出字元的按鍵keypress事件才會觸發）。一直按著某按鍵則會不斷觸發。
keyup：使用者釋放某一個按鍵是觸發。

event.keyCode : 數字型別 鍵盤按鍵的值 鍵值
ctrlKey,shiftKey,altKey 布林值

當一個事件發生的時候，如果ctrl || shift || alt 是按下的狀態，返回true，否則返回false
複製程式碼

第十八章 RegExp

什麼是正規表示式

正規表示式是描述字元模式的物件。

正規表示式用於對字串模式匹配及檢索替換，是對字串執行模式匹配的強大工具。
而String和RegExp都定義了使用正規表示式進行強大的模式匹配和文字檢索與替換的函式。
正規表示式主要用來驗證客戶端的輸入資料。可以節約大量的伺服器端的系統資源，並且提供更好的使用者體驗。
複製程式碼

建立正規表示式

• 直接量

語法：Reg = /pattern/modifiers;

var Reg = /box/gi;
複製程式碼

• new RegExp

語法 Reg = new RegExp( pattern , modifiers ); // pattern, modifiers此時是字串
var Reg = new RegExp(“box”, ”gi”);

何種方法建立都是一樣的
pattern 模式 模板，要匹配的內容
modifiers 修飾符
複製程式碼

正規表示式用法及區別

• String中正規表示式方法

方法	                描述
match(Reg)	        返回RegExp匹配的包含全部字串的陣列或null
search(Reg)	        返回RegExp匹配字串首次出現的位置
replace(Reg，newStr)	用newStr替換RegExp匹配結果，並返回新字串
split(Reg)	        返回字串按指定RegExp拆分的陣列

例子:
var str = 'hello';
var Reg = /e/i;
str.match(Reg);
複製程式碼

• RegExp物件的方法

方法    	描述
exec（）	在字串中執行匹配搜尋，返回首次匹配結果陣列,
test（）	在字串中測試模式匹配，返回true或false

例子:
var pattern = new RegExp(“box”,”gi”);
pattern.test(str);
pattern.exec(str);
複製程式碼

注意區別正則方法和字串方法使用避免混淆

正則方法：pattern.test(str); 方法的主體是正規表示式
字串方法：str.match(pattern);方法的主體是字串
複製程式碼

修飾符

修飾符用於執行區分大小寫和全域性匹配:

• i 忽略大小寫匹配
• g 全域性匹配，預設只匹配第一個元素，就不在進行匹配
• m 執行多行匹配

例子: 
var patt =  /pattern/i;         //忽略大小寫匹配
var patt =  /pattern/g;         //全域性匹配
var patt =  /pattern/m;         //執行多行匹配
複製程式碼

pattern 模式

• 基本匹配

xxx ———————————匹配xxx字元
var Reg = /abc/;

x|y|z —————————-匹配x或y或z字元
var Reg = /abc|bac|cba/;
複製程式碼

• []

[abc]———————————–匹配abc之中的任何一個字元

非
[^abc]———————————匹配非a非b非c字元的

到
[0-9] ———————————匹配0至9之間的數字
[a-z] ———————————匹配小寫a至小寫z的字元
[A-Z] ———————————匹配大寫A至大寫Z的字元
[\u4e00-\u9fa5]———匹配中文 

還可以組合
var Reg  = /hello [0-9a-zA-z]/;
複製程式碼

• 元字元(轉義字元)

. —————————————–匹配單個字元，除了換行和行結束符
\w—————————————匹配單詞字元,數字,_(下劃線)
\W—————————————匹配非（單詞字元和_(下劃線)）
\d —————————————匹配數字
\D —————————————匹配非數字
\s —————————————匹配空白字元（空格）
\S —————————————匹配非空格字元
\b —————————————匹配單詞邊界 ( 除了 （字)字母 數字_ 都算單詞邊界)
\B —————————————匹配非單詞邊界
\n —————————————匹配換行符

特殊的轉譯字元. \ /

1.var reg = /\./;//匹配.
2.var reg = /\\/;//匹配\
3.var reg = /\//;//匹配/
複製程式碼

量詞

n?———————————匹配0個或一個n的字串
n*———————————匹配0個或多個字串(任意個)
n+———————————匹配至少一個n字串
n{X}——————————匹配包含X個n的序列的字串
n{X,Y}————————–匹配包含至少X或至多Y個n的序列的字串
n{x,}—————————-匹配至少X個n的序列字串

^n———————————匹配以n開頭的字串
n$———————————匹配以n結尾的字串
複製程式碼

貪 婪 惰 性

貪婪: 儘可能多的匹配
惰性: 儘可能少的匹配
前提條件都是要匹配到內容

—— 貪 婪 ——	—— 惰 性 ——
+	            +?
?	            ??
*	            *?
{n}	            {n}?
{n,m}	            {n,m}?
{n,}                {n,}?

複製程式碼

子組(子表示式)

子組:使用()小括號,指定一個子表示式後,稱之為分組
捕獲型
非捕獲型
複製程式碼

• 捕獲型

1.var str = 'abcdefg';
2.var reg = /(abc)d/;//匹配abcd
3.var val = reg.exec( str);
4.console.log( val );   //["abcd", "abc", index: 0, input: "abcdefg"]

索引0 為匹配的結果
索引1 為第一個子表示式 匹配結果
index :首次匹配成功的索引值，
input: 匹配目標


—— 字元 ——		引用
(pattern)	匹配pattern並捕獲結果，自動設定組號,是從1開始的正整數	\num
引用是值的引用，匹配結果的引用不是匹配形式引用
複製程式碼

• 非捕獲型

(？:pattern)
(?=pattern) 零寬度正向預言
1.Windows (?=2000) //匹配windows且後面跟2000
匹配 “Windows2000” 中的 “Windows”
不匹配 “Windows3.1” 中的 “Windows”。

(?!pattern) 零寬度負向預言
1. Windows (?!2000)//匹配windows且後面非2000
匹配 “Windows3.1” 中的 “Windows”
不匹配 “Windows2000” 中的 “Windows”。
複製程式碼

說實話正則我搞的很頭大, 一般都是用到什麼網上去搜, 自己寫還要去看筆記...

第十八章 cookie

cookie : 儲存資料，當使用者訪問了某個網站（網頁）的時候，我們就可以通過cookie來向訪問者電腦上儲存資料

1.不同的瀏覽器存放的cookie位置不一樣，也是不能通用的
2.cookie的儲存是以域名形式進行區分的
3.cookie的資料可以設定名字的
4.一個域名下存放的cookie的個數是有限制的，不同的瀏覽器存放的個數不一樣
5.每個cookie存放的內容大小也是有限制的，不同的瀏覽器存放大小不一樣
複製程式碼

• 訪問cookie

要在伺服器環境下我們通過document.cookie來獲取當前網站下的cookie的時候，
得到的字串形式的值，他包含了當前網站下所有的cookie。他會把所有的cookie通過一個分號+空格的形式串聯起來
console.log( document.cookie );
複製程式碼

• 儲存cookie

document.cookie = '資料名=值';
複製程式碼

• 設定cookie過期時間

cookie預設是臨時儲存的，當瀏覽器關閉程式的時候自動銷燬,
如果我們想長時間存放一個cookie。需要在設定這個cookie的時候同時給他設定一個過期的時間

過期時間必須是一個日期物件轉換成的字串（時間戳.toGMTString()）
document.cookie = ‘資料名=值; expires=過期時間’;

例如:
var oDate = new Date();
oDate.setDate( oDate.getDate() + 5);
oDate.toGMTString();//轉換為日期字串
document.cookie='age=20; expires='+oDate;
複製程式碼

• cookie封裝

// 設定cookie封裝
function setCookie(obj, time) {
    for (key in obj) {
        var d = new Date();
        d.setDate( d.getDate() + time );
        document.cookie = key + '=' + obj[key] +'; expires = ' + d.toUTCString();
    }
}
setCookie({
    name:'hello',
    sex:'man',
    love:'逛街',
}, 5)

// 獲取cookie封裝
function getCookie() {
    var cookie = document.cookie;
    var result = {};
    for(key in arguments){
        var val = '\\b'+arguments[key]+'=(\\w*)+';
        var reg =new RegExp(val,'i');
        val = reg.exec(cookie);
        result[arguments[key]] = val? decodeURI(val[1]):null;
    }
    return result;
}
getCookie('age', 'name')

// 移除Cookie
function removeCookie() {
    for(key in arguments){
        var json ={};
        json[arguments[key]]=null;
        setCookie(json,-1);
    }
}
removeCookie('name');
複製程式碼

第十九章 指令碼化HTTP Ajax

Ajax概述

AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
功能：在不重新整理頁面的情況下，實現與後臺的資料互動

AJAX 不是新的程式語言，而是一種使用現有標準的新方法。
Ajax技術核心是XMLHttpRequest物件(簡稱XHR)

1 執行在伺服器
2 不能跨域
複製程式碼

XMLHttpRequest 物件方法

• 建立XMLHttpRequest 物件

建立 new XMLHttpRequest()
ie 6以下版本new ActiveXObject('Msxml2.XMLHttp.3.0') 或 new ActiveXObject('Msxml2.XMLHTTP.6.0')
例如: 
new XMLHttpRequest() || new ActiveXObject('Msxml2.XMLHTTP.3.0')||new ActiveXObject('Msxml2.XMLHTTP.6.0'); 
複製程式碼

• Open(``method,url,asynch,[username],[password])

指定和伺服器端互動的HTTP方法，URL地址，即其他請求資訊；
Method: http請求方法，一般使用”GET“,”POST“.
url： 請求的伺服器的地址；
asynch： 是否採用非同步方法，true為非同步，false為同步；
後邊兩個可以不指定，username和password分別表示使用者名稱和密碼，提供http認證機制需要的使用者名稱和密碼。

// GET
GET請求是最常見的請求型別，最常用於向伺服器查詢某些資訊。
必要時，可以將查詢字串引數追加到URL的末尾，以便提交給伺服器。
xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

注意: 特殊字元(eg:&等)，傳參產生的問題可以使用encodeURIComponent()進行編碼處理，中文字元的返回及傳參，
可以將頁面儲存和設定為utf-8格式即可。或者使用提交url通用方法。

// POST
POST請求可以包含非常多的資料，我們在使用表單提交的時候，很多就是使用的POST傳輸方式。
xhr.open(‘post’, ‘demo.php’, true);
而傳送POST請求的資料，不會跟在URL的尾巴上，而是通過send()方法向伺服器提交資料。
xhr.send(‘name=Lee&age=100’);
一般來說，向伺服器傳送POST請求由於解析機制的原因，需要進行特別的處理。
因為POST請求和Web表單提交是不同的，需要使用XHR來模仿表單提交。

例如:
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
複製程式碼

• SetRequestHeader(String header,String Value)如果是POST方式，需要設定請求頭

設定HTTP請求中的指定頭部header的值為value.
此方法需在open方法以後呼叫，一般在post方式中使用。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
複製程式碼

• send(data)

向伺服器發出請求，如果採用非同步方式，該方法會立即返回。
content可以指定為null表示不傳送資料，其內容可以是DOM物件，輸入流或字串。
複製程式碼

• Abort()

停止當前http請求。對應的XMLHttpRequest物件會復位到未初始化的狀態。
複製程式碼

XMLHttpRequest物件屬性

• onreadystatechange

請求狀態改變的事件觸發器（readyState變化時會呼叫這個屬性上註冊的javascript函式）。
複製程式碼

• readyState

表示XMLHttpRequest物件的狀態：
0：未初始化。物件已建立，未呼叫open；
1：open方法成功呼叫，但Send方法未呼叫；
2：send方法已經呼叫，尚未開始接受資料；
3：正在接受資料。Http響應頭資訊已經接受，但尚未接收完成；
4：完成，即響應資料接受完成。
複製程式碼

• responseText | responseXML

responseText 伺服器響應的文字內容
responseXML 伺服器響應的XML內容對應的DOM物件
複製程式碼

• Status

伺服器返回的http狀態碼。
200表示“成功”，
404表示“未找到”，
500表示“伺服器內部錯誤”等。

通過xhr.getResponseHeader(“Content-Type”);可以獲取單個響應頭資訊
getAllResponseHeaders();獲取整個響應頭資訊
console.log(xhr.getAllResponseHeaders())
複製程式碼

第二十章 Ajax封裝 跨域 jsonp

Ajax封裝

function ajax(obj) {
    var type = obj.type || 'GET' // 請求型別
    url = obj.url // url處理
    asyn = obj.asyn !== true // 非同步處理
    data = '' // 預設寫入資料
    dataType = obj.dataType  || 'json' // 資料型別
    success = obj.success, // 回撥函式
    error = obj.error; // 錯誤處理函式
    for(key in obj.data){ // 資料處理
        data += key+'='+obj.data[key]+'&';
    }
    data = encodeURI(data);
    var xhr=new XMLHttpRequest();
    if(window.XMLHttpRequest){ // 處理相容
        xhr = new XMLHttpRequest();
    } else {
        try{
            xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');
        } catch(e) {
            xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');
        }
    }
    //如果是GET請求方式,設定資料
    if(type.toUpperCase() == 'GET'){
        var date = new Date().getTime();//新增一個時間用來處理，GET方式快取的問題
        url = url+'?'+data+date;
        data = null;
    } else if (dataType.toUpperCase() == 'XML') {
        data =null;
    }
    xhr.open(type,url,asny); // 請求架設
    xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded'); // 設定請求頭資訊
    xhr.send(data); // 傳送資料
    xhr.onreadystatechange= function(){ // 監聽請求
        // readyState 為XMLHttpRequest物件的狀態
        // status 為伺服器返回的http狀態碼
        if(xhr.readyState== 4 && xhr.status==200){
            var response;
            if(dataType === 'json' || dataType === 'text'){
                if(dataType === 'json'){
                    // 解析json資料
                    response = JSON.parse(xhr.responseText);
                } else {
                    // 普通資料
                    response = xhr.responseText;
                }
            } else {
                response = xhr.responseXML;
            }
             success&&success(response);
        } else {
            error && error(xhr.status);
        }
    }
}
複製程式碼

跨域

iframe 跨域 // 用的超級少了

json 跨域

jsonp,大家已經知道json是什麼了，那麼p是什麼？p是填充的意思,json的填充
jsonp返回的資料形式是 callback({age:30,name:'二狗'})
而不是{age:30,name:'二狗'}是用括號包裹,前面的名稱就是‘填充’，也就是jsonp的p.
為什麼前面有一段字母呢？因為script接受的資料如果是一個json沒辦法儲存，
而呼叫一個函式,{}資料作為實參傳遞,這樣就可以拿到json中的資料
複製程式碼

jsonp前端程式碼看起來像這樣

<script>
    function callback(data){ // 定義接收資料的處理函式
        console.log( data);
    }
</script>
//我需要後臺返回一個callback({資料})這樣的一個值，實質就是呼叫上面的函式
<script src='./8-1jsonp.php?jsonp=callback'></script>
複製程式碼

第二十一章 物件導向OOP ECMAscrtipt5

ECMAScript 物件型別

在 ECMAScript 中，所有物件並非同等建立的。
一般來說，可以建立並使用的物件有三種：本地物件、內建物件和宿主物件 、自定義物件。

本地物件包括：
1.Object 
2.Function 
3.Array 
4.String 
5.Boolean 
6.Number 
7.Date 
8.RegExp 
9.Error 
10.EvalError 
11.RangeError 
12.ReferenceError 
13.SyntaxError 
14.TypeError 
15.URIError 

內建物件：
1.ECMA-262 只定義了兩個內建物件，即 Global（window） 和 Math （它們也是本地物件，根據定義，每個內建物件都是本地物件）。

宿主物件:
1.所有非本地物件都是宿主物件（host object），即由 ECMAScript 實現的宿主環境提供的物件。
2.所有 BOM 和 DOM 物件都是宿主物件。
複製程式碼

物件中this指向，誰呼叫指向誰

var obj = {
    show: function () {
        console.log(this)
    },
    name: {
        getName: function () {
            console.log(this)
        }
    }
}
obj.show(); // 指向obj
obj.name.getname(); // 指向name
複製程式碼

ECMAScript5 物件的屬性方法

• 物件屬性

constructor
對建立物件的函式的引用（指標）。對於 Object 物件，該指標指向原始的 Object() 函式。
複製程式碼

• 物件方法

1) hasOwnProperty(property)
obj.hasOwnProperty(name)來判斷一個屬性是否是自有屬性，自身屬性還是繼承原型屬性。必須用字串指定該屬性。返回true 或 false

2) isPrototypeOf(object)
obj.isPrototypeOf( obj.prototype ) 判斷該物件的原型是否為xxxxx。 返回true 或 false

3) propertyIsEnumerable()
obj.propertyIsEnumerable(‘name’) 判斷物件給定的屬性是否可列舉，即是否可用 for...in 語句遍歷到,返回true 或 false

4)getter,setter: 返回property的值得方法，值：function(){}或 undefined 預設是undefined

5)__defineGetter__(),__defineSetter__() 定義setter getter 函式
在物件定義後給物件新增getter或setter方法要通過兩個特殊的方法__defineGetter__和__defineSetter__。
這兩個函式要求第一個是getter或setter的名稱，以string給出，第二個引數是作為getter或setter的函式。

6)__lookupGetter__,__lookupSetter__ 返回getter setter所定義的函式
語法：obj.lookupGetter(sprop)
複製程式碼

ECMAScript5 Object的新屬性方法

• Object.defineProperty(O,Prop,descriptor) / Object.defineProperties(O,descriptors)

定義物件屬性
O ——————————–為已有物件
Prop —————————為屬性
descriptor —————–為屬性描述符
descriptors —————-多個屬性描述符？
在之前的JavaScript中物件欄位是物件屬性，是一個鍵值對，而在ECMAScript5中引入property，property有幾個特徵
Object.defineProperty 及Object.defineProperties 定義預設為:

value：值，預設是undefined

writable：是否可寫，預設是false,

enumerable：是否可以被列舉(for in)，預設false

configurable：是否可以被刪除，預設false
複製程式碼

• Object.getOwnPropertyDescriptor(O,property)

獲取物件的自有的指定的屬性描述符
複製程式碼

• Object.keys(O,property)

獲取所有的可列舉的屬性名，非繼承,返回陣列
複製程式碼

• Object.getOwnPropertyNames(O)

獲取所有自有的屬性名，非繼承
複製程式碼

• Object.create(O, descriptors )

Object.create(O,descriptors)這個方法用於建立一個物件，並把其prototype屬性賦值為第一個引數，
同時可以設定多個descriptors ，第二個引數為可選，
複製程式碼

• Object.preventExtensions(O) / Object.isExtensible()

Object.preventExtensions(O) 阻止物件擴充，即：不能增加新的屬性，但是屬性的值仍然可以更改，也可以把屬性刪除，
Object.isExtensible(O)用於判斷物件是否可擴充
複製程式碼

• Object.seal(O) / Object.isSealed()

Object.seal(O)方法用於把物件密封，也就是讓物件既不可以擴充也不可以刪除屬性
（把每個屬性的configurable設為false）,單數屬性值仍然可以修改，Object.isSealed（）由於判斷物件是否被密封
複製程式碼

• Object.freeze(O) / Object.isFrozen()

終極神器，完全凍結物件，在seal的基礎上，屬性值也不可以修改（每個屬性的wirtable也被設為false）
複製程式碼

說實話這章節的內容很多東西我在開發中根本用不到,極少數能用一下的...除非用到了我才會看看筆記

第二十二章物件導向 OOP 繼承

包裝物件

原始值型別(值型別): Boolean Number String
原始值.包裝 = "包裝物件"
包裝物件: 字面量定義的原始型別的物件, 臨時建立了一個物件, 這個物件就叫做包裝物件,包裝物件使用完就丟棄了

1) 字面量建立的物件, 原理是js在內部隱式呼叫對應的建構函式生成的物件,
如果是有js機制隱式呼叫了建構函式建立的原始型別物件, 那麼建立完成後,會把物件丟棄了

2) 如果認為顯示的呼叫建構函式生成原始型別的物件, 那麼不會把物件丟棄了(可以進行屬性的寫入和讀取)

var arr = '123'  typeof(arr === String)
var str = new String('123') typeof(str === Object)
console.log(arr == str) 使用物件實際上使用物件的值, 所以相等
console.log(arr === str) 嚴格模式是不全等的, 不單單判斷值相同,還要判斷型別相同
複製程式碼

繼承

繼承: 子類繼承父類
    1) 子類可以繼承父類的所有
    2) 子類擴充套件不能影響父類
類繼承的缺點: 不能在子類例項化時傳引數
私有屬性繼承: 父類.call(this, 引數)
複製程式碼