【思惟導圖】前端開發JavaScript-鞏固你的JavaScript知識體系

JavaScript基礎語法

var a = [1, 2, 5];
for(var k in a){
    console.log(k);   // k 爲當前元素的下標
}
for(var m of a){
    console.log(m);   // m 爲當前元素的值
}
VM215:3 0
VM215:3 1
VM215:3 2
VM215:6 1
VM215:6 2
VM215:6 5

變量聲明

• var 聲明一個變量，可賦一個初始值。
• let 聲明一個塊做用域的局部變量，可賦一個初始值。
• const 聲明一個塊做用域的只讀命名的常量。
• 變量的名字又叫作「標識符」，必須以字母、下劃線（_）或者美圓符號（$）開頭，而且區分大小寫。
• 若沒有爲變量賦初始值，則值默認爲undefined
• 若沒有聲明變量而直接使用，拋出ReferenceError錯誤
• 當變量值爲undefined時，布爾值環境當作false
• 當變量值爲null時，布爾值環境當作false

數據類型

• Boolean布爾值，true和false
• null對大小寫敏感
• undefined空類型，變量未定義時候的值
• Number數值類型
• String字符串類型
• Symbol（ES6新增）表示一種惟一且不可變的數據

字面量

• 字面量是用來表示如何表達這個值
• 變量賦值時右邊的都是字面量
• 數組字面量
• 布爾字面量
• 浮點數字面量
• 對象字面量
• 整數字面量
• 正則字面量
• 字符串字面量

全局變量

代碼：

// ES5

var a = 'web';

window.a; // 'web'

// ES6

let b = 'web';

window.b; // undefined

註釋

代碼：

// 單行註釋

/*

多行註釋

*/

變量做用域

• 全局變量：即聲明在函數以外，當前文檔全部地方均可以訪問
• 局部遍歷：即聲明在函數內部，僅在當前函數內能夠訪問

代碼：

// ES5及以前

console.log(a); // undefined

var a = 1;

console.log(a); // 1

// ES6開始

console.log(b); // Uncaught ReferenceError: b1 is not defined

let b = 2;

console.log(b); // 2

函數聲明有兩種方式

代碼：

// 函數聲明

f(); // 'web'

function(){

console.log('web');

};

// 函數表達式

g(); // Uncaught TypeError: g is not a function

var g = function(){ // 換成 let 聲明也同樣

console.log('web');

}

常量

• 使用const來聲明一個只讀的常量
• const聲明的變量不能直接修改值，可是對於對象和數組，倒是不受保護能夠修改的

1. 一個完整的javascript實現由3個部分組成：核心ECMAScript，文檔對象模型DOM,瀏覽器對象模型BOM。
2. JavaScript是一種直譯式腳本語言，是一種動態類型，弱類型，基於原型的語言，內置支持類型。
3. JavaScript具備特色：一種解釋性腳本語言，主要用於向HTML頁面添加交互行爲，能夠直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行爲的分離，
4. 跨平臺特性，在絕大多數瀏覽器的支持下，能夠在多種平臺下運行。
5. JavaScript語法區別：區分大小寫，變量是弱類型，結尾的分號無關緊要，解釋與java，c和php語言中的註解是相同的，大括號表示代碼塊。

示例 {}包含的內容表示一個代碼塊

代碼：

if(test1=="red") {
    test1 = "blue";
    alert(test1);
}

JavaScript關鍵字：

break,else,new,var
case,finally,return,void
catch,for,switch,while
continue,function,this,with
default,if,throw
delete,in,try
do,instanceof,typeof

JavaScript的變量

在javascript中，變量是存儲信息的容器，變量存在兩種類型的值，即爲原始值和引用值。

1. JavaScript的原始類型，即Undefined，Null，Boolean，Number和String型。
2. 字符串String是JavaScript的基本數據類型。
3. 數據類型表示數據的類型，JavaScript語言的每一個值都屬於某一種數據類型。
4. JavaScript的數據類型分兩類：值類型（原始值），引用數據類型（引用值）。
5. 值類型：字符串string，數字number,布爾boolean，對空null，未定義undefined，symbol爲es6引入的一鍾新的原始數據類型，表示獨一無二的值。
6. 引用數據類型：對象object，數組array，函數function。
7. JavaScript提供typeof運算符用於判斷一個值是否在某種類型的範圍內。
8. Undefined類型只有一個值，即爲undefined。
9. 當聲明的變量未初始化時，該變量的默認值是undefined。
10. Null類型只有一個值爲null，值undefined其實是從值null派生來的，因此JavaScript將他們定義爲相等的。
11. null與undefined表示這兩個值相等，但含義不一樣。
12. undefined是聲明瞭變量但未對其初始化時賦予該變量的值，null表示還沒有存在的對象。

代碼：

console.log( null == undefined); // true

1. Boolean類型的兩個值是true和false。
2. Number類型，全部數學運算返回的都是十進制的結果。
3. Number.MAX_VVALUE和Number.MIN_VALUE，它們定義了Number值集合的外邊界。
4. 若是生成的數值結果大於Number.MAX_VALUE時，將被賦予值Number.POSITIVE_INFINITY，表示再也不有Number值。生成的數值小於Number.MIN_VALUE，會被賦予值Number.NEGATIVE_INFINITY，表示再也不有Number值。
5. 有表示無窮大的值爲Infinity。
6. Number.POSITIVE_INFINITY的值爲Infinity，Number.NEGATIVE_INFINITY的值爲-Infinity。

使用 isFinite()方法判斷參數值是不是有窮的。

1. 特殊的NaN，表示非數。與無窮大同樣，NaN也不能用於算術計算。注意,NaN與自身不相等。

示例：

console.log(NaN == NaN) // false
console.log(isNaN("66")); // false

1. String類型，是惟一沒有固定大小的原始類型，字符串字面量是用雙引號或者單引號聲明。

類型判斷

1. typeof操做符，用於獲取一個變量或者表達式的類型。

返回值：

undefined，變量是Undefined類型
boolean，變量是Boolean類型的
number，變量是Number類型的
string，變量是String類型的
object，變量是一種引用類型或者Null類型

示例：

console.log(typeof 12); // number

typeof運算符對 null的值返回 Object。

1. instanceof操做符，用於判斷一個引用類型屬於哪一種類型。

示例：

<script>
 var a = new Array();
 if(a instanceof Array) {
     console.log('a是一個數組類型');
 }else{
     console.log('a不是一個數組類型');
 }
</script>

類型轉換

1. Number變量，將變量轉化爲數字類型。
2. String變量，將變量轉化爲字符串類型。
3. Boolean變量，將變量轉化爲布爾值類型。
4. parseFloat變量，將變量轉化爲浮點類型。
5. parseInt變量，將變量轉化爲整數類型。

運算符

1. 運算符：賦值運算符，算數運算符，比較運算符，邏輯運算符，一元運算符，二元運算符，三元運算符。

名稱	操做符	含義
賦值	x = y	x = y
加法賦值	x += y	x = x + y
減法賦值	x -= y	x = x - y
乘法賦值	x *= y	x = x * y
除法賦值	x /= y	x = x / y
求餘賦值	x %= y	x = x % y
求冪賦值	x **= y	x = x ** y
左移位賦值	x <<= y	x = x << y
右移位賦值	x >>= y	x = x >> y
無符號右移位賦值	x >>>= y	x = x >>> y
按位與賦值	x &= y	x = x & y
按位異或賦值	x ^= y	x = x ^ y

示例：

賦值運算符的符號爲=

算數運算符：+，-，*，/，%

比較運算符：>，>=，<，<=，!=，==，===，！==

邏輯運算符： 

&&，邏輯與，表示表達式先後全爲true才能返回true

||，邏輯或，表示表達式先後只要有一個true就返回true

!，邏輯取反，表示表達式後若爲true，則返回false，不然反之。

1. ++自增加，每執行一次自身加1,--自減，每執行一次自身減1.
2. i++，值先參與外部表達式的運算，而後再將自身的值加1。
3. ++i，i先自身的值加1，再參與外部表達式的運算。
4. +=，a+=3等於a=a+3。同理相似。
5. 三元運算符的表達式格式爲：條件？正：假
6. 運算符優先級：算數運算符>比較運算符>邏輯運算符>賦值運算符。

• 算數運算符
• 比較運算符
• 邏輯運算符
• 賦值運算符

分支循環

1. if-else條件判斷語句
2. switch-case選擇語句
3. for循環語句
4. for-in遍歷語句
5. while循環語句
6. do-while循環語句

示例：

if(條件 1) {
    當條件1爲true時執行的代碼
}else if(條件 2){
    當條件2爲true時執行的代碼
}else{
    當條件1和條件2都不爲true時執行的代碼
}

示例：

switch(n){
    case1:
    執行代碼塊1
    break;
    case2:
    執行代碼塊2
    break;
    default:
    ...
}

示例：

for(語句1;語句2;語句3){
    被執行的代碼塊
}

1. continue表示爲越過本次循環，繼續下一次循環
2. break表示跳出整個循環，循環結束

遍歷

1. for in語句循環遍歷對象的屬性，多用於對象，數組等複合類型，以遍歷其中的屬性和方法。

示例：

for(鍵 in 對象) {
    代碼塊
}

1. while，只有表達式爲真，就能夠進入循環。

示例：

while(表達式){
    代碼塊
}

1. do-while

示例：

do {
    代碼
}while(表達式)

數組

數組的屬性和方法：

方法	說明
concat()	鏈接兩個或者更多的數組，並返回結果
join()	把數組的全部元素放入一個字符串，元素經過指定的分隔符進行分隔
pop()	刪除並返回數組的最後一個元素
push()	向數組的末尾添加一個或者多個元素，並返回新的長度
reverse()	顛倒數組中元素的順序
shift()	刪除並返回數組的第一個元素
slice()	從某個已有的數組返回選定的元素
sort()	對數組的元素進行排序
splice()	刪除元素，並向數組添加新元素
toSource()	返回該對象的源代碼
toString()	將數組轉換爲字符串，並返回結果
toLocalString()	將數組轉換爲本地數組，並返回結果
unshift()	向數組的開頭添加一個或者更多元素，並返回新的長度
valueOf()	返回數組對象的原始值
indexOf()	在數組中搜索指定元素並返回第一個匹配的索引
lastIndexOf()	在數組中搜索指定元素並返回最後一個匹配的索引

concat()

鏈接兩個或更多的數組，並返回一個新數組。

語法:

arr.concat(a1, a2, ..., an)

參數:

1. arr：目標數組
2. a1,a2,...,an：須要合併的元素

join()

使用指定分隔符，鏈接兩個或多個數組的元素，返回一個字符串。

數組定義

1. 使用new關鍵字建立一個array對象，能夠在內存中建立一個數組空間，添加元素。
2. 使用new關鍵字建立一個array對象的同時爲數組賦予n個初始值。
3. 不用new，直接用[]聲明一個數組，能夠直接賦予初始值。

數組操做

1. 添加元素
2. 刪除元素，pop方法，shift方法，splice方法。
3. 遍歷數組
4. 插入元素，unshift方法，splice方法插入。
5. 合併數組
6. 數組轉字符串
7. 數組元素倒序

• pop方法，從尾部刪除，刪除後元素從數組上剝離並返回。
• shift方法，從頭部刪除元素，並返回。
• splice方法，從指定位置刪除指定的元素。
• unshift方法，從頭部插入。
• splice方法，從指定位置插入指定個數的元素。
• concat方法將多個數組鏈接成一個數組。
• join方法將數組中的元素合併成一個用指定分隔符合並起來的字符串。
• reverse方法能夠將數組中的元素倒序排列，並且直接改變原來的數組，不會建立新的數組。
• sort方法能夠將數組中的元素按照必定的規則自動排序（默認的是按照字符的ASCII碼順序排序）。

pop()和push()

1. pop(): 刪除並返回數組最後一個元素，改變原數組。
2. push(item): 向數組末尾添加一個或多個元素，改變原數組，返回新的數組長度。

shift()和unshift()

1. shift(): 刪除並返回數組第一個元素，改變原數組。
2. unshift(item): 向數組頭部添加一個或多個元素，改變原數組，返回新的數組長度。

示例：

let arr = [1, 2, 3, 5, 6];
let a1 = arr.slice(2);    // [3, 5, 6]
let a2 = arr.slice(2,3);  // [3]

let arr = [1, 2, 3, 4];
let a = arr.splice(1, 2, "web", "a");
// a =>  [2, 3]
// arr =>  [1, "web", "a", 4]

forEach()

代碼：

let a = [1,3,5,7];
a.forEach(function(val, index, arr){
    arr[index] = val * 2
})
a ; // [2, 6, 10, 14]

代碼：

arr.every(callback)

測試數組的全部元素是否都經過了指定函數的測試。

some()

測試數組中的某些元素是否經過由提供的函數實現的測試。

filter()

示例：

let a = [1, "", "aa", 2, 6];
let res = a.filter(function(val, index, arr){
    return typeof val == "number";
})
res;//[1, 2, 6]

map()

對每一個元素執行此方法，並返回一個執行後的數組。

示例：

let a = [1, 3, 5];
let b = a.map(function(val, index, arr){
    return val + 1;
})
b; //[2, 4, 6]

拓展運算符

拓展運算符使用(...)

示例：

console.log(...[1, 2, 3]);   // 1 2 3 
console.log(1, ...[2,3], 4); // 1 2 3 4

// 一般狀況 淺拷貝
let a1 = [1, 2];
let a2 = a1; 
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]

// 拓展運算符 深拷貝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 做用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]

let [a, ...b] = [1, 2, 3, 4]; 
// a => 1  b => [2,3,4]

let [a, ...b] = [];
// a => undefined b => []

let [a, ...b] = ["abc"];
// a => "abc"  b => []

fill()

1. 用於用指定值填充一個數組
2. 用來初始化空數組，並抹去數組中已有的元素
3. fill()的第二個和第三個參數指定填充的起始位置和結束位置

new Array(3).fill('a');   // ['a','a','a']
[1,2,3].fill('a');        // ['a','a','a']
[1,2,3].fill('a',1,2);//  [1, "a", 3]

entries(),keys(),values()

1. entries()對鍵值對遍歷
2. keys()對鍵名遍歷
3. values()對鍵值遍歷。

includes()

1. includes()用於表示數組是否包含給定的值
2. 第二個參數爲起始位置，默認爲0，若是負數，則表示倒數的位置，若是大於數組長度，則重置爲0開始。

代碼：

[1,2,3].includes(3,3);    // false
[1,2,3].includes(3,4);    // false
[1,2,3].includes(3,-1);   // true
[1,2,3].includes(3,-4);   // true

flat(),flatMap()

示例：

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

語法

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

Array.prototype.reduce()

reduce() 方法對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值。

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// 和爲 6

var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);

語法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

initialValue可選

做爲第一次調用 callback函數時的第一個參數的值。 若是沒有提供初始值，則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。

字符串對象屬性

字符串對象屬性

屬性	說明
constructor	對建立該對象的函數的引用
length	字符串的長度
prototype	容許向對象添加屬性和方法

字符串對象方法

字符串對象方法

屬性	說明
anchor()	建立HTML錨
big()	用大號字體顯示字符串
blink()	顯示閃動字符串
bold()	使用粗體顯示字符串
charAt()	返回在指定位置的字符
charCodeAt()	返回在指定位置的字符的Unicode編碼
concat()	鏈接字符串
fixed()	以打字機文本顯示字符串
fontcolor()	使用指定的顏色顯示字符串
fontsize()	使用指定的尺寸顯示字符串
fromCharCode()	從字符編碼建立一個字符串
indexOf()	檢查字符串
italics()	使用斜體顯示字符串
lastIndexOf()	從後向前搜索字符串
link()	將字符串顯示爲連接
localeCompare()	用本地特定的順序比較兩個字符串
match()	找到一個或者多個正則表達式的匹配
replace()	替換與正則表達式匹配的子串
search()	檢索與正則表達式匹配的值
slice()	提取字符串的片斷，並在新的字符串中返回被提取的部分
small()	使用小字號顯示字符串
split()	將字符串分割爲字符串數組
strike()	使用刪除線顯示字符串
sub()	將字符串顯示爲下標
substr()	從起始索引號提取字符串中指定數目的字符
substring()	提取字符串中兩個指定的索引號之間的字符
sup()	將字符串顯示爲上標
toLocaleLowerCase()	將字符串轉換爲小寫
toLocaleUpperCase()	將字符串轉換爲大寫
toLowerCase()	將字符串轉換爲小寫
toUpperCase()	將字符串轉換爲大寫
toString()	返回字符串
valueOf()	返回某個字符串對象的原始值
toSource()	表明對象的源代碼

字符串搜索

indexOf()，lastIndexOf()，search()和match()。

1. indexOf()，indexOf(搜索詞，起始索引位置)，第2個參數不寫則默認從0開始搜索。indexOf()用於檢索指定的字符串值在字符串中首次出現的位置。
2. lastIndexOf()，lastIndexOf(搜索詞，起始索引位置)，從後向前檢索，返回的是一個指定的子字符串值最後出現的位置。
3. search()，語法爲字符串，search(搜索詞)或者字符串search(正則表達式)。
4. match()，語法爲字符串。match()可在字符串內檢索指定的值，或者找到一個或者多個正則表達式的匹配。沒有匹配到結果，就返回null。有匹配到，會返回一個數組，數組的第0個元素存放的是匹配文本。

字符串截取

3種字符串截取方法：substring(),slice(),substr()

1. substring()，語法爲字符串，substring(截取開始位置，截取結束位置)，substring()是經常使用的字符串截取方法，接收兩個參數，不能爲負值，將返回一個新的字符串。
2. slice()，語法爲字符串,slice(截取開始位置，截取結束位置)，slice()中的參數能夠爲負值，若是參數是負值，則該參數從字符串的尾部開始算起的位置。-1是指字符串的最後一個字符。
3. substr()，substr(截取開始位置，length)，在字符串中抽取從截取開始位置下標開始的指定數目的字符。返回一個字符串若是截取的開始位置爲負數，則表示從字符串尾部開始算起。

字符串替換

replace()，replace(正則表達式/要被替換的字符串，要替換成爲的子字符串)。

字符串切割

split()用於將一個字符串分割成字符串數組，語法爲字符串。split(用於分割的子字符串，返回數組的最大長度)，返回數組的最大長度通常狀況下不設置。

JS事件三個階段

事件流：

1. 事件冒泡流
2. 事件捕獲流

事件的處理過程主要有三個階段：捕獲階段，目標階段，冒泡階段
事件流包含三個階段：事件捕獲階段，處於目標階段和事件冒泡階段。

• 捕獲，事件由頁面元素接收，逐級向下，到具體的元素
• 目標，具體的元素自己
• 冒泡，元素自己，逐級向上，到頁面元素

1. 事件捕獲，當使用事件捕獲時，父級元素先觸發，子元素後觸發。
2. 事件冒泡，當使用事件冒泡時，子級元素先觸發，父元素後觸發。

事件冒泡和事件捕獲

1. 事件發生會產生事件流
2. DOM事件流：DOM結構是一個樹形結構，當一個HTML元素產生一個事件時，該事件會在元素節點與根節點之間按特定的順序傳播，路徑所通過的節點都會收到該事件。
3. 事件流順序有兩種類型：事件冒泡和事件捕獲。

事件觸發方式

代碼：

addEventListener("click","doSomething","true")

第三個參數爲true，表示採用事件捕獲，若false，表示採用事件冒泡。

<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
    width:100%;
    height:100%;
}
</style>
<script>
 window.onload=function(){
     d1 = document.getElementById("d1");
     d2 = document.getElementById("d2");
     d3 = document.getElementById("d3");
     // true 表示在捕獲階段響應
     // false 表示在冒泡階段響應

     d1.addEventListener("click",function(event){
         console.log("d1")
     },"true");

     d2.addEventListener("click",function(event){
         console.log("d2")
     },"true")

     d3.addEventListener("click",function(event){
         console.log("d3")
     },"true")
 }
</script>
</head>
<body>
<div id="d1" style="background: #0000ff; width: 500px; height: 500px">
<div id="d2" style="background: #00ff00; width: 400px; height: 400px">
<div id="d3" style="background: #ff0000; width: 200px; height: 200px">
</div>
</div>
</div>
</body>
</html>

addEventListener網頁，點擊跳轉：addEventListener.html

事件委託

一個響應事件委託到另外一個元素。

<ul id="btn">
    <li id="btn1">按鈕1</li>
    <li id="btn2">按鈕2</li>
    <li id="btn3">按鈕3</li>
</ul>

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');

webbtn.myAddFun(btn1, 'click', function(event){
    alert('1點擊');
});

webbtn.myAddFun(btn2, 'click', function(event){
    alert('2點擊');
});

webbtn.myAddFun(btn3, 'click', function(event){
    alert('3點擊');
});

添加一個事件處理函數，來作事件委託

var btn = document.getElementById('btn');
webbtn.myAddFun(btn, 'click', function(event){
    event = webbtn.getMyEvent(event);
    var target = webbtn.getMyTarget(event);
    switch(target.id){
        case "btn1":
            alert('1點擊');
            break;
        case "btn2":
            alert('2點擊');
            break;
        case "btn3":
            alert('3點擊');
            break;
    }
});

鍵盤事件

鍵盤事件就是有關鍵盤操做所觸發的世界。

鍵盤事件：

方法	說明
keydown	當用戶按下鍵盤上的任意鍵時觸發。按住不放，會重複觸發
keypress	當用戶按下鍵盤上的字符鍵時觸發。按住不放，會重複觸發
keyup	當用戶釋放鍵盤上的鍵時觸發

鼠標拖拽效果

鼠標綁定onmousedown()，onmousemove()，onmouseup()事件。

mouse網頁，點擊跳轉：mouse.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouse</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #dd {
            width: 120px;
            height: 120px;
            background: #00ff00;
            position: absolute;
        }
    </style>
    <script>
        var dd;
        var mflag = false;
        function ondown() {
            dd = document.getElementById('dd');
            mflag = true;
        }
        function onmove(e){
            if(mflag) {
                dd.style.left = e.clientX - 60 + "px";
                dd.style.top = e.clientY - 60 + "px";
            }
        }
        function onup() {
            mflag = false;
        }
    </script>

</head>
    <body onmousemove="onmove(event)">
        <div id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;"
    </body>
</html>

鼠標事件

鼠標事件：

方法	說明
click	用戶單擊鼠標左鍵或者按下Enter鍵觸發
dbclick	用戶雙擊鼠標觸發
mousedown	在用戶按下任意鼠標按鈕時觸發
mouseenter	在鼠標光標從元素外部首次移動到元素範圍內時觸發，不冒泡
mouseleave	元素上方的光標移動到元素範圍以外時觸發，不冒泡
mousemove	光標在元素的內部不斷移動時觸發
mouseover	用戶指針位於一個元素外部，而後用戶將首次移動到另外一個元素邊界以內時觸發
mouseout	用戶將光標從一個元素上方移動到另外一個元素時觸發
mouseup	在用戶釋放鼠標時觸發
mousewheel	滾輪滾動時觸發

示例：

function web(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    console.log("x:"+mouseX + "," + "y:"+mouseY)
}

<body onclick="web(event)">

1. 鼠標懸停是onmouseover
2. 鼠標離開是onmouseout

窗口事件

窗口事件：

1. load
2. unload
3. abort
4. error
5. select
6. resize
7. scroll

load事件，表示當頁面徹底加載完以後，就會觸發 window上面的 load事件。包含全部的圖像，js文件，css文件等外部資源。

示例：

window.onload=function(){}

當頁面徹底加載完以後執行其中的函數。

示例：

<script>
 window.onload = function() {
     var mydiv = document.getElementById("mydiv");
     console.log(mydiv.innerText);
 }
</script>

<body>
 <div id="mydiv"></div>
</body>

示例：

function imgLoad() {
    myimg = document.getElementById("myimg");
    // 圖片加載完成後，給圖片加載框
    myimg.style.border = "9px solid $00ff00";
}

<img id="myimg src="" onload="imgLoad()">

resize事件

1. 當調整瀏覽器的窗口到一個新的寬度或者高度時，會觸發resize事件。

示例：

document.body.clientWidth和document.body.clientHeight得到窗口的寬和高。

html,body {
    width: 100%;
    height: 100%;
}

<script>
 function winChange() {
     winWidth = document.body.clientWidth;
     winHeight = document.body.clientHeight;
 }
</script>

<body onresize="winChange()">
</body>

scrol事件，文檔或者瀏覽器窗口被滾動時觸發 scroll事件

示例：

<script>
 function scrollChange() {
     srpos = document.getElementById("srpos");
     srpos.innerText = document.documentElement.scrollTop;
     srpos.style.top = docuemnt.documentElement.scrollTop+"px";
 }
</script>

<body onscroll="scrollChange()">
 <div style="height:300%;">
 <br/>
 <font id="srpos" style="position: relative;top: 0px">滾動條滾動到0px</font>
 </div>
</body>

焦點事件

方法	說明
blur	在元素失去焦點時觸發，全部瀏覽器都支持
focus	在元素得到焦點時觸發，全部瀏覽器都支持

示例：

<script>
var note;
function myfocus(fname,notename) {
    note = document.getElementById(notename);
    note.innerText = fname+'得到焦點';
}

function myblur(fname,notename) {
    note = document.getElementById(notename);
    note.innerText = fname + '失去焦點';
}
</script>

<body>

<form name="myform">

<input type="text" name="uname" onfocus="myfocus('uname','unote')" onblur="myblur('uname','unote')"/><font id="unote"></font>

<br/>

<input type="text" name="pwd" onfocus="myfocus('pwd','pnot')" onblur="myblur('pwd','pnote')"/><font id="pnote"></font>

</form>

</body>

事件介紹

事件方法

方法	說明
onabort	圖像加載被中斷
onblur	元素失去焦點
onchange	用戶改變域的內容
onclick	鼠標單擊某個對象
ondblclick	鼠標雙擊某個對象
onerror	當加載文檔或圖像時發生某個錯誤
onfocus	元素得到焦點
onkeydown	某個鍵盤的鍵被按下
onkeypress	某個鍵盤的鍵被按下或者按住
onkeyup	某個鍵盤的鍵被鬆開
onload	某個頁面或者圖像被完成加載
onmousedown	某個鼠標按鍵被按下
onmousemove	鼠標被移動
onmouseout	鼠標從某元素移開
onmouseover	鼠標被移到某元素之上
onmouseup	某個鼠標按鍵被鬆開
onreset	重置按鈕被單擊
onresize	窗口或者框架被調整尺寸
onselect	文本被選定
onsubmit	提交按鈕被單擊
onunload	用戶退出頁面

窗口事件

1. load事件
2. resize事件
3. scroll事件
4. 焦點事件

鼠標事件

1. 獲取鼠標單擊位置
2. 鼠標懸停和離開
3. 鼠標拖拽

鍵盤事件與事件冒泡，獲取

JavaScript內置對象

1. window對象
2. document對象
3. location對象
4. navigator對象
5. screen對象
6. history對象

JavaScript的 DOM操做，包含獲取節點，獲取，設置元素的屬性值，建立，添加節點，刪除節點，屬性操做。

DOM對象

1. 當網頁被加載時，瀏覽器會建立頁面的文檔對象模型，Document Object Model，文檔對象模型屬於BOM的一部分，用於對BOM中的核心對象document進行操做。
2. html dom模型被構造爲對象的樹。

DOM操做

獲取節點的方法：

1. 標籤id獲取：

document.getElementById(idName)

1. 標籤name屬性獲取：返回元素數組

document.getElementsByName(name)

1. 類別名稱獲取：返回元素數組

document.getElementsByClassName(className)

1. 標籤名稱獲取：返回元素數組

document.getElementsByTagName(tagName)

獲取，設置元素的屬性值

1. getAttribute(attributeName)方法，//括號出入輸入名，返回對應屬性的屬性值
2. setAttribute(attributeName,attributeValue)方法，//傳入屬性名以及設置的值

示例：

<script>
window.onload=function(){
    mytable = document.getElementById('mytable');
    // 獲取mytable中標籤名爲tr的字節點
    trs = mytable.getElementsByTagName("tr");
    len = trs.length;
    flag = true;
    for(i=0;i<len;i++){
        if(flag){
            trs[i].setAttribute('bgcolor','#cccccc');
            flag = false;
        }else{
            flag = true;
        }
    }
    ww = mytable.getAttribute('width');
}
</script>

<body>
<table id="mytable' align='center' width="80%" border="1">
<tr bgcolor = "#cccccc">
 <td>aaa</td>
 <td>bbb</td>
 <td>ccc</td>
</tr>
</table>
</body>

建立，添加節點

1. 建立節點：

代碼：

// 建立節點：

document.createElement("h1");
document.createTextNode(String);
document.createAttribute("class");

1. 添加節點：

代碼：

element.appendChild(Node);

element.insertBefore(newNode, existingNode);

1. 刪除節點

代碼：

element.removeChild(Node)

屬性操做：獲取當前元素的父節點，獲取當前元素的子節點，獲取當前元素的同級元素，獲取當前元素的文本，獲取當前節點的節點類型，設置樣式。

• 獲取當前元素的父節點

代碼：

element.parentNode

• 獲取當前元素的子節點

代碼：

element.chlidren

• 獲取當前元素的同級元素

代碼：

element.nextElementSibling

element.previousElementSibling

• 獲取當前元素的文本

代碼：

element.innerHTML

element.innerText

• 獲取當前節點的節點類型

代碼：

node.nodeType

BOM對象

1. BOM對象，稱爲內置對象，是瀏覽器對象模型，也是JavaScript的重要組成部分。
2. window-》document,location,navigator,screen,history
3. window對象表示瀏覽器窗口
4. window.innerHeight獲取瀏覽器窗口的內部高度,window.innerWidth獲取瀏覽器窗口的內部寬度。
5. document.documentElement.clientHeight，document.documentElement.clientWidth；document.body.clientHeight，document.body.clientWidth。
6. 打開新窗口，window.open(url)。
7. 關閉當前窗口，window.close()。
8. 調整當前窗口的尺寸，window.resizeTo(寬，高)

document對象

document屬性和方法：

屬性和方法	說明
document.bgColor	設置頁面背景顏色
document.fgColor	設置前景色
document.linkColor	未點擊過的連接顏色
document.alinkCOlor	激活連接的顏色
document.vlinkColor	已點擊過的連接顏色
document.URL	設置url屬性，從而在同一窗口打開另外一網頁
document.cookie	設置或讀出cookie
document.write()	動態地向頁面寫入內容
document.createElement(Tag)	建立一個HTML標籤對象
document.getElementById(ID)	得到指定id值的對象
document.getElementsByName(Name)	得到指定name值的對象
document.body	指定文檔主體的開始和結束
document.location.href	完整url
document.location.reload()	刷新當前網頁
document.location.reload(url)	打開新的網頁

location對象

location屬性和方法：

屬性和方法	說明
location.href	顯示當前網頁的url連接
location.port	顯示當前網頁連接的端口
location.reload()	從新刷新當前頁面

navigator 對象

navigator對象包含有關瀏覽器的信息

| 屬性 | 說明 |
| :--- | :--- |
| appName | 返回瀏覽器的名稱 |
| appVersion | 返回瀏覽器的平臺和版本信息 |
| cookieEnabled | 返回指明瀏覽器的是否啓用cookie的布爾值 |
| platform | 返回運行瀏覽器的操做系統平臺 |

screen對象

1. 每一個window對象的screen屬性都引用一個scrren對象。
2. screen對象中存放有關顯示瀏覽器屏幕的信息。

screen對象的屬性：

屬性	說明
availHeight	返回顯示屏幕的高度
availWidth	返回顯示屏幕的寬度
bufferDepth	設置或者返回調色板的比特深度
Height	返回顯示器屏幕的高度
Width	返回顯示器屏幕的寬度

history對象

1. history對象包含用戶訪問過url。

history對象的屬性：

屬性	說明
history.length	返回瀏覽器歷史列表中的url數量
history.back()	加載history列表中的前一個url
history.forward()	加載history列表中的下一個url
history.go()	加載history列表中的某個具體頁面

內置函數

1. 字符串函數
2. 數組函數
3. 數學函數
4. 日期函數

數學函數

屬性	說明
ceil	大於或等於該數的最小整數，向上取整
floor	小於或等於該數的最大整數，向下取整
min(參數1，參數2)	返回最小值
max(參數1，參數2)	返回最大值
pow(參數1,參數2)	返回數值1的數值2次方
random()	返回隨機數
round(數值)	四捨五入
sqrt(數值)	開平方根

日期函數

• set：用於設置Date對象的日期和時間的值。
• get：用去獲取Date對象的日期和時間的值。
• to：用於返回Date對象的字符串格式的值。
• parse和UTC：用於解析Date字符串。

屬性	說明
getFullYear()	獲取完整的年份
getMonth()	獲取當前月份
getDate()	獲取當前日
getDay()	獲取當前星期幾
getTime()	獲取當前時間（從1970.1.1開始)
getHours()	獲取當前小時數
getMinutes()	獲取當前分數
getSeconds()	獲取當前秒數
toLocalDateString()	獲取當前日期
toLocalTimeString()	獲取當前時間
toLocalString()	獲取日期與時間

1. 秒/分： 0 - 59；
2. 時： 0 - 23；
3. 星期： 0(週日) - 6(週六)
4. 日期： 1 - 31
5. 月份： 0(一月) - 11(十二月)
6. 年份： 從1900開始的年數

定時器函數

1. setInterval()，按照指定的週期調用函數或者計算表達式。
2. setTimeout()，在指定的毫秒數後調用函數或者計算表達式。
3. 區別：setTimeout()只運行一次，setInterval()是循環執行的。

函數

1. 函數由函數名，參數，函數體，返回值4部分組成的。

代碼：

function 函數名(參數){
    函數體
    return 返回值
}

1. 函數聲明3種：經過函數名聲明，在程序調用時才能執行；經過將匿名函數賦值給變量，調用時能夠執行；經過new的方式來聲明，不須要調用，直接執行。

代碼：

function web1 () {
    document.write("1");
}
web1();

var web2 = function(){
    document.write("2")
}
web2();

// 無須調用，直接執行，此方法不經常使用
var web3 = new function(
    document.write("3")
);

1. 函數返回值，函數執行完能夠有返回值，也能夠沒有。
2. 函數的調用：傳值調用，傳址調用，傳函數調用。

閉包函數

• 內部函數只能在外部函數中訪問
• 內部函數造成閉包
• 能夠訪問外部函數的參數和變量
• 外部函數卻不能使用這個內部函數的參數和變量
• 閉包能夠給內部函數的變量提供必定的安全保障

在js中一個函數在另外一個函數中定義，就能夠訪問到父函數的成員，內部的函數就稱爲閉合函數。

閉合是詞法閉包的簡稱，是引用了自由變量的函數。

閉包函數的特色：

1. 閉包做爲與函數成對的數據，在函數執行過程當中屬於激活狀態。
2. 閉包運行結束後，保持運行過程當中的最終數據狀態
3. 閉包（英語：Closure），又稱詞法閉包（Lexical Closure）或函數閉包（function closures）
4. 閉包在實現上是一個結構體，它存儲了一個函數（一般是其入口地址）和一個關聯的環境（至關於一個符號查找表）。
5. 詞法做用域

代碼：

function init() {
    var name = "web"; // name 是一個被 init 建立的局部變量
    function displayName() { // displayName() 是內部函數，一個閉包
        alert(name); // 使用了父函數中聲明的變量
    }
    displayName();
}
init();

init() 建立了一個局部變量 name 和一個名爲 displayName() 的函數。

displayName() 是定義在 init() 裏的內部函數，而且僅在 init() 函數體內可用。

displayName() 沒有本身的局部變量。然而，由於它能夠訪問到外部函數的變量，因此 displayName() 可使用父函數 init() 中聲明的變量 name 。

displayName() 函數內的 alert() 語句成功顯示出了變量 name 的值（該變量在其父函數中聲明）。

這個詞法做用域的例子描述了分析器如何在函數嵌套的狀況下解析變量名。

詞法指，詞法做用域根據源代碼中聲明變量的位置來肯定該變量在何處可用。嵌套函數可訪問聲明於它們外部做用域的變量。

閉包是一個擁有許多變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。

JavaScript中全部的 function都是一個閉包。不過通常來講，嵌套的 function所產生的閉包更爲強大，也是大部分時候咱們所謂的「閉包」。

閉包的做用

在a執行完並返回後，閉包使得Javascript的垃圾回收機制GC不會收回a所佔用的資源，由於a的內部函數b的執行須要依賴a中的變量。

1. 函數的執行環境(excution context)
2. 活動對象(call object)
3. 做用域(scope)
4. 做用域鏈(scope chain)

定時器和閉包

代碼以下：

for(var i = 0 ; i<10; i++){
    setTimeout(function(){
        console.log(i);
    },100);
}

返回的是10個10。

解決：

1. 使用ES6新增的let。
2. 使用閉包

for(var i = 0; i<10 ; i++){
    (function(i){
        setTimeout(function(){
            console.log(i);
        }, i*100);
    })(i);
}

ES6以前，使用var聲明變量會變量提高問題：

for(var i = 0 ; i<10; i++)
{
    console.log(i)
};

console.log(i);  

// 變量提高 返回10

對象

1. 聲明一個對象有兩種方法：經過new Object()和{}實現。

示例：

// 1
var Person = function(id,name){
    this.id = di;
    this.name = name;
}
var user1 = new Person(1,"web");

// 2
var web1 = {id:1,name:"web"};
var web2 = Object.create({id:2,name:"web"});

正則表達式太難了

建立正則表達式

使用一個正則表達式字面量：

let reg = /ab+c/;
let reg = /^[a-zA-z]/gi;

1. 記不住，記不住，記不住。
2. 正則表達式是由普通字符以及特殊字符組成的文字模式。
3. 正則表達式中包含匹配符，定位符，限定符，轉義符等。
4. 正則表達式中有兩種方法：字符串方法，正則對象方法。

字符串方法

屬性	說明
search()	檢索與正則表達式相匹配的值
match()	找到一個或者多個正則表達式的匹配
replace()	替換與正則表達式的字符串
split()	把字符串分割爲字符串數組

正則對象方法

RegExp對象方法

屬性	說明
test()	用於檢測一個字符串是否匹配某個模式
exec()	該方法用於檢索字符串中的正則表達式的匹配,該函數返回一個數組

[a-z]
匹配小寫字母從a到z中的任意一個字符

[A-Z]
匹配大寫字母從a到z中的任意一個字符

[0-9]
匹配數字0到9中任意一個字符，等於 \d

[0-9a-z]
匹配數字0到9或者小寫字母a到z中任意一個字符。

[0-9a-zA-Z]
匹配數字0到9或小寫a到z或大寫A到Z中任意一個字符

[abcd]
匹配字符abcd中的任意一個字符

[^a-z]
匹配除小寫字母a到z外的任意一個字符

[^0-9]
匹配除數字0到9外的任意一個字符

[^abcd]
匹配除abcd外的任意一個字符

元字符是擁有特殊含義的字符：

.
查找單個字符，除了換行和行結束符。

\w
查找單詞字符。

\W
查找非單詞字符。

\d
查找數字。

\D
查找非數字字符。

\s
查找空白字符。
\S
查找非空白字符。

\0
查找 NUL 字符。
\n
查找換行符。
\f
查找換頁符。
\r
查找回車符。
\t
查找製表符。
\v
查找垂直製表符。

\xxx
查找以八進制數 xxx 規定的字符。
\xdd
查找以十六進制數 dd 規定的字符。
\uxxxx
查找以十六進制數 xxxx 規定的 Unicode 字符。

量詞

量詞描述

量詞	描述
n+	至少一個 n 的字符串。
n*	零個或多個 n 的字符串。
n?	零個或一個 n 的字符串。
n{X}	X 個 n 的序列的字符串。
n{X,Y}	X 至 Y 個 n 的序列的字符串。
n{X,}	至少 X 個 n 的序列的字符串。
n$	匹配任何結尾爲 n 的字符串。
^n	匹配任何開頭爲 n 的字符串。
?=n	匹配任何其後緊接指定字符串 n 的字符串。
?!n	匹配任何其後沒有緊接指定字符串 n 的字符串。

.定位符

定位符能夠將一個正則表達式固定在一行的開始或者結束，也能夠建立只在單詞內或者只在單詞的開始或者結尾處出現的正則表達式。

^

匹配輸入字符串的開始位置

$

匹配輸入字符串的結束位置

\b

匹配一個單詞邊界

\B

匹配非單詞邊界

/^[\d]{4}-[\d]{1,2}-[\d]{1,2}${1,2}$]/
日期字符

轉義符

使用轉義符（反斜槓\)進行轉義

new RegExp(str[, attr])接收2個參數，str是一個字符串，指定正則表達式匹配規則，attr可選，表示匹配模式，值有g(全局匹配),i(區分大小寫的匹配)和m(多行匹配)。

表達式：g,i,m

g 表示全局模式

應用於全部字符串，而非在發現第一個匹配項就中止

i 表示不區分大小寫模式

m 表示多行模式

繼續查找下一行中是否存在模式匹配的項

修飾符	描述
i	執行對大小寫不敏感的匹配。
g	執行全局匹配。
m	執行多行匹配。

arguments對象

函數的實際參數會被保存在一個類數組對象 arguments 對象中，經過索引訪問具體的參數：

var a = arguments[i]

1. 使用arguments.length來獲取實際傳入參數的數量
2. arguments對象來獲取每一個參數

文本框失去焦點事件、得到焦點事件

onBlur:當失去輸入焦點後產生該事件

onFocus:當輸入得到焦點後，產生該文件

Onchange:當文字值改變時，產生該事件

Onselect:當文字加亮後，產生該文件

記憶力最好的三個時間段

1. 睡覺前2個小時
2. 起牀後的一個小時
3. 上午8-10點

❤️感謝你們

1.若是本文對你有幫助，就點個贊支持下吧，你的「贊」是我創做的動力。

2.添加微信【xiaoda0423】，拉你進技術交流羣一塊兒學習。