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就是指觸發這個事件的元素

複製代碼 更多關於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]獲取計算後的樣式對象,只讀

dummy

複製代碼 不要獲取複合樣式:如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標籤下的變量 稱之爲全局變量,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 ('#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; 複製代碼 速度版運動框架

dummy

複製代碼 時間版運動框架

dummy

複製代碼 時間加速版運動框架 加速度

例：假如兩輛汽車開始靜止，均勻地加速後，達到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('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前端代碼看起來像這樣

//我須要後臺返回一個callback({數據})這樣的一個值，實質就是調用上面的函數

複製代碼 第二十一章 面向對象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, 參數)