者：魔王哪吒 來自掘金

前言

小伙伴們，下午好。關于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
復制代碼

13. Boolean類型的兩個值是true和false。
14. Number類型，所有數學運算返回的都是十進制的結果。
15. Number.MAX_VVALUE和Number.MIN_VALUE，它們定義了Number值集合的外邊界。
16. 如果生成的數值結果大于Number.MAX_VALUE時，將被賦予值Number.POSITIVE_INFINITY，表示不再有Number值。生成的數值小于Number.MIN_VALUE，會被賦予值Number.NEGATIVE_INFINITY，表示不再有Number值。
17. 有表示無窮大的值為Infinity。
18. Number.POSITIVE_INFINITY的值為Infinity，Number.NEGATIVE_INFINITY的值為-Infinity。

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

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

示例：

console.log(NaN==NaN) // false
console.log(isNaN("66")); // false
復制代碼

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

類型判斷

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

返回值：

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

示例：

console.log(typeof 12); // number
復制代碼

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

2. 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. 運算符：賦值運算符，算數運算符，比較運算符，邏輯運算符，一元運算符，二元運算符，三元運算符。

示例：

賦值運算符的符號為=算數運算符：+，-，*，/，%

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

&&，邏輯與，表示表達式前后全為true才能返回true

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

!，邏輯取反，表示表達式后若為true，則返回false，否則反之。
復制代碼

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

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

分支循環

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){
    被執行的代碼塊
}
復制代碼

7. continue表示為越過本次循環，繼續下一次循環
8. break表示跳出整個循環，循環結束

遍歷

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

示例：

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

2. while，只有表達式為真，就可以進入循環。

示例：

while(表達式){
    代碼塊
}
復制代碼

3. do-while

示例：

do {
    代碼
}while(表達式)
復制代碼

數組

數組的屬性和方法：

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 將報錯。
復制代碼

字符串對象屬性

字符串對象屬性

字符串對象方法

字符串對象方法

字符串搜索

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;
    }
});
復制代碼

鍵盤事件

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

鍵盤事件：

鼠標拖拽效果

鼠標綁定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>
復制代碼

鼠標事件

鼠標事件：

示例：

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>
復制代碼

焦點事件

示例：

<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>
復制代碼

事件介紹

事件方法

窗口事件

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)
復制代碼

2. 標簽name屬性獲取：返回元素數組

document.getElementsByName(name)
復制代碼

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

document.getElementsByClassName(className)
復制代碼

4. 標簽名稱獲取：返回元素數組

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");
復制代碼

2. 添加節點：

代碼：

element.appendChild(Node);

element.insertBefore(newNode, existingNode);
復制代碼

3. 刪除節點

代碼：

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屬性和方法：

location對象

location屬性和方法：

navigator 對象

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

screen對象

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

screen對象的屬性：

history對象

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

history對象的屬性：

內置函數

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

數學函數

日期函數

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

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 返回值
}
復制代碼

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

代碼：

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

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

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

3. 函數返回值，函數執行完可以有返回值，也可以沒有。
4. 函數的調用：傳值調用，傳址調用，傳函數調用。

閉包函數

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

在js中一個函數在另一個函數中定義，就可以訪問到父函數的成員，內部的函數就稱為閉合函數。

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

閉包函數的特點：

1. 閉包作為與函數成對的數據，在函數執行過程中屬于激活狀態
2. 閉包運行結束后，保持運行過程中的最終數據狀態
3. 閉包，又稱詞法閉包或函數閉包
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中的變量。

6. 函數的執行環境(excution context)
7. 活動對象(call object)
8. 作用域(scope)
9. 作用域鏈(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. 正則表達式中有兩種方法：字符串方法，正則對象方法。

字符串方法

正則對象方法

RegExp對象方法

[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 字符。
復制代碼

量詞

量詞描述

.定位符

定位符可以將一個正則表達式固定在一行的開始或者結束，也可以創建只在單詞內或者只在單詞的開始或者結尾處出現的正則表達式。
復制代碼

^

匹配輸入字符串的開始位置
復制代碼

$

匹配輸入字符串的結束位置
復制代碼

\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 表示多行模式

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

arguments對象

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

var a=arguments[i]
復制代碼

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

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

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

onFocus:當輸入獲得焦點后，產生該文件

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

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

記憶力最好的三個時間段

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

??感謝大家

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

推薦JavaScript學習相關文章

《關于前端174道 JavaScript知識點匯總（一）》

《關于前端174道 JavaScript知識點匯總（二）》

《關于前端174道 JavaScript知識點匯總（三）》

《JavaScript ECMAScript語法概括【思維導圖】》

《都2020年了，你還不會JavaScript 裝飾器？》

《100個原生JavaScript代碼片段知識點詳細匯總【實踐】》

《送你 43 道 JavaScript 面試題》

《70個JavaScript知識點詳細總結（上）【實踐】》

《70個JavaScript知識點詳細總結（下）【實踐】》

《3個很棒的小眾JavaScript庫，你值得擁有》

《Echa哥教你徹底弄懂 JavaScript 執行機制》

《3個很棒的小眾JavaScript庫，你值得擁有》

《幾個非常有意思的javascript知識點總結【實踐】》

《開源了一個 JavaScript 版敏感詞過濾庫》

《推薦7個很棒的JavaScript產品步驟引導庫》

《一個合格的中級前端工程師需要掌握的 28 個 JavaScript 技巧》

作者：魔王哪吒

轉發鏈接：https://juejin.im/post/5e8089dde51d4546d72d2099