當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

JavaScript教程（一）

發布時間：2023/12/3 综合教程 34 生活家

生活随笔收集整理的這篇文章主要介紹了 JavaScript教程（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

計算機語言

機器語言、匯編語言和高級語言

計算機語言指用于人與計算機之間通訊的語言，它是人與計算機之間傳遞信息的媒介；
計算機語言的種類非常多，總的來說可以分成【機器語言】、【匯編語言】和【高級語言】三大類；
實際上計算機最終所執行的都是【機器語言】，它是由“0”和“1”組成的二進制數，二進制是計算機語言的基礎；
編程語言是用來控制計算機的一系列指令，它有固定的格式和詞匯（不同編程語言的格式和詞匯不一樣），必須遵守；
如今通用的編程語言有兩種形式：【匯編語言】和【高級語言】；
【高級語言】主要是相對于低級語言而言的，它并不是特指某一種具體的語言，而是包括了很多編程語言，常用的有：C語言、C++、Java、C#、Python、PHP、Go語言、Objective、Swift等；
【翻譯器】：高級語言所編制的程序不能直接被計算機識別，必須經過轉換才能被執行，為此，我們需要一個翻譯器；翻譯器可以將我們所編寫的源代碼轉換為機器語言，這也被稱為二進制化。記住1和0；

【編程語言】和【標記語言】的區別？

【編程語言】有很強的邏輯和行為能力。在編程語言里，會看到很多if else 、for、while等具有邏輯性和行為能力的指令，這是主動的；
【標記語言】（html）不用于向計算機發出指令，常用于格式化和鏈接。標記語言的存在是用來被讀取的，它是被動的；

計算機基礎

計算機組成

數據存儲

計算機內部使用二進制0和1來表示數據；
所有數據，包括文件、圖片等最終都是以二進制數據（0和1）的形式存放在硬盤中的；
所有程序，包括操作系統，本質都是各種數據，也以二進制數據的形式放在硬盤中。平時我們所說的安裝軟件，其實就是把程序文件復制到硬盤中；
硬盤、內存都是保存的二進制數據；

數據存儲單位

程序運行

初識JavaScript

JavaScript簡介

發明者：布蘭登艾奇
JavaScript是一種運行在客戶端的腳本語言（script是腳本的意思）；
腳本語言：不需要編譯，運行過程中由js解釋器（js引擎）逐行來進行解釋并執行；
現在也可以基于Node.js技術進行服務器端編程；

瀏覽器執行JS簡介

瀏覽器分成兩部分：【渲染引擎】和【JS引擎】；
【渲染引擎】：用來解析HTML與CSS，俗稱【內核】，比如：chrome瀏覽器的blink，老版本的webkit；
【JS引擎】：也稱為【JS解釋器】。用來讀取網頁中的JavaScript代碼，對其處理后運行，比如chrome瀏覽器的V8；
瀏覽器本身并不會執行JS代碼，而是通過內置JavaScript引擎（解釋器）來執行JS代碼。JS引擎執行代碼時逐行解釋每一句源碼（轉換為機器語言），然后由計算機去執行，所以JavaScript語言歸為腳本語言，會逐行解釋執行；

JS組成

ECMAScript

DOM

BOM

JS的輸入和輸出語句

變量

什么是變量？

通俗：變量是用于存放數據的容器。我們通過【變量名】獲取數據，甚至數據可以修改；

變量在內存中的存儲

本質：變量是程序在內存中申請的一塊用來存放數據的空間；

變量的使用

變量在使用時分為兩步：1、聲明變量；2、賦值

變量案例-彈出輸入的用戶名

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>變量案例-彈出用戶名</title>
</head><body><script>// 1、輸入用戶姓名，存儲到一個 myName 的變量中var myName = prompt('請輸入用戶名')// 2、輸出這個用戶名alert(myName)</script>
</body></html>

變量的語法擴展

更新變量：一個變量被重新賦值后，它原有的值就會被覆蓋，變量值將以最后一次賦的值為準；
同時申明多個變量時，只需要寫一個 var ，多個變量名之間使用英文逗號隔開；
聲明變量的特殊情況：
（1）、只聲明不賦值，程序也不知道里面存的是啥，所以結果是 undefined（未定義的）；
（2）、不聲明不賦值直接使用某個變量，會報錯（xxx is not defined）;
（3）、不聲明直接賦值使用：可以正常使用，是一個全局變量；

變量的命名規范

我們盡量不要使用“name”作為變量名；

案例：顯示年齡案例

<body><script>var age = prompt("請輸入你的年齡");var str = '你今年已經' + age + '歲了';alert(str)</script>
</body>

數據類型

為什么需要數據類型？

變量的數據類型

<script>// int num=10;  java// var num; //這里的num 我們是不確定屬于哪種數據類型的 var num = 10; //num屬于數字型// js 的變量數據類型是只有程序在運行過程中，根據等號右邊的值來確定的// js是動態語言 變量的數據類型是可以變化的var x = 10; // x 是數字型x = 'pink'; //x 是字符串
</script>

數據類型的分類

數據類型轉換

注意：代表【空】、【否定的值】會被轉換為【false】，如：‘’ 0 NaN null undefined；其余值都會被轉換為 true；

隱式轉換

【隱式轉換】是我們在進行算數運算的時候，JS自動轉換了數據類型；

//利用算數運算 - * / 來隱式轉換；
<script>console.log('12'-0);//隱式轉換為 數字型12console.log('123'-'120');
</script>

案例：計算年齡案例

<body><!-- 此案例要求在頁面中彈出一個輸入框，我們輸入出生年份后，能計算出我們的年齡 --><!-- 案例分析：1、彈出一個輸入框（prompt），讓用戶輸入出生年份（用戶輸入）；2、把用戶輸入的值用變量保存起來，然后用今年的年份減去變量值，結果就是現在的年齡（程序內部處理）；3、彈出警示框（alert），把計算的結果輸出（輸出結果）；--><script>var year=prompt("請輸入你的出生年份");var age=2022-year;//按道理year取過來的是字符串型，做減法操作這里做了隱式轉換；alert('你的年齡是'+age+'歲');</script>
</body>

案例：簡單加法器案例

<body><!-- 計算兩個數的值，用戶輸入第一個值后，繼續彈出第二個輸入框并輸入第二個值，最后通過彈出框口顯示出兩次輸入值相加的結果 --><script>var num1 = prompt("請輸入第一個值");var num2 = prompt("請輸入第二個值");var result = parseFloat(num1) + parseFloat(num2);alert("你的結果是：" + result);</script>
</body>

補充：解釋型語言和編譯型語言

運算符（算數運算符、遞增和遞減運算符、比較運算符、邏輯運算符、賦值運算符）

運算符（operator）也被稱為操作符，是用于實現賦值、比較和執行算數運算等功能的符號；JavaScript中常用的運算符有：算數運算符、遞增和遞減運算符、比較運算符、邏輯運算符、賦值運算符；

補充：表達式和返回值

表達式：是由數字、運算符、變量等以能求得數值的有意義排列方法所得的組合；簡單理解：是由數字、運算符、變量等組成的式子；【表達式最終都會有一個結果，返回給我們，我們稱之為返回值。】

短路運算（邏輯中斷）

短路運算的原理：當有多個表達式（值）時，左邊的表達式值可以確定結果時，就不再繼續運算右邊的表達式的值；

邏輯與

語法：表達式1 && 表達式2；
如果第一個表達式的值為真，則返回表達式2；
如果第一個表達式的值為假，則返回表達式1；

<body><!-- 1、用我們的布爾值參與的邏輯運算 true && false == false;  --><script>// 3、邏輯與短路運算// 3.1、邏輯與短路運算 如果表達式1結果為真，則返回表達式2；console.log(123 && 456);//456// 3.2、邏輯與短路運算 如果第一個表達式的值為假，則返回表達式1；console.log(0 && 456);//0// 如果有空的或者否定的為假（如：0、''、null、undefined、NaN），其余是真的；// 4、邏輯或短路運算// 4.1、如果表達式1結果為真，則返回的是表達式1；console.log(123 || 456);//123// 4.2、如果表達式1結果為假，則返回的是表達式2；console.log(0 || 456);//456// 案例分析（123為真，直接返回123，后面的 num++ 就不再執行了，所以是結果是0）var num=0;console.log(123 || num++);console.log(num);//0</script>
</body>

賦值運算符

概念：用來把數據賦值給變量的運算符；

<script>var num = 10;//num=num+1; num++//num = num + 2; ==> num += 2;num += 2;console.log(num);//12</script>

運算符優先級

一元運算符里面的邏輯非（!）優先級很高；
邏輯與比邏輯或優先級高；

流程控制（順序結構、分支結構、循環結構）

在一個程序執行的過程中，各條代碼的執行順序對程序的結果是有直接影響的。很多時候，我們要通過控制代碼的執行順序來實現我們要完成的功能；
簡單理解：流程控制就是來控制我們的代碼按照什么結構順序來執行；
流程控制主要有三種結構，分別是：順序結構、分支結構和循環結構，這三種結構代表三種代碼執行的順序；
順序結構：是程序中最簡單、最基本的流程控制，它沒有特定的語法結構，程序會按照代碼的先后順序，依次執行，程序中大多數的代碼都是這樣執行的；
分支結構：由上到下執行代碼的過程中，根據不同的條件，執行不同的路徑代碼（執行代碼多選一的過程），從而得到不同的結果；JS語言提供了兩種分支結構語句：if語句、switch語句；

流程控制-分支（`if`分支語句、`switch`分支語句、三元表達式）

案例：判斷平年、閏年案例

<body><!-- 算法：能被4整除且不能整除100的為閏年（如2004年就是閏年，1901年不是閏年）或者能被400整除的就是閏年；--><script>var year=prompt("請輸入年份：");if(year % 4 ==0 && year % 100 !== 0 || year % 400 ==0){alert("你輸入的年份是閏年");}else{alert("你輸入的年份是平年");}</script>
</body>

案例：數字補零

<body><!-- 案例描述：用戶輸入數字，如果數字小于0，則在前面補零；如果數字大于0，則不需要補。--><script>var time = prompt("請輸入一個0~59之間的一個數字");var result = time < 10 ? "0" + time : timealert(result);</script>
</body>

`switch`語句

當要針對變量設置一系列的特定值的選項時，就可以用switch語句；
switch是轉換、開關的意思；case小例子或者選項的意思；
語法結構：

switch(表達式){case value1:執行語句1；break;case value2:執行語句2；break;...default:執行最后的語句；
}

執行思路：利用我們的【表達式的值】和【case后面的選項值】相匹配，如果匹配上，就執行該case里面的語句；如果都沒有匹配上，那么執行default里面的語句。
代碼驗證：

switch(2){case 1:console.log("這是1")；break;case 2:console.log("這是2")；；break;case 3:console.log("這是3")；；break;default:console.log("沒有匹配結果")；；
}

switch注意事項：
（1）、我們開發時，表達式經常寫成變量；
（2）、我們num的值和case里面的值相匹配的時候是【全等】（必須是值和數據類型一致才可以）；
（3）、break如果當前的case里面沒有break，則不會退出switch，而是繼續執行下一個case；

案例：查詢水果案例

<body><script>var fruit = prompt("請輸入水果：");switch (fruit) {case '蘋果':alert('蘋果');break;case '榴蓮':alert('榴蓮');break;default:alert('沒有此水果');}</script>
</body>

switch語句和if else if語句的區別：
（1）、一般情況下，它們兩個語句可以相互替換；
（2）、switch...case語句通常處理case為比較確定值的情況，而if...else...語句更加靈活，常用于范圍判斷（大于、等于某個范圍）；
（3）、switch語句進行條件判斷后直接執行到程序的條件語句，效率更高。而if...else...語句有幾種條件，就得判斷多少次；
（4）、當分支比較少時，if...else...語句的執行效率比switch語句高；
（5）、當分支比較多時，switch語句的執行效率比較高，而且結構更清晰；

流程控制-循環（`for`循環、`while`循環、`do while`循環）

循環的目的：在實際問題中，有許多具有規律性的重復操作，因此在程序中要完成這類操作就需要重復執行某些語句；
在JS中，主要有三種類型的循環語句：for循環、while循環、do while循環；
在程序中，一組被重復執行的語句被稱為【循環體】，能否繼續重復執行，取決于循環的【終止條件】。由循環體及循環的終止條件組成的語句，被稱為【循環語句】；

//for語法結構
for(初始化變量;條件表達式;操作表達式){//循環體
}
//初始化變量：就是用var聲明的一個普通變量，通常用于作為計數器使用；
//條件表達式：就是用來決定每一次循環是否繼續執行，就是終止的條件；
//操作表達式：就是每次循環最后執行的代碼，經常用于我們計數器變量進行更新（遞增或者遞減）；

for循環可以重復執行不同的代碼，因為我們有計數器變量i的存在，i每次循環值都會變化；

//我們想要輸出1個人1~100歲
for(var i=1;i<=100;i++){console.log('這個人今年'+i+'歲了');
}

for循環重復某些相同操作。for循環因為有了計數器的存在，我們還可以重復的執行某些操作，比如做一些算術運算；

案例：求1~100之間所有整數的累加和

<body><!-- 案例分析：1、需要循環100次，我們需要一個計數器i；2、我們需要一個存儲結果的變量sum，但是初始值一定是0；3、核心算法：1+2+3+4+...sum=sum+i;--><script>var sum=0;//求和的變量for(var i=0;i<=100;i++){sum=sum+i;}console.log(sum);</script>
</body>

案例：for循環案例

 <script>// 1、求1-100之間所有數的平均值；var sum = 0;var average = 0;for (var i = 1; i <= 100; i++) {sum = sum + i;}average = sum / 100;console.log(average);//50.5// 2、求1-100之間所有偶數和奇數的和；var event = 0;var odd = 0;for (var i = 1; i <= 100; i++) {if (i % 2 == 0) {event = event + i;} else {odd = odd + i;}}console.log(event);//2550console.log(odd);//2500// 3、求1-100之間所有能被3整除的數字的和；var result = 0;for (var i = 1; i <= 100; i++) {if (i % 3 == 0) {result = result + i;}}console.log(result);//1683</script>

案例：求學生成績案例

<body><!-- 要求用戶輸入班級人數，之后依次輸入每個學生的成績，最后打印出該班級總的成績以及平均成績 --><script>var num = prompt('請輸入班級總人數:');var sum = 0;var average = 0;for (var i = 1; i <= num; i++) {var score = prompt('請輸入第' + i + '個學生成績');// 因為從prompt取過來的數據是 字符串型的 需要裝換為 數字型；sum = sum + parseFloat(score);}average = sum / num;alert('班級總的成績是' + sum);alert('班級平均分是' + average);</script>
</body>

案例：一行打印5顆星星

<script>var str = '';for (var i = 1; i <= 5; i++) {// console.log('⭐');// 我們采用追加字符串的方式，這樣可以打印到控制臺上；str = str + '⭐';}console.log(str);</script>

var num = prompt('請輸入星星個數');var str = '';for (var i = 0; i < num; i++) {str = str + '⭐';}console.log(str);

雙重`for`循環

循環嵌套是指在一個循環語句中再定義一個循環語句的語法結構，例如在for循環語句中，可以再嵌套一個for循環，這樣的for循環語句我們稱之為雙重for循環；
我們可以把里面的循環看作是外層循環的語句；
外層的循環循環一次，里面的循環執行全部；

案例：打印5行5列星星

 <script>var str = '';for (var i = 1; i <= 5; i++) {for (var j = 1; j <= 5; j++) {str = str + '⭐';}// 如果一行打印完畢5個星星，就要另起一行；（加 \n）str = str + '\n';}console.log(str);</script>

案例：打印n行n列星星

 <script>var row = prompt('請輸入行數');var column = prompt('請輸入列數');var str = '';for (var i = 1; i <=row; i++) {for (var j = 1; j <= column; j++) {str = str + '⭐';}str = str + '\n';}console.log(str);</script>

案例：打印倒三角案例

<script>var str = '';for (var i = 1; i <= 10; i++) {for (var j = i; j <= 10; j++) {str = str + '⭐';}str = str + '\n';}console.log(str);</script>

`while`循環

語法結構：while(條件表達式){循環體}；
執行思路：當條件表達式結果為true，則執行循環體；否則，退出循環；
代碼驗證：

var num=1;
while(num<=100){console.log('你好');num++;
}

里面應該也有計數器，初始化變量；
里面應該也有操作表達式，完成計數器的更新，防止死循環；

`while`循環案例

 <script>// 1、打印人的一生，從1歲到100歲；// var i=1;// while(i<=100){//     console.log('這個人今年'+i+'歲了');//     i++;// }// 2、計算1~100之間所有整數的和；// var i = 1;// var sum = 0;// while (i <= 100) {//     sum = sum + i;//     i++;// }// console.log(sum);// 3、彈出一個提示框，你愛我嗎？如果輸入我愛你，就提示結束，否則，一直詢問；var message = prompt('你愛我嗎？');while (message !== '我愛你') {message = prompt('你愛我嗎？');}  alert('我也愛你呀'); </script>

`dowhile`循環

dowhile語句其實是while語句的一個變體。該循環會先執行一次代碼塊，然后對條件表達式進行判斷，如果條件為真，就會重復執行循環體，否則退出循環；
語法結構：

do{//循環體
}while(條件表達式)

執行思路：跟while不同的地方在于dowhile先執行一次循環體，再判斷條件；如果條件表達式結果為真，則繼續執行循環體，否則退出循環；

<script>// 代碼驗證var i = 1;do {console.log('你好');i++;} while (i <= 100)
</script>

dowhile語句至少會執行一次循環體代碼；

`dowhile`案例

 <script>// 1、代碼驗證// var i = 1;// do {//     console.log('你好');//     i++;// } while (i <= 100)// 2、打印人的一生，從1歲到100歲；// var i = 1;// do {//     console.log('這個人今年'+i+'歲了');//     i++;// } while (i <= 100)// 3、計算1~100之間所有整數的和；// var i = 1;// var sum = 0;// do {//     sum = sum + i;//     i++;// } while (i <= 100)// console.log(sum);// 3、彈出一個提示框，你愛我嗎？如果輸入我愛你，就提示結束，否則，一直詢問；        do {var message = prompt('你愛我嗎？');} while (message !== '我愛你')alert('我也愛你呀');</script>

循環小結

JS中循環有for、while、dowhile；
三個循環很多情況下都可以互相替代使用；
如果是用來計次數，跟數字相關的，三者使用基本相同，但是我們更喜歡用for；
while、dowhile可以做更復雜的判斷條件，比for靈活一些；
while和dowhile執行順序不一樣，while先判斷，后執行；dowhile先執行一次，再判斷執行；
while和dowhile執行次數不一樣， dowhile至少會執行一次循環體，而while可能一次也不執行；
實際工作中，我們更常用for循環，它的寫法更簡潔直觀；

`continue`和`break`關鍵字

`continue`關鍵字

用于【立即跳出本次循環，繼續下一次循環】（本次循環體中continue之后的代碼就會少執行一次）；

`continue`關鍵字案例

 <script>// continue關鍵字（退出本次，即當前次的循環；繼續執行剩余次的循環）// for (var i = 1; i <= 5; i++) {//     if (i === 3) {//         continue; // 只要遇到continue就退出本次循環，直接跳到//     }//     console.log(i);//1 2 4 5// }// 案例：求1~100之間，除了能被7整除之外的整數和；var sum = 0;for (var i = 1; i <= 100; i++) {if (i % 7 == 0) {continue;}// sum = sum + i;sum += i;}console.log(sum);</script>

`break`關鍵字

break關鍵字用于立即跳出整個循環（循環結束）；

 // break關鍵字（退出整個循環）for (var i = 1; i <= 5; i++) {if (i == 3) {break;//退出整個循環}console.log(i);// 1 2}

數組

案例：求數組最大值

<script>// 求數組[2,6,1,77,52,25,7]中的最大值；/*案例分析：（1）、聲明一個保存最大元素的變量max；（2）、默認最大值可以取數組中的第一個元素；（3）、遍歷這個數組，把里面每個數組元素和max相比較；（4）、如果這個數組元素大于max就把這個數組元素存到max里面，否則繼續下一輪比較；（5）、最后輸出這個max；*/var arr = [2, 6, 1, 77, 52, 25, 7];var max = arr[0];for (var i = 1; i <= arr.length; i++) {if (max < arr[i]) {max = arr[i];}}console.log(max);</script>

數組中新增元素

可以通過修改length長度以及索引號增加數組長度；
（1）、可以通過修改length長度來實現數組擴容的目的；
length屬性是可讀寫的；
（2）、通過修改數組索引新增數組元素；
可以通過修改數組索引的方式追加數組元素；

 <script>// 1、新增數組元素-修改length長度；var arr = ['red', 'green', 'blue'];console.log(arr.length);arr.length = 5;//我們把數組長度修改為了5，里面應該有5個元素；console.log(arr);// ['red', 'green', 'blue', empty × 2]console.log(arr[3]);//undefinedconsole.log(arr[4]);//undefined// 2、新增數組元素-通過修改數組索引新增數組元素；追加數組元素；// 之前索引號里面沒有元素時是追加元素；有元素時是替換元素；var arr1 = ['red', 'blue', 'green'];arr1[3] = 'pink';console.log(arr1);//['red', 'blue', 'green', 'pink']arr1='有點意思';console.log(arr1);//不能直接給數組名賦值，否則會覆蓋掉以前的數據；</script>

案例：新建一個數組，里面存放10個整數（1-10）

<script>var arr = [];for (var i = 0; i < 10; i++) {//arr=i; //不要直接給數組名賦值，否則以前的元素都沒了；arr[i] = i+1;}console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
</script>

案例：篩選數組

方法一：

<script>// 將數組[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素選出來，放入新數組；var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];var arr1 = [];var j = 0;for (var i = 0; i <= arr.length; i++) {// 新數組應該從0開始，一次遞增；if (arr[i] >= 10) {// arr1[i] = arr[i]; //[empty × 4, 77, empty, 52, empty, 25] 原因：從第四個開始有值，當i=1，2，3時是沒有值存進去的；arr1[j] = arr[i];j++; //[77, 52, 25]}}console.log(arr1);</script>

方法二：

 // 篩選數組方法二：var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];var arr1 = [];for (var i = 0; i <= arr.length; i++) {// 新數組應該從0開始，一次遞增；if (arr[i] >= 10) {// arr1[i] = arr[i]; //[empty × 4, 77, empty, 52, empty, 25] 原因：從第四個開始有值，當i=1，2，3時是沒有值存進去的；arr1[arr1.length] = arr[i];//剛開始 arr1.length 就是0；數組的length會根據數組長度的變化而變化；}}console.log(arr1);

案例：數組去重

<script>// 方法一：var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];var newArr = [];// for (var i = 0; i < arr.length; i++) {//     if (newArr.indexOf(arr[i]) === -1) {//         newArr.push(arr[i]);//     }// }// console.log(newArr);// 方法二：var mySet=new Set(arr);//利用了Set結構不能接收重復數據的特點；for(var val of mySet){newArr.push(val);}console.log(newArr);</script>

案例：翻轉數組

<script>// 要求：將數組['red','green','pink','blue',purper]的內容反過來存放；var arr = ['red', 'green', 'pink', 'blue', 'purper'];var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}console.log(newArr);</script>

復習：交換兩個變量

var num1=10;
var num2=20;
var temp;
temp=num1;
num1=num2;
num2=temp;
console.log(num1,num2);

案例：數組排序（冒泡排序）

冒泡排序是一種算法，把一系列的數據按照一定的順序進行排列顯示（從小到大或從大到小）；

 <script>var arr = [5, 4, 3, 2, 1];for (var i = 0; i <= arr.length - 1; i++) {//外層循環管趟數for (var j = 0; j <= arr.length - i - 1; j++) {//里面的循環管每一趟的交換次數；// 內部交換兩個變量的值，前一個和后面一個數組元素相比較；if (arr[j] > arr[j + 1]) {var temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}console.log(arr);</script>

函數

函數導讀

函數：函數就是封裝了一段可以被重復執行調用的代碼塊；目的就是讓大量代碼重復使用；
函數使用分為兩步：【聲明函數】和【調用函數】；

function 函數名(){//函數體
}
函數名()

函數是做某件事情，函數名一般是動詞；（sayHi）
函數不調用自己不執行；
注意：聲明函數本身并不會執行代碼，只有調用函數時才會執行函數體代碼；
函數的封裝：就是把一個或多個功能通過函數的方式封裝起來，對外只提供一個簡單的函數接口；

案例：利用函數求1~100的累加和

<script>function getSum() {var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(sum);}getSum();</script>

函數的參數

我們可以利用函數的參數實現函數重復不同的代碼；
【形參】和【實參】；

function 函數名(形參1，形參2，...){}
函數名(實參1,實參2,...);

在聲明函數的小括號里面是【形參】；（形式上的參數）
在函數調用的小括號里面是【實參】；（實際的參數）
形參和實參的執行過程：（形參是接收實參的；形參類似于一個變量；）
函數的參數可以有，也可以沒有，個數不限；

案例：利用函數求任意兩個數的和以及累加和

<script>// 1、利用函數求任意兩個數的和function getSum(num1, num2) {console.log(num1 + num2);}getSum(1, 3);// 2、利用函數求任意兩個數之間的和function getSums(start, end) {var sum = 0;for (var i = start; i <= end; i++) {sum += i;}console.log(sum);}getSums(1, 100);</script>

注意點：
（1）、多個參數之間用逗號隔開；
（2）、形參可以看作是不用聲明的變量；

函數的形參和實參匹配問題

如果實參的個數和形參的個數一致，則正常輸出結果；
如果實參的個數多于形參的個數，會取到形參的個數；
如果實參的個數小于形參的個數，多于的形參定義為undefined，最終的結果就是NaN；
形參可以看作是不用聲明的變量，num2是一個變量但是沒有接受值，結果就是undefined；
建議：我們盡量讓實參的個數和形參相匹配；

function getSum(num1,num2){console.log(num1+num2);
}
getSum(1,2);
getSum(1,2,3);
getSum(1);//NaN （任何數字 + undefined = NaN ）

函數的返回值`return`

有時候，我們會希望函數將值返回給調用者，此時通過使用return語句就可以實現；

function 函數名(){return 需要返回的結果;
}函數名();

我們函數只是實現某種功能，最終的結果需要返回給函數的調用者；通過return來實現的；
只要函數遇到return，就把后面的結果返回給函數的調用者；
函數名() = return后面的結果；

function getResult(){return 666;
}
getResult()
console.log(getResult());//666

案例：求任意兩個數的和

function getSum(num1,num2){return num1 + num2;
}
console.log(getSum(1,2));

案例：利用函數求兩個數的最大值

<script>function getMax(num1, num2) {// if (num1 > num2) {//     return num1;// } else {//     return num2;// }return num1 > num2 ? num1 : num2;}console.log(getMax(6, 2));</script>

案例：利用函數求數組中的最大值

<script>// var arr=[5,2,99,101,67,77];function getArrMax(arr) {// arr 接收一個數組var max = arr[0];for (var i = 1; i <= arr.length; i++) {if (arr[i] > max) {max = arr[i];}}return max;}// console.log(getArrMax([5, 2, 99, 101, 67, 77]));//實參是一個數組送過去  var re = getArrMax([5, 2, 99, 101, 67, 77]);console.log(re);</script>

`return`終止函數并且只能返回一個值

return終止函數，return語句之后的代碼不被執行；

function getSum(num1,num2){return num1+num2;alert("我是不會被執行的");//return 后面的的代碼不會被執行
}
console.log(getSum(1,2));

return只能返回一個值。如果用逗號隔開多個值，以最后一個為準；

function fn(num1,num2){return num1,num2;//返回的結果是最后一個值
}
console.log(fn(1,2));

我們求任意兩個數的加減乘除結果：

function getResult(num1,num2){return [num1+num2,num1-num2,num1*num2,num1/num2];
}
console.log(fn(1,2));//返回的是一個數組

函數沒有`return`，返回`undefined`；

我們的函數如果有return，則返回的是return后面的值；如果函數沒有return，則返回undefined；

`break`、`continue`、`return`的區別

arguments 的使用

當我們不確定有多少個參數傳遞的時候，可以用arguments 來獲取，在JS中，arguments 實際上它是當前函數的一個【內置對象】。所有函數都內置了一個arguments對象，arguments對象中【存儲了傳遞的所有實參】；

<script>function fn() {console.log(arguments); // Arguments(3)，arguments是以偽數組的形式來展示的；//我們可以按照數組的方式遍歷 Arguments；}fn(1, 2, 3)/*偽數組并不是真正意義上的數組：1、具有數組的 length 屬性；2、按照索引的方式進行存儲的；3、沒有真正數組的一些方法，如：pop()、push() 等；*/
</script>

函數的兩種聲明方式

<script>// 1、利用函數關鍵字自定義函數（命名函數）function fn() { }fn()// 2、函數表達式（匿名函數）//注意：函數表達式聲明方式跟變量差不多，只不過變量里面存的是值，而函數表達式里面存的是函數；// var 變量名 = function(){}var fun = function () { } // 注意：此處的 fun 是變量名，不是函數名；fun() // 變量名 + （）實現調用；函數表達式也可以進行傳遞參數；
</script>

`arguments` 案例：利用函數求任意幾個數的最大值

 <script>function getMax() {var max = arguments[0];for (var i = 1; i < arguments.length; i++) {if (arguments[i] > max) {max = arguments[i];}}return max;}console.log(getMax(7, 2, 5, 99, 0, 2346));      </script>

案例：利用函數封裝方式，翻轉任意一個數組

<script>function getArrReverse(arr) {var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}return newArr;}console.log(getArrReverse([1, 2, 3, 4, 5]));     </script>

案例：利用函數封裝冒泡排序

<script>function sort(arr) {for (var i = 0; i <= arr.length - 1; i++) {for (var j = 0; j <= arr.length - i - 1; j++) {if (arr[j] > arr[j + 1]) {var temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}return arr;}console.log(sort([5, 7, 3, 2, 0, 8, 1]));</script>

案例：運用函數封裝判斷閏年

 <script>// 閏年：能被4整除并且不能被100整除；或者能被400整除；// function isRunYear(year){//     if(year % 4 === 0 && year % 100 !=0 || year % 400 === 0){//         return year+'年是閏年';//     }else{//         return year+'年是平年';//     }// }// console.log(isRunYear(2020));function isRunYear(year){// 如果是閏年我們返回true；否則返回false；var flag = false;if(year % 4 === 0 && year % 100 !=0 || year % 400 === 0){flag = true;}return flag;}console.log(isRunYear(2000));</script>

函數可以調用另外一個函數

因為每個函數都是獨立的代碼塊，用于完成特殊任務，因此經常會用到函數相互調用的情況；

function fn1(){console.log(11);fn2();//在fn1函數里面調用了fn2函數；
}
fn1();
function fn2(){console.log(22);
}

一個函數調用另外一個函數案例：用戶輸入年份，輸出當前年份2月份的天數

<script>function backDay(){var year = prompt('請輸入年份');if(isRunYear(year)){//調用函數需要加小括號alert('當前年份是閏年，2月份有29天');}else{alert('當前年份是平年，2月份有28天');}}backDay();// 判斷是否為閏年的函數function isRunYear(year){// 如果是閏年我們返回true；否則返回false；var flag = false;if(year % 4 === 0 && year % 100 !=0 || year % 400 === 0){flag = true;}return flag;}</script>

Javascript作用域

作用域概述：

通常來說，一段程序代碼中所用到的名字并不總是有效和可用的，而限定這個名字的【可用性的代碼范圍】就是這個名字的作用域。作用域的使用提高了程序邏輯的局部性，增強了程序的可靠性，減少了名字的沖突。
Javascript作用域： 就是代碼名字（變量）在某個范圍內起作用和效果；目的是為了提高程序的可靠性，更重要的是減少命名沖突；js作用域（es6）之前：全局作用域局部作用域；
全局作用域： 【整個 script 標簽】或者是一個【單獨的js文件】
局部作用域（函數作用域）： 在函數內部就是局部作用域；這個代碼的名字只在函數內部起效果和作用；

變量的作用域：

根據作用域的不同，我們把變量分為【全局變量】和【局部變量】

全局變量：

全局變量：在全局作用域下聲明的變量（在函數外部定義的變量），在全局下都可以使用；
全局變量在代碼的任何位置都可以使用；
在全局作用域下var聲明的變量是【全局變量】；
特殊情況下，在函數內不使用var聲明的變量也是全局變量（不建議使用）；
注意：如果在函數內部，沒有聲明直接賦值的變量也屬于【全局變量】；

局部變量：

在局部作用域下聲明的變量，或者在函數內部定義的變量就是局部變量；
局部變量只能在該函數內部使用；
在函數內部var聲明的變量是局部變量；
注意：函數的形參也可以看做是【局部變量】；

從執行效率來看【全局變量】和【局部變量】：

全局變量只有瀏覽器關閉的時候才會銷毀，比較占內存資源；
局部變量當我們程序執行完畢就會銷毀，比較節約內存資源；

塊級作用域：

用 {} 包裹

作用域鏈：

內部函數訪問外部函數的變量，采取的是鏈式查找的方式來決定取哪個值，這種結構我們稱為作用域鏈。（就近原則）

只要是代碼，就至少有一個作用域；
寫在函數內部的局部作用域；
如果函數中還有函數，那么在這個作用域中就又可以誕生一個作用域；
根據在內部函數可以訪問外部函數變量的這種機制，用鏈式查找決定哪些數據能被內部函數訪問，就稱為【作用域鏈】；

預解析

JavaScript代碼是由瀏覽器中的JavaScript解析器（引擎）來執行的。JavaScript解析器在運行JavaScript代碼的時候分為兩步：【預解析】和【代碼執行】。
預解析： js引擎會把js里面所有的 var，還有 function 提升到當前作用域的最前面；
代碼執行：按照代碼書寫的順序從上往下執行；
預解析分為【變量預解析（變量提升）】和【函數預解析（函數提升）】。

變量提升：

就是把所有的變量聲明提升到當前的作用域最前面，不提升賦值操作；

函數提升：

就是把所有的函數聲明提升到當前作用域的最前面，不調用函數；

// 1問
console.log(num) // 報錯// 2問
console.log(num) // undefined  坑1
var num=10
// 相當于執行了以下代碼
var num ;
console.log(num)
num=10// 3問
fn() // 11
function fn(){console.log(11) 
}
fn() // 11// 4問
fun() // 報錯 fun is not a function
var fun=function(){ // 函數表達式 調用必須寫在函數表達式的下面console.log(22) 
}
fun() // 22
//相當于執行了以下代碼
var fun ;
fun();
fun=function(){console.log(22) 
}

注意：

var a=b=c=9;
// 相當于：var a=9;b=9;c=9 區別于【集體聲明】
//所以此處的 b 和 c 直接賦值，沒有 var 聲明，此處的 b 和 c 當全局變量看；// 集體聲明（用逗號隔開）
var a=9,b=9,c=9

對象

什么是對象？

在Javascript中，對象是一組無序的相關屬性和方法的集合，所有的事務都是對象，例如：字符串、數值、數組、函數等；
對象是由【屬性】和【方法】組成的：
【屬性】：事物的特征，在對象中用屬性來表示（常用名詞）；
【方法】：事物的行為，在對象中用方法來表示（常用動詞）；

為什么需要對象？

保存一個值時，可以使用變量；保存多個值（一組值）時，可以使用數組。JS中的對象表達結構更清晰，更強大。

創建對象的三種方式

1、利用【字面量】創建對象；

【對象字面量】就是花括號 {} ，里面包含了表達這個具體事物（對象）的屬性和方法；
調用屬性還有一種方法：對象名[‘屬性名’]

2、利用【new Object】創建對象；

3、利用【構造函數】創建對象；

我們為什么需要使用構造函數？就是因為我們前面兩種創建對象的方式一次只能創建一個對象；我們一次創建一個對象，里面很多的屬性和方法是大量相同的，我們只能復制；因此，我們可以利用函數的方法，重復這些相同的代碼，我們就把這個函數稱為構造函數。又因為這個函數不一樣，里面封裝的不是普通代碼，而是【對象】。
構造函數：就是把我們對象里面一些相同的屬性和方法抽象出來，封裝到函數里面；
構造函數： 是一種特殊的函數，主要用來初始化對象，即為對象成員變量賦初始值，它總與new運算符一起使用。我們可以把對象中一些公共的屬性和方法抽取出來，然后封裝到這個函數里面。

//構造函數的語法格式
function 構造函數名(){this.屬性=值this.方法=functon(){}
}
new 構造函數名() //調用構造函數

function Star(uname,age,sex){this.name=uname;this.age=age;this.sex=sex;this.sing=function(sang){console.log(sang)}
}
// 調用函數返回的是一個對象
var ldh = new Star('劉德華',18,'男') 
ldh.sing('冰雨');
console.log(typeof ldh)
console.log(ldh.name)
console.log(ldh['sex'])

注意：
1、構造函數名字首字母要大寫；
2、我們構造函數不需要return 就可以返回結果；
3、我們調用構造函數，必須使用new；
4、我們只要 new Sar()調用函數，就創建一個對象；
5、我們的屬性和方法前面必須添加this；

構造函數和對象的區別？

對象：是特指一個具體的事務，例如：劉德華；
構造函數：抽象了對象的公共部分，封裝到了函數里面，它泛指某一大類，例如：明星；它類似于Java語言里的類（class）；
我們利用構造函數（new關鍵字）創建對象的過程，也稱為對象的【實例化】；

new關鍵字執行過程（new在執行時會做四件事）

1、new構造函數可以在內存中創建了一個空的對象；
2、this就指向剛才創建的空對象；
3、執行構造函數里面的代碼，給這個空對象添加屬性和方法；
4、返回這個新對象（所以構造函數里面不需要return）；

遍歷對象屬性：`for...in`語句用于對【數組】或者【對象的屬性】進行【循環】操作；

//for in 遍歷對象
// 語法規則：for (變量 in 對象){}for(var k in obj){console.log(k); // k：變量，輸出得到的是：屬性名console.log(obj[k]); // obj[k] 得到的是：屬性值//注意：此處的 k 是一個變量，無需用引號包裹；// 我們使用 for in 時，里面的變量，我們喜歡寫 k 或者 key// for in 也可以遍歷出對象里面的方法
}

小結：

對象可以讓代碼結構更清晰；
對象是復雜數據類型 Object；
對象的本質：就是一組無序的相關屬性和方法的集合；
構造函數泛指某一大類，比如蘋果，不管是紅色蘋果還是綠色蘋果，都統稱為蘋果；
對象實例特指一個事物，比如這個蘋果等；
for in語句用于對對象的屬性進行循環操作；

【變量】【屬性】【函數】【方法】的區別

變量：變量和屬性的相同點：他們都是用來存儲數據的；
變量：單獨聲明并賦值，使用的時候直接寫變量名，單獨存在；
屬性：在對象里面的不需要聲明的，使用的時候必須是對象.屬性；
函數和方法的相同點：都是實現某種功能，做某件事；
函數是單獨聲明，并且調用的；函數名 + （）調用；單獨存在的；
方法在對象里面，調用的時候：對象.方法（）調用；

JavaScript內置對象

JavaScript中的對象分為3種：自定義對象、內置對象、瀏覽器對象；
前面兩種對象是JS基礎內容，屬于ECMAScript；第三個瀏覽器對象屬于我們JS獨有的；
【內置對象】就是指JS語言自帶的一些對象，這些對象供開發者使用，并提供了一些常用的或是最基本而必要的功能（屬性和方法）；
JavaScript提供了多個內置對象：Math、Date、Array、String等；
https://developer.mozilla.org/zh-CN/

//利用對象封裝自己的數學對象，里面有 PI 最大值和最小值  
var myMath={PI:3.141592653,max:function(){var max=arguments[0];for(var i=1;i<arguments.length;i++){if(arguments[i]>max){max=arguments[i]}}return max;},min:function(){var min=arguments[0];for(var i=1;i<arguments.length;i++){if(arguments[i]<min){min=arguments[i]}}return min;}
}

// 猜數字游戲案例
function getRandom(min,max){return Math.floor(Math.random() * (max-min + 1)) + min;
}
var random =getRandom(1,10);
while(true){ //死循環var num = prompt('你來猜？輸入1~10之間的一個數字');
}
if(num>random){alert('你猜大了')
}else if(num<random){alert('你猜小了')
}else{alert('猜對了！')break; // 退出整個循環，結束程序
}

日期對象（`Date()`）

日期對象是一個構造函數，必須使用new來調用創建我們的日期對象；
使用Date()，如果沒有參數，返回當前系統的當前時間；
參數常用的寫法：數字型：2019,10,01或者是字符串型：2019-10-1 8:8:8

//格式化日期年月日星期（星期天返回的是0）
var arr=['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
var date=new Date();
var day=date.getDay();
console.log(arr[day])

//封裝一個函數返回當前的時分秒，格式：08:08:08
function getTimer(){var time=new Date();var h=time.getHours();h = h<10?'0'+h:hvar m=time.getMinutes()m = m<10?'0'+m:mvar s=time.getSeconds()s = s<10?'0'+s:sreturn h+':'+m+':'+s
}
console.log(getTimer())

倒計時案例：

數組

字符串

基本包裝類型

對象才有屬性和方法；復雜數據類型才有屬性和方法；簡單數據類型為什么會有length屬性呢？
基本包裝類型：為了方便操作基本數據類型，JavaScript還提供了三個特殊的引用類型：String、Number 和 Boolean（三種基本包裝類型）；基本包裝類型就是把【簡單數據類型】包裝成為【復雜數據類型】，這樣基本數據類型就有了【屬性】和【方法】；
（1）、把簡單數據類型，包裝成復雜數據類型；
（2）、把臨時變量的值給str;
（3）、銷毀這個臨時變量；

var str = 'andy';
console.log(str.length);
var temp = new Sring('andy');
str = temp;
temp = null;

字符串的不可變

字符串的不可變：指的是里面的值不可變，雖然看上去可以改變內容，但其實是地址改變了，內存中新開辟了一個內存空間；所以不要大量的拼接字符串；
字符串所有的方法，都不會修改字符串本身（字符串是不可變的），操作完成會返回一個新的字符串；

// 案例：查找字符串“abcoefoxyozzopp”中所有o出現的位置以及次數；
/*
核心算法：先查找第一個o出現的位置，然后，只要 indexOf 返回的結果不是 -1，就繼續往后查找；因為 indexOf 只能查找到第一個，所以后面的查找一定是當前索引加1，從而繼續查找；
*/ 
var str = 'abcoefoxyozzopp'
var index = str.indexOf('o')
var num = 0;
while(index !== -1){console.log(index)num++index = str.indexOf('0',index+1);
}
console.log('o出現的次數是' + num)

//案例：遍歷字符串
// charAt(index) 根據位置返回字符
var str= 'andy'
console.log(str.charAt(3))//遍歷所有字符串
for(var i=0;i<str.length;i++){console.log(str.charAt(i))
}

// 有一個對象，判斷該對象里有沒有該屬性 對象['屬性名']
var o={age:18
}
if(o['age']){console.log('里面有該屬性')
}else{console.log('里面沒有該屬性')
}
// 案例：統計字符串 'abcoefoxyozzopp' 中出現次數最多的字符 
/*
核心算法：利用 charAt() 遍歷這個字符串；把每個字符都存儲給對象，如果對象沒有該屬性，就為1，如果存在了就 +1；遍歷對象，得到最大值和該字符；
*/
var str = 'abcoefoxyozzopp';
var o ={}
for(var i=0;i<str.length;i++){var charts=str.charAt(i) // charts 是字符串的每一個字符if(o[charts]){ //o[charts]得到的是屬性值o[charts]++}else{o[charts]=1}
}
console.log(o)
// 遍歷對象，求出出現最多的次數
var max = 0;
var ch = '';//統計出現次數最多的字符
for(var k in o){ //遍歷對象用 for in // k 得到的是屬性名// o[k] 得到的是屬性值if(o[k]>max){max=o[k];ch=k}
}
console.log(max)
console.log(ch)

替換字符：str.replace('被替換的字符','替換為的字符')，只會替換第一個字符；

//案例：有一個字符 'abcoefoxyozzopp' ，要求把里面所有的 o 替換為 *；（該方法可用于實現過濾敏感詞等功能）
var str = 'abcoefoxyozzopp';
while(str.indexOf('o') !== -1){str = str.replace('o','*')
}
console.log(str)

JavaScript簡單數據類型和復雜數據類型

數據類型內存分配

【簡單數據類型】又叫做【基本數據類型】或【值類型】；【復雜類型】又叫做【引用類型】；
（1）、值類型：簡單數據類型/基本數據類型，在存儲時變量中存儲的是值本身，因此叫做值類型；（string 、number 、boolean 、 undefined 、null（null 返回的是一個空的對象 Object））
注意：如果有個變量我們以后打算存儲為對象，暫時沒想好放啥，這個時候就給 null；
（2）、引用類型：復雜數據類型，在存儲時變量中存儲的僅僅是【地址】（引用），因此叫做引用數據類型；通過 new 關鍵字創建對象（系統對象、自定義對象），比如 Object 、Array 、 Date 等；

堆和棧

堆棧空間分配區別？
（1）、棧（操作系統）：由操作系統自動分配釋放存放函數的參數值、局部變量的值等。其操作方式類似于數據結構中的棧；簡單數據類型存放到棧里面，里面直接開辟一個空間，存放的是值；
（2）、堆（操作系統）：存儲復雜類型（對象），一般由程序員分配釋放，若程序員不釋放，由垃圾回收機制回收；復雜數據類型存放在堆里面；（復雜數據類型：首先在棧里面存放用【用十六進制表示】的地址，然后這個地址指向堆里面的數據）
注意：JavaScript中沒有堆棧的概念，通過堆棧的方式，可以讓大家更容易理解代碼的一些執行方式，便于將來學習其他語言；

簡單類型傳參（簡單數據類型傳參傳值，復雜數據類型傳參傳地址）

函數的形參也可以看做是一個變量，當我們把一個值類型變量作為參數傳給函數的形參時，其實是把變量在棧空間里的值復制了一份給形參，那么在方法內部對形參做任何修改，都不會影響到外部的變量；

 function fn(a) {a++console.log(a); // 11}var x = 10fn(x)console.log(x);// 10

復雜類型傳參

函數的形參也可以看作是一個變量，當我們把引用類型變量傳給形參時，其實是把變量在棧空間里保存的堆地址復制給了形參，形參和實參其實保存的是同一個堆地址，所以操作的是同一個對象。

function Person(name){this.name=name
}function f1(x){//x=pconsole.log(x.name)//2、這里輸出什么？劉德華x.name='張學友'console.log(x.name)//3、這里輸出什么？張學友
}var p=new Person('劉德華')console.log(p.name)//1、這里輸出什么？劉德華f1(p)console.log(p.name)//4、這里輸出什么？張學友

Web APIs和JS基礎

API：是為我們程序員提供的一個接口，幫助我們實現某種功能，我們會使用就可以了，不必糾結內部如何實現；
Web API：是瀏覽器提供的一套操作【瀏覽器功能】和【頁面元素】的API（BOM和DOM）。主要是針對于瀏覽器提供的接口，主要針對于瀏覽器做交互效果；
Web API一般都有輸入和輸出（函數的傳參和返回值），Web API很多都是方法（函數）。

Dom

什么是Dom？文檔對象模型（Document Object Model，簡稱Dom），是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口。
W3C已經定義了一系列DOM接口，通過這些DOM接口可以改變網頁的內容、結構和樣式。
Dom樹：
文檔：一個頁面就是一個文檔，DOM中使用document表示。
元素：頁面中的所有標簽都是元素，DOM中使用element表示。
節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），DOM中使用node表示。
DOM把以上內容都看做是對象。
DOM在我們實際開發中主要用來操作元素的。
獲取頁面中的元素可以使用以下幾種方法：（返回的是一個元素對象）
（1）、根據ID獲取；
（2）、根據標簽名獲取；（返回的是獲取過來元素對象的集合，以偽數組的形式存儲的）（還可以獲取某個元素（父元素）內部所有指定標簽名的子元素，注意：父元素必須是【單個對象】（必須指明是哪一個元素對象），獲取的時候不包括元素自己）
var ol=document.getElementsByTagName('ol') console.log(ol[0].document.getElementsByTagName('li') )簡單做法：給父元素添加ID，通過ID獲取父元素，然后獲取父元素里面的子元素；
（3）、通過HTML5新增的方法獲取；Document.getElementsByClassName()、Document.querySelector('選擇器')（根據指定選擇器返回第一個元素對象）、Document.querySelectorAll('選擇器')（根據指定選擇器返回所有元素對象集合）
（4）、特殊元素獲取；
console.dir()打印我們返回的元素對象，更好的查看里面的屬性和方法；
獲取body元素：document.body
獲取html元素：document.documentElement

事件

JavaScript使我們有能力創建動態頁面，而事件是可以被JavaScript偵測到的行為；簡單理解：觸發 — 響應機制；
事件三要素：事件是由三部分組成：事件源、事件類型、事件處理程序，被稱為事件三要素；
（1）、事件源：事件被觸發的對象；
（2）、事件類型：如何觸發，什么事件。比如：鼠標點擊、鼠標經過、鍵盤按下；
（3）、事件處理程序：通過一個函數賦值的方式完成；

<button id='btn'>按鈕</button>var btn=document.getElementById('btn');
btn.onclick=function(){alert('彈窗')
}

操作元素

JavaScript的DOM操作可以改變網頁內容、結構和樣式，我們可以利用DOM操作元素來改變元素里面的內容、屬性等。注意以下都是屬性；

改變元素內容

element.innerText從起始位置到終止位置的內容，但它取出html標簽，同時空格和換行也會去掉；（不識別html標簽）非標準去除空格和換行

<button>點擊改變時間</button>
<div>寫死的時間</div>
<p>123</p><script>// 1、獲取元素var btn = document.querySelector('button');var div = document.querySelector('div')// 注冊事件btn.onclick = function () {// div.innerText = '2022-1-2'div.innerText = getDate()}function getDate() {var date = new Date()var year = date.getFullYear();var month = date.getMonth();var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']var day = date.getDay();return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day]}// 我們元素可以不用添加事件var p = document.querySelector('p')p.innerText = getDate()
</script>

element.innerHTML起始位置到終止位置的全部內容，包括html標簽，同時保留空格和換行；（識別html標簽）W3C標準保留空格和換行

var p = document.querySelector('p')
p.innerHTML = '<strong>今天是：</strong>2022-1-2' //實現給‘今天是’加粗

這兩個屬性是可讀寫的，可以獲取元素里面的內容。

<p>我是文字<span>123</span>
</p>var p=document.querySelector('p')
console.log(p.innerText)//我是文字 123
console.log(p.innerHTML)//我是文字 <span>123</span>（空格和換行依然保留）

修改元素屬性

常用元素的屬性操作

innerText、innerHTML改變元素內容；
src、href；
id、alt、title；

//案例：分時問候案例
<img src="./images/shangwu.jpg" alt="">
<div>上午好</div><script>// 獲取元素var img = document.querySelector('img')var div = document.querySelector('div')// 得到當前的小時數var date = new Date();var h = date.getHours();// 判斷小時數改變圖片和文字信息if (h < 12) {img.src = './images/shangwu.jpg'div.innerHTML = '上午好'} else if (h < 18) {img.src = './images/xiawuhao.jpg'div.innerHTML = '下午好'} else {img.src = './images/wanshanghao.jpg'div.innerHTML = '晚上好'}
</script>

表單元素的屬性操作

利用 DOM 可以操作如下表單元素的屬性：type value checked selected disabled

  //1、獲取元素var btn= document.querySelector('button')var input= document.querySelector('input')//2、注冊事件  處理程序btn.onclick=function(){//btn.disabled=true //禁用按鈕this.disabled=true //this 指向的是事件函數的調用者}

//案例：仿京東顯示隱藏密碼明文案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>顯示隱藏密碼案例</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style>
</head><body><div class="box"><label for=""><img src="./images/green_close_eye.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></div><script>var eye = document.getElementById('eye')var pwd = document.getElementById('pwd')//方法1： 利用flag變量記錄點擊var flag = 0eye.onclick = function () {// 點擊一次過后，flag一定要變化if (flag == 0) {pwd.type = 'text'eye.src='./images/green_open_eye.png'flag = 1;//賦值操作} else {pwd.type = 'password'eye.src='./images/green_close_eye.png'flag = 0;}}//方法2： 計數器思想記錄點擊var count = 0;eye.onclick = function () {count++if (count % 2 == 0) {eye.src = "./images/green_close_eye.png"pwd.type = "password"} else {eye.src = "./images/green_open_eye.png"pwd.type = "text"}}</script>
</body></html>

樣式屬性操作

我們可以通過JS修改元素的大小、顏色、位置等樣式；
element.style行內樣式操作；
element.className類名樣式操作；
注意：JS里面的樣式采取駝峰命名法，比如：fontSize backgroundColor；JS修改style樣式操作，產生的是行內樣式，CSS權重比較高；

循環精靈圖背景

//案例：循環精靈圖背景；可以利用for循環設置一組元素的精靈圖背景。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>循環遍歷精靈圖</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background-color: pink;margin: 15px;background: url(./images/icons.png) no-repeat;}</style>
</head><body><div class="box"><ul><li></li><li></li><li></li><li></li></ul></div><script>// 1、獲取所有元素，所有的livar lis = document.querySelectorAll('li')// 2、讓索引號 乘以 44 就是每個 li 的背景y坐標，index就是我們的y坐標；for (var i = 0; i < lis.length; i++) {var index = i * 24 //我這張精靈圖是24lis[i].style.backgroundPosition = '0-' + index + 'px'//精靈圖的y坐標是負的;x坐標永遠是0//lis[i].style.backgroundPosition = '0 0' //全部展示第一張圖片//lis[i].style.backgroundPosition = '0 -24px' //全部展示第二張圖片}</script>
</body></html>

案例：當鼠標點擊文本框時，里面的默認文字隱藏；當鼠標離開文本框時，里面的文字顯示；

//案例：當鼠標點擊文本框時，里面的默認文字隱藏；當鼠標離開文本框時，里面的文字顯示；
//`onfocus` `onblur`
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>顯示隱藏文本框內容案例</title><style>input {color: #999;}</style>
</head><body><input type="text" value="手機"><script>var text = document.querySelector('input')text.onfocus = function () {console.log('得到了焦點');if (this.value === '手機') {this.value = ''}this.style.color = '#333'//獲得焦點時把文本框里的文字的顏色變深}text.onblur = function () {console.log('失去了焦點');if (this.value === '') {this.value = '手機'}this.style.color = '#999'//失去焦點時把文本框里的文字的顏色變淺}</script>
</body></html>

樣式屬性操作：我們可以通過JS修改元素的顏色、大小、位置等樣式

element.style 行內樣式操作；
element.className 類名樣式操作；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用className修改樣式屬性</title><style>div{width: 50px;height: 50px;background-color: green;}.change{width: 100px;height: 100px;background-color: aqua;margin-top: 100px;}</style>
</head>
<body><div class='fist'>文本</div><script>var test=document.querySelector('div')test.onclick=function(){//我們可以通過 修改元素的 className 更改元素的樣式，適合于樣式較多或者功能復雜的情況       this.className='change'//點擊時給div加上change的類名//如果想要保留原先的類名，我們可以這么做 --->  多類名選擇器this.className='fist change'}</script>
</body>
</html>

注意：className 會直接更改元素的類名，會覆蓋原先的類名；
如果想要保留原先的類名，我們可以這么做 —> 多類名選擇器

案例：密碼框驗證信息

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>密碼框驗證信息案例</title><style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(./images/reg.jpg) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(./images/wrong.jpg);//注意：此處不用寫no-repeat left center}.right {color: green;background-image: url(./images/right.jpg);//注意：此處不用寫no-repeat left center}</style>
</head><body><div class="register"><input type="password" class="ipt"><p class="message">請輸入6~16位密碼</p></div><script>var ipt = document.querySelector('.ipt')var messege = document.querySelector('.message')ipt.onblur = function () {if (this.value.length < 6 || this.value.length > 16) {messege.className = 'message wrong';messege.innerHTML = '你輸入的位數不對，要求6~16位'} else {messege.className = 'message right';messege.innerHTML = '你輸入的正確'}}</script>
</body></html>

操作元素小結：

排他思想

如果有同一組元素，我們想要某一個元素實現某種樣式，需要用到循環的排他思想算法；
（1）、第一步：所有元素全部清除樣式；
（2）、第二步：給當前元素設置樣式；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>排他思想</title>
</head><body><button>按鈕1</button><button>按鈕2</button><button>按鈕3</button><button>按鈕4</button><script>// 首先先排除其他人，然后才設置自己的樣式，這種排除其他人的思想我們稱為排他思想var btns = document.querySelectorAll('button')for (var i = 0; i < btns.length; i++) {btns[i].onclick = function () {// 1、我們先把所有按鈕的背景顏色去掉for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = ''}// 2、然后才讓當前的元素背景顏色為pinkthis.style.backgroundColor = 'pink'}}</script>
</body></html>

百度換膚效果案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度換膚效果案例</title><style>* {margin: 0;padding: 0;}body {background: url(./images/01.jpeg) no-repeat center top;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li {/* list-style: none; */float: left;margin: 0 1px;cursor: pointer;}.baidu img {width: 100px;}</style>
</head><body><ul class="baidu"><li><img src="./images/01.jpeg" alt=""></li><li><img src="./images/02.jpeg" alt=""></li><li><img src="./images/03.jpeg" alt=""></li><li><img src="./images/04.jpeg" alt=""></li></ul><script>// 1、獲取元素（類名是 baidu 下的 img）var imgs = document.querySelector('.baidu').querySelectorAll('img')// 2、循環注冊事件for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function () {// this.src 就是我們點擊的圖片的路徑// 把這個路徑 this.src 給 body 就可以了//document.body.style.backgroundImage獲取body的背景圖片document.body.style.backgroundImage = 'url(' + this.src + ')'}}</script>
</body></html>

表格隔行變色效果案例

//onmouseover鼠標經過  onmouseout鼠標離開
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格隔行變色效果案例</title><style>table{width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse;//設置表格的邊框是否被合并為一個單一的邊框font-size: 14px;}thead tr{height: 30px;background-color: skyblue;}tbody tr{height: 30px;}tbody td{border-bottom: 1px solid #d7d7d7;color: blue;}.bg{background-color: pink;}</style>
</head>
<body><table><thead><tr><th>代碼</th><th>名稱</th><th>最新公布凈值</th><th>累計凈值</th><th>前單位凈值</th><th>凈值增長率</th></tr></thead><tbody><tr><td>003526</td><td>農行金穗3個月定期開放債券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003527</td><td>農行金穗4個月定期開放債券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr></tbody></table><script>// 1、獲取元素 獲取 tbody 里面所有的 trvar trs=document.querySelector('tbody').querySelectorAll('tr')// 2、利用循環綁定注冊事件for(var i=0;i<trs.length;i++){// 3、鼠標經過事件 onmouseovertrs[i].onmouseover=function(){this.className='bg';}// 4、鼠標離開事件 onmouseouttrs[i].onmouseout=function(){this.className='';}}</script>
</body>
</html>

表單全選取消全選案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單全選取消全選案例</title><style>.wrap {width: 300px;margin: 100px auto;}table {width: 100%;margin: 100px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;}</style>
</head><body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll"></th><th>商品</th><th>價錢</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox"></td><td>iphone8</td><td>8000</td></tr><tr><td><input type="checkbox"></td><td>iphone9</td><td>9000</td></tr><tr><td><input type="checkbox"></td><td>iphone10</td><td>10</td></tr></tbody></table></div><script>// 第一步：全選和取消全選的做法：讓下面所有復選框的checked屬性（選中狀態）跟隨 全選按鈕即可// 1、獲取元素var j_cbAll = document.getElementById('j_cbAll'); // 全選按鈕var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');//下面所有的復選框// 2、注冊事件j_cbAll.onclick = function () {// this.checked 它可以得到當前復選框的選中狀態，如果是 true 就選中，如果是 false ，就是未選中；console.log(this.checked);for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;//將全選按鈕的選中或未選中狀態賦值給所有的 checkbox }}//第二步：下面復選框需要全部選中，上面全選才能選中做法：給下面所有復選框綁定點擊事件，每次點擊，都要循環遍歷for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function () {// flag 控制全選按鈕是否選中var flag = true// 每次點擊下面的復選框都要循環檢查這四個小按鈕是否全被選中for (var i = 0; i < j_tbs.length; i++) {if (!j_tbs[i].checked) {flag = false;break;//退出for循環，這樣可以提高執行效率；因為只要有一個沒有選中，剩下的就循環判斷了；}}j_cbAll.checked = flag}}</script>
</body></html>

自定義屬性的操作

獲取自定義屬性值

element.屬性 獲取屬性值；

<div id='demo'></div>var div=document.querySelector('div')
// 獲取元素的屬性
// 方法1：element.屬性
console.log(div.id); // demo

element.getAttribute('屬性') attribute 本意“屬性”；

<div id='demo'></div>var div=document.querySelector('div')
// 獲取元素的屬性
// 方法2：element.getAttribute('屬性')
console.log(div.getAttribute('id')); // demo

element.屬性 獲取屬性值和 element.getAttribute('屬性') 獲取屬性值的區別？
（1）、element.屬性 獲取內置屬性值（元素本身自帶的屬性）如：id class等；
（2）、element.getAttribute('屬性') 主要獲得自定義的屬性（標準）我們程序員自定義的屬性；

設置屬性值

element.屬性 = '值' 設置內置屬性值；

<div id='demo' class='nav'></div>var div = document.querySelector('div')
div.className= 'sss'

element.setAttribute('屬性','值') ；主要針對于自定義屬性；

<div id='demo' index='1' class='nav'></div>var div = document.querySelector('div')
div.setAttribute('index','2')// class比較特殊，這里面寫的就是class，不是className
div.setAttribute('class','sss')

移除屬性

element.removeAttribute('屬性')

<div id='demo' index='1' class='nav'></div>var div = document.querySelector('div')
div.removeAttribute('index')

tab欄切換案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tab欄切換案例</title><style>.tab {width: 1200px;height: 100px;}.tab_list {width: 100%;float: left;}.tab_con {width: 100%;float: left;padding: 20px 60px;}.tab_list ul{width: 95%;height: 39px;background: rgb(223, 221, 221);}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;list-style: none;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style>
</head><body><div class="tab"><div class="tab_list"><ul><li class="current">商品介紹</li><li>規格與包裝</li><li>售后保障</li><li>商品評價</li><li>手機社區</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介紹模塊內容</div><div class="item">規格與包裝模塊內容</div><div class="item">售后保障模塊內容</div><div class="item">商品評價模塊內容</div><div class="item">手機社區模塊內容</div></div></div><script>// 先獲取父組件，再獲取父組件下的所有的livar tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item')// for循環綁定點擊事件for (var i = 0; i < lis.length; i++) {// 開始給5個小li 設置索引號lis[i].setAttribute('index', i) // element.setAttribute('屬性','值')// 1、上面的模塊選項卡：點擊某一個，當前這個底色會是紅色，其余不變（排他思想） 修改類名的方式// 干掉所有人，其余的li清除class這個類lis[i].onclick = function () {for (var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下我自己this.className = 'current'/*2、下面的顯示內容模塊：下面的模塊顯示內容和上面的選項卡一一對應，相匹配；給上面的tab_list里面的所有小li添加自定義屬性，屬性值從0開始編號；*/var index = this.getAttribute('index')//element.getAttribute('屬性')console.log(index);// 干掉所有人，讓其余的item 這些div隱藏for (var i = 0; i < lis.length; i++) {items[i].style.display = 'none'}// 留下我自己，讓對應的item顯示出來items[index].style.display = 'block'}}</script>
</body></html>

H5自定義屬性

自定義屬性目的：是為了保存并使用數據。有些數據可以保存到頁面中而不用保存到數據庫中；
自定義屬性獲取是通過element.getAttribute('屬性') 獲取；但是有些自定義屬性很容易引起歧義，不容易判斷是元素的內置屬性還是自定義屬性；

<div getTime='20'></div>// getTime 是自定義屬性，只能通過 getAttribute 獲取
var div = document.querySelect('div')
console.log(div.getTime) // undefined
console.log(div.getAttribute('getTime'))

H5給我們新增了自定義屬性

設置H5自定義屬性

H5規定自定義屬性以 data- 開頭作為屬性名并且賦值；

<div data-index='1'></div>// 或者使用JS設置 element.setAttribute('data-index',2)
div.setAttribute('data-time',20)

獲取H5自定義屬性

兼容性獲取 element.getAttribute('data-index') ；
H5新增 element.dataset.index 或者 element.dataset['index'] ie11才開始支持；（只能獲取以data- 開頭的）

<div getTime="20" data-index="2" data-list-name="andy"></div><script>var div=document.querySelector('div')// H5新增的獲取自定義屬性的方法// dataset 是一個【集合】，里面存放了所有以data開頭的自定義屬性console.log(div.dataset);// DOMStringMap {index: '2'}console.log(div.dataset.index);// 2console.log(div.dataset['index']);// 2 // 如果自定義屬性里面有多個 - 連接的單詞，我們獲取的時候采用【駝峰命名法】console.log(div.dataset.listName); //andy
</script>

DOM中的節點操作

獲取元素通常使用兩種方式：
（1）、利用DOM提供的方法獲取元素：如：document.getElementById() 等；這種方法邏輯性不強、繁瑣；
（2）、利用節點層級關系獲取元素：利用父子兄節點關系獲取元素；這種方法邏輯性強，但是兼容性稍差；
** 這兩種方法都可以獲取元素節點，我們后面都會用到，但是節點操作更簡單。

節點概述

網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），在DOM中，節點使用node 來表示；
HTML DOM 樹中的所有節點均可以通過JavaScript 進行訪問，所有HTML 元素（節點）均可被修改，也可以創建和刪除；
一般的，節點至少擁有nodeType （節點類型）、nodeName （節點名稱）、nodeValue （節點值）這三個基本屬性；
元素節點nodeType 為1；
屬性節點nodeType 為2；
文本節點nodeType 為3；（文本節點包含文字、空格、換行等）
我們在實際開發中，節點操作主要操作的是元素節點；

<div class="box"></div>var box=document.querySelector('.box')
console.dir(box)

節點操作之父節點

節點層級

利用DOM 樹可以把節點劃分為不同的層級關系，常見的是【父子兄層級關系】；

父級節點： `node.parentNode`

得到的是離元素最近的父級節點；如果指定的節點沒有父節點就返回null；

<div class="box"><span class="erweima"></span>
</div>//獲取父節點
var erweima=document.querySelector('.erweima')
//獲取 erweima 節點的父節點；得到的是離元素最近的父級節點
erweima.parentNode

節點操作之子節點

子節點： `parentNode.childNodes`（標準）（獲取到的是所有的子節點，包含元素節點、文本節點等）

parentNode.childNodes 返回包含指定節點的子節點的集合，該集合為即時更新的集合；
注意：返回值里面包含了所有的子節點，包括元素節點、文本節點等；如果只想要獲得里面的元素節點，則需要專門處理。所以我們一般不提倡使用 childNodes；

<ul><li></li><li></li><li></li>
</ul>//DOM提供的方法（API）獲取
var ul=document.querySelector('ul')
var lis=ul.querySelectorAll('li')//子節點（獲取到的是所有的子節點，包含 元素節點、文本節點等）
console.log(ul.childNodes)

專門處理：只想要獲得里面的元素節點

var ul=document.querySelector('ul')
for(var i=0;i<ul.childNodes.length;i++){if(ul.childNodes[i].nodeType == 1){//ul.childNodes[i]是元素節點console.log(ul.childNodes[i])}
}

parentNode.children （非標準）：是一個只讀屬性，返回所有的子元素節點。它只返回子元素節點，其余節點不返回（這個是我們重點掌握的）；雖然parentNode.children 是一個非標準，但是得到了各個瀏覽器的支持，因此我們可以放心使用。

//children 獲取所有的子元素節點（也是我們實際開發常用的）
var ul=document.querySelector('ul')
console.log(ul.children )

節點操作之第一個子元素和最后一個子元素

<ol><li></li><li></li><li></li>
</ol>var ol=document.querySelector('ol')
//1、firstChild 第一個子節點，不管是文本節點還是元素節點;找不到就返回 null
console.log(ol.firstChild)
console.log(ol.lastChild)//2、firstElementChild 返回第一個子元素節點
console.log(ol.firstElementChild)
console.log(ol.lastElementChild)

parentNode.firstElementChild 、parentNode.lastElementChild 注意：這兩個方法有兼容性問題，IE9 以上才支持；
實際開發中，firstChild 和 lastChild 包含其他節點，操作不方便；而firstElementChild lastElementChild 又有兼容性問題，那么我們如何獲取第一個子元素節點或最后一個子元素節點呢？
（1）、如果想要第一個子元素節點，可以使用parentNode.children[0] ；

//實際開發的寫法，既沒有兼容性問題又返回第一個子元素
console.log(ol.children[0])
console.log(ol.children[3])//第四個子元素//得到最后一個子元素
console.log(ol.children[ol.children.length-1])

新浪下拉菜單案例

<ul class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li></ul><script>// 1、獲取元素var nav = document.querySelector('.nav');var lis = nav.children; //得到四個小li// 2、循環遍歷事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function () {this.children[1].style.display = 'block'}lis[i].onmouseout = function () {this.children[1].style.display = 'none'}}</script>

兄弟節點 `node.nextSibling`、 `node.previousSibling`、`node.nextElementSibling`、`node.previousElementSibling`

node.nextSibling 返回當前元素的下一個兄弟節點（包括【元素節點】和【文本節點】等等），找不到就返回null；同樣，也是包含所有的節點；

<div>我是div</div>
<span>我是span<span>var div=document.querySelector('div')
console.log(div.nextSibling) //得到div的兄弟節點，包括元素節點 和 文本節點 #text

node.previousSibling 返回當前元素的上一個兄弟節點（包括【元素節點】和【文本節點】等等），找不到就返回null；同樣，也是包含所有的節點；
node.nextElementSibling 返回當前元素下一個兄弟元素節點，找不到就返回null；
node.previousElementSibling 返回當前元素上一個兄弟元素節點，找不到就返回null；
node.nextElementSibling、node.previousElementSibling 這兩個方法有兼容性問題，IE9以上才支持；

如何解決兼容性問題？自己封裝一個兼容性的函數。

function getNextElementSibling(element){var el=element;while(el=el.nextSibling){if(el.nodeType === 1){return el;}}return null
}

節點操作之創建和添加節點

創建節點：`document.createElement('tagName')`

document.createElement() 方法創建由tagName 指定的HTML 元素。因為這些元素原先不存在，是根據我們的需求動態生成的，所以我們也稱之為【動態創建元素節點】；

<ul></ul>//創建元素節點（只是創建了節點，未添加到頁面上）
var li=document.createElement('li');

添加節點：`node.appendChild(child)`、 `node.insertBefore(child,指定元素)`

node.appendChild(child) 方法將一個節點添加到指定父節點的子節點列表【末尾】。類似于css 里面的after 偽元素；（node 是父級；child 是子級）

<ul></ul>//創建元素節點（只是創建了節點，未添加到頁面上）
var li=document.createElement('li');
var ul=document.querySelector('ul')
//將節點添加到頁面上
ul.appendChild(li)

node.insertBefore(child,指定元素) 方法將一個節點添加到父節點的指定子節點的【前面】。類似于css 里面的before 偽元素；

<ul></ul>//創建元素節點（只是創建了節點，未添加到頁面上）
var lili=document.createElement('li');
var ul=document.querySelector('ul')
//將節點添加到ul的第一個子節點的前面上
ul.insertBefore(lili,ul.children[0])

總結：我們想要頁面添加一個新的元素：1、創建元素；2、添加元素；

案例：簡單版本發布留言

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>簡單版發布留言案例</title>
</head><body><textarea name="" id="" cols="30" rows="10"></textarea><button>發布</button><ul></ul><script>// 1、獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2、注冊事件btn.onclick = function () {if (text.value == '') {alert('你沒有輸入內容')return false} else {// （1）、創建元素var li = document.createElement('li');// 先有li才能賦值li.innerHTML = text.value// （2）、添加元素// ul.appendChild(li) //添加到最后// 添加到最前面ul.insertBefore(li,ul.children[0])}}</script>
</body></html>

節點操作 - 刪除節點 `node.removeChild(child)`

node.removeChild(child)方法從DOM 中刪除一個子節點，返回刪除的節點；

<button>刪除</button>
<ul><li>熊大</li><li>熊二</li><li>光頭強</li>
<ul>
//1、獲取元素
var ul=document.querySelector('ul');
//2、刪除元素
//ul.removeChild(ul.children[0]) //刪除“熊大”
//3、點擊按鈕，依次刪除里面的孩子
var btn=document.querySelector('button');
btn.onclick=function(){if(ul.children.length == 0){this.disabled= 'true' // 元素刪完讓按鈕置灰}else{ul.removeChild(ul.children[0])}
}

案例：刪除留言案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>簡單版發布留言案例</title><style>li {width: 300px;padding: 5px;background-color: pink;color: red;font-size: 14px;margin: 15px 0;}li a {float: right;}</style>
</head><body><textarea name="" id="" cols="30" rows="10"></textarea><button>發布</button><ul></ul><script>// 1、獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2、注冊事件btn.onclick = function () {if (text.value == '') {alert('你沒有輸入內容')return false} else {// （1）、創建元素var li = document.createElement('li');// 先有li才能賦值// 小技巧：阻止連接跳轉需要添加 javascript:void(0); 或 javascript:;li.innerHTML = text.value + "<a href='javascript:void(0)'>刪除</a>"// （2）、添加元素// ul.appendChild(li) //添加到最后// 添加到最前面ul.insertBefore(li, ul.children[0])// （3）、刪除元素 刪除的是當前鏈接的li，它的父親 this.parentNode var as = document.querySelectorAll('a')for (var i = 0; i < as.length; i++) {as[i].onclick = function () {ul.removeChild(this.parentNode);}}}}</script>
</body></html>

小技巧：阻止<a></a>連接跳轉需要添加javascript:void(0); 或 javascript:; 如：<a href='javascript:void(0);'>刪除</a>

節點操作 - 復制節點（克隆節點） `node.cloneNode()`

node.cloneNode()方法返回調用該方法的節點的一個副本。也稱為【克隆節點】或【拷貝節點】；

<ul><li>1</li><li>2</li><li>3</li>
</ul>var ul=document.querySelector('ul')
//1、克隆節點，第一個li
var lili= ul.children[0].cloneNode()//2、將克隆的第一個節點放到頁面中
ul.appendChild(lili)

注意：
（1）、如果括號參數【空】或者為【false】，則是【淺拷貝】，即只克隆復制節點本身，不克隆里面的子節點。（只復制標簽，不復制里面的內容。）node.cloneNode()
（2）、想要深拷貝，括號里面填true 即可（既復制標簽，也復制里面的內容）；node.cloneNode(true)

案例：動態生成表格

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>動態生成表格案例</title><style>table {width: 500px;margin: 100px auto;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}</style>
</head><body><table cellspacing="'0"><thead><tr><th>姓名</th><th>科目</th><th>成績</th><th>操作</th></tr></thead><tbody></tbody></table><script>// 1、先準備好學生的數據var datas = [{ name: '張三', subject: 'javaSript', score: 100 },{ name: '李四', subject: 'javaSript', score: 100 },{ name: '王五', subject: 'javaSript', score: 100 },]// 2、往 tbody 里面創建行，有幾個人（通過數組的長度）我們就創建幾行；var tbody = document.querySelector('tbody')for (var i = 0; i < datas.length; i++) { //外面的for循環管行 tr// 創建 tr 行var tr = document.createElement('tr')tbody.append(tr) //將創建的 tr 放到 tbody 里// 行里面創建單元格 td (跟數據有關系的三個單元格)，單元格的數量取決于每個對象里面的屬性個數 for循環遍歷對象for (var k in datas[i]) { //里面的for循環管列 td//創建單元格var td = document.createElement('td')// 把對象里面的屬性值 datas[i][k]  給 tdconsole.log(datas[i][k]); //對象里面的屬性值 td.innerHTML = datas[i][k];tr.append(td) //將創建好的 td 放到 tr 里               }// 3、創建有刪除2個字的單元格var td = document.createElement('td');td.innerHTML = '<a href="javascript:;">刪除</a>';tr.appendChild(td)}// 4、刪除操作var as = document.querySelectorAll('a')for (var i = 0; i < as.length; i++) {as[i].onclick = function () {// 點擊a，刪除當前a所在的行（鏈接的爸爸的爸爸）tbody.removeChild(this.parentNode.parentNode)}}// 復習：for in 遍歷對象// for(var k in obj){//     k 得到的是屬性名//     obj[k] 得到的是屬性值// }</script>
</body></html>

節點操作 - `document.write` 創建元素

三種動態創建元素的區別：

document.write 是直接將內容寫入頁面的內容流，但是文檔流執行完畢，則它會導致頁面全部重繪；（頁面上之前的元素被清除，重新創建了一個新的頁面，新頁面上只展示document.write創建的元素）

<button>點擊</button><p>abdjk</p><script>// document.write 會導致頁面重繪（頁面上之前的元素被清除，重新創建了一個新的頁面，新頁面上只展示document.write創建的元素）；（如果頁面文檔流加載完畢，再調用這句話會導致頁面重繪）var btn=document.querySelector('button')btn.onclick=function(){document.write('<div>123</div>')}
</script>

//當整個頁面都加載完了，再調用里面的函數
window.onload=function(){}

element.innerHTML 和 document.createElement 效率對比：
（1）、element.innerHTML 是將內容寫入某個DOM 節點，不會導致頁面全部重繪；創建多個元素效率更高（不是拼接字符串，而是采取數組的形式拼接），結構稍微復雜；
（2）、document.createElement 創建多個元素效率稍微低一點點，但是結構更清晰；
（3）、總結：不同瀏覽器下，element.innerHTML 效率要比 document.createElement 高；

`Dom` 重點核心總結

文檔對象模型（Document Object Model，簡稱 DOM），是W3C組織推薦的處理可擴展標記語言（HTML 或 XML）的標準【編程接口】；
W3C已經定義了一系列的DOM接口，通過這些DOM接口可以改變網頁的內容、結構和樣式；
對于 javaSript ，為了能夠使 javaSript 操作 HTML ，javaSript 就有了一套自己的 DOM 編程接口；
對于 HTML ，dom 使得 html 形成一棵 dom樹，包含文檔、元素、節點；
我們獲取過來的DOM元素是一個對象（Object），所以稱為【文檔對象模型】；
關于DOM操作，我們主要針對于【元素的操作】。主要有：創建、增、刪、改、查、屬性操作、事件操作；
創建：document.write 、innerHtml 、createElement
增：appendChild 、insertBefore
刪：removeChild
改：主要修改dom的元素屬性，dom元素的內容、屬性、表單的值等
（1）、修改元素屬性：src href title 等；
（2）、修改普通元素內容：innerHTML innerText ；
（3）、修改表單元素：value type disabled 等；
（4）、修改元素樣式：style className ；
查：主要獲取查詢dom的元素：
（1）、DOM提供的API方法：getElementById 等；
（2）、H5提供的新方法：querySelector querySelectorAll ；
（3）、利用節點操作獲取元素：父（parentNode）、子（children）、兄（previousElementSibling nextElementSibling）提倡使用；
屬性操作：主要針對于自定義屬性
（1）、setAttribute ：設置dom的屬性值；
（2）、getAttribute ：得到dom的屬性值；
（3）、removeAttribute ：移除屬性；
事件操作：給元素注冊事件，采取事件源.事件類型=事件處理程序

事件高級

注冊事件兩種方式

給元素添加事件，稱為【注冊事件】或者【綁定事件】；
注冊事件有兩種方式：【傳統方式】和【方法監聽注冊方式】；
（1）、傳統方式：利用 on 開頭的事件 onclick ；特點：注冊事件的【唯一性】，即同一個元素同一個事件只能設置一個處理函數，最后注冊的處理函數將會覆蓋前面注冊的處理函數；

<button onclick='alert("hi~")'></button>
btn.onclick=function(){}

（2）、方法監聽注冊方式：W3C標準推薦方式；addEventListener() 它是一個方法；IE9之前的IE不支持此方法，可使用attachEvent() 代替；特點：同一個元素同一個事件可以注冊多個監聽器（事件處理函數）；按注冊順序依次執行；

`addEventListener()`

事件監聽方式
eventTarget.addEventListener(type,lister[,useCapture]) 方法將指定的監聽器注冊到eventTarget（目標對象）上，當該對象觸發指定的事件時，就會執行事件處理函數；
（1）、type ：事件類型字符串，如：click mouseover 注意這里不要帶on；
（2）、listener 事件處理函數，事件發生時，會調用該監聽函數；
（3）、useCapture 可選參數，是一個布爾值，默認是false ；

//注意:事件監聽注冊事件 addEventListener 里面的事件類型是字符串，要加引號，而且不帶 on
//同一個元素，同一個事件可以添加多個偵聽器（事件處理程序）
btn.addEventListener('click',function(){})

`attachEvent` 注冊事件（IE9以前的版本支持）

eventTarget.attachEvent(eventNameWithon,callback)
eventTarget.attachEvent(eventNameWithon,callback)方法將指定的監聽器注冊到eventTarget （目標對象）上，當該對象觸發指定的事件時，指定的回調函數就會被執行；
該方法接收兩個參數：
（1）、eventNameWithon ：事件類型字符串，比如：onclick onmouseover 這里要帶 on ；
（2）、callback：事件處理函數，當目標觸發事件時回調函數被調用；

btn.attachEvent('onclick',function(){})

注冊事件兼容性解決方案（封裝兼容性函數）

兼容性處理的原則：首先照顧大多數瀏覽器，再處理特殊瀏覽器；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注冊事件兼容性解決方案</title>
</head><body><script>function addEventListener(element, eventName, fn) {// 判斷當前瀏覽器是否支持 addEventListener 方法if (element.addEventListener) {element.addEventListener(eventName, fn);//第三個參數 默認是false} else if (element.attachEvent) {element.attachEvent('on' + eventName, fn)} else {// 相當于 element.onclick = fnelement['on' + eventName] = fn}}</script>
</body></html>

刪除事件（解綁事件）

刪除事件的方式：

（1）、傳統注冊方式

eventTarget.onclick = null

<body><div>1</div><div>2</div><div>3</div><script>var divs = document.querySelectorAll('div')divs[0].onclick = function () {alert(11)//傳統方法刪除事件divs[0].onclick = null}</script>
</body>

（2）、方法監聽注冊方式

方法1：

eventTarget.removeEventListener(type,listener[,useCapture]);

<body><div>1</div><div>2</div><div>3</div><script>var divs = document.querySelectorAll('div')// removeEventListener 刪除元素divs[1].addEventListener('click', fn) //里面的 fn 不需要加小括號調用function fn() {alert(22);divs[1].removeEventListener('click', fn)}</script>
</body>

方法2：（谷歌瀏覽器不兼容）

eventTarget.detachEvent(eventNameWithOn,callback);

<div>1</div>
<div>2</div>
<div>3</div>	var divs = document.querySelectorAll('div')
divs[2].attachEvent('onclick', fn1);function fn1() {alert(33)divs[2].detachEvent('onclick', fn1)}

刪除事件兼容性解決方案

function removeEventListener(element,eventName,fn){//判斷當前瀏覽器是否支持 removeEventListener 方法if(element.removeEventListener){element.removeEventListener(eventName,fn);//第三個參數，默認是false}else if(element.detachEvent){element.detachEvent('on'+eventName,fn);}else{element['on'+eventName]=null;}
}

DOM事件流

事件流描述的是從頁面中接收事件的順序；
事件發生時會在元素節點之間按照待定的順序傳播，這個傳播過程即DOM事件流；
注意：
（1）、JS代碼中只能執行捕獲或者冒泡其中的一個階段；
（2）、onclick 和 attachEvent 只能得到冒泡階段；
（3）、addEventListener(type,listener[,useCapture]) 第三個參數如果是 true ，表示在事件捕獲階段調用事件處理程序；如果是false （不寫默認是false），表示在事件冒泡階段調用事件處理程序；
（4）、實際開發中我們很少使用事件捕獲，更關注事件冒泡；
（5）、有些事件是沒有冒泡的，比如：onblur onfocus onmouseenter onmouseleave；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM事件流</title><style>.father {width: 200px;height: 200px;background-color: aqua;}.son {width: 100px;height: 100px;background-color: blueviolet;margin: 0 auto;}</style>
</head><body><div class="father"><div class="son">son盒子</div></div><script>/*DOM事件流 三個階段:1、JS代碼中只能執行捕獲或者冒泡其中的一個階段；2、onclick 和 attachEvent（ie）只能得到冒泡階段；3、捕獲階段 如果 addEventListener 第三個參數是 true 那么則處于捕獲階段；document->html->body->father->son*/// var son = document.querySelector('.son')// son.addEventListener('click', function () {//     alert('son')// }, true)// var father = document.querySelector('.father')// father.addEventListener('click', function () {//     alert('father')// }, true)// 4、冒泡階段 如果 addEventListener 第三個參數是 false 或者省略， 那么則處于冒泡階段；son->father->body->html->documentvar son = document.querySelector('.son')son.addEventListener('click', function () {alert('son')}, false)var father = document.querySelector('.father')father.addEventListener('click', function () {alert('father')}, false)document.addEventListener('click', function () {alert('document')})</script>
</body></html>

事件對象

eventTarget.onclick=function(event){} 
eventTarget.addEventListener('click',function(event){})

這個event 就是事件對象，我們還喜歡寫成 e 或者 evt；
這個event是個形參，系統幫我們設定為事件對象，不需要傳遞實參過去；
當我們注冊事件時，event對象就會被系統自動創建，并依次傳遞給事件監聽器（事件處理函數）；
官方解釋：event 對象代表事件的狀態，比如鍵盤按鈕的狀態、鼠標的位置、鼠標按鈕的狀態；
簡單解釋：事件發生后，跟事件相關的一系列信息數據的集合都放到這個對象里面，這個對象就是事件對象event，它有很多屬性和方法；比如：誰綁定了這個事件；鼠標觸發事件的話，會得到鼠標的相關信息，如鼠標位置；鍵盤觸發事件的話，會得到鍵盤的相關信息，如按了哪個鍵；
在IE6~8中，瀏覽器不會給方法傳遞參數，如果需要的話，需要到window.event中獲取查找；解決：
e=e || window.event

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件對象</title>
</head><body><div>123</div><script>var div = document.querySelector('div')div.onclick = function (event) {console.log(event);}div.addEventListener('click', function (event) {console.log(event);})/*1、event 就是一個事件對象，寫到我們偵聽函數的 小括號里面，當形參來看；2、事件對象只有有了事件才會存在，它是系統給我們自動創建的，不需要我們傳遞參數；3、事件對象是我們事件的一系列相關數據的集合，跟事件相關的；比如鼠標點擊里面就包含了鼠標的相關信息，鼠標坐標；如果是鍵盤事件，里面就包含了鍵盤事件的信息，比如：判斷用戶按下了哪個鍵；4、這個事件對象我們可以自己命名，比如：event、evt、e；5、事件對象也有兼容性問題，ie678通過 window.event 獲取；兼容性寫法：e=e || window.event；*/        </script>
</body></html>

事件對象的常見屬性和方法

1、`target` 和 `this` 區別

（1）、e.target 返回的是觸發事件的對象（元素）；

<body><div>123</div><ul><li>abc</li><li>abc</li><li>abc</li></ul><script>var div=document.querySelector('div')div.addEventListener('click',function(e){console.log(e.target); //<div>123</div>console.log(this); //<div>123</div>})</script>
</body>

注意：this 返回的是綁定事件的對象（元素）；

<body><div>123</div><ul><li>abc</li><li>abc</li><li>abc</li></ul><script>var div = document.querySelector('div')div.addEventListener('click', function (e) {console.log(e.target); //<div>123</div>console.log(this); //<div>123</div>})var ul = document.querySelector('ul')ul.addEventListener('click', function (e) {//我們給ul綁定了事件，那么 this 就指向 ulconsole.log(this);//<ul><ul>// 注意：此處沒有寫第三個參數，所以默認是false（冒泡），li 沒有綁定點擊事件，點擊的是 li ，li沒找到事件就往上找，這是冒泡；console.log(e.currentTarget);// 了解：跟 this 有個非常相似的屬性 currentTarget （IE678不兼容）console.log(e.target);//<li><li>})/*區別：e.target 點擊了哪個元素，就返回哪個元素；this 哪個元素綁定了這個點擊事件，那么就返回誰；*/ // 考慮兼容性問題的寫法div.onclick = function (e) {e = e || window.event;var target = e.target || e.srcElement;console.log(target);}</script>
</body>

2、`e.type`

<body><div>123</div><a href="http://www.baidu.com">百度</a><form action="http://www.baidu.com"><input type="submit" value="提交" name="sub"></form><script>// 常見事件對象的屬性和方法// 返回事件類型var div = document.querySelector('div')div.addEventListener('click', fn);div.addEventListener('mouseover', fn)div.addEventListener('mouseout', fn)function fn(e) {console.log(e.type);}</script>
</body>

3、事件對象阻止默認行為

<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com"><input type="submit" value="提交" name="sub">
</form>// 阻止默認行為（事件）:讓鏈接不跳轉，或者讓提交按鈕不提交；
var a=document.querySelector('a');
a.addEventListener('click',function(e){e.preventDefault();//DOM推薦的標準寫法（低版本IE瀏覽器不支持）
})
// 傳統的注冊方式
a.click = function (e) {// 普通瀏覽器 e.preventDefault();---> 方法e.preventDefault()// 低版本瀏覽器 ie678 用 returnValue ---> 屬性e.returnValue;/*我們可以利用 return false ,也能阻止默認行為，而且沒有兼容性問題；特點：return后面的代碼不執行了，而且只限于傳統的注冊方式；*/ return false
}

4、阻止事件冒泡

事件冒泡：開始時由最具體的元素接收，然后逐級向上傳播到DOM最頂層節點；事件冒泡本身的特性，會帶來的壞處，也會帶來好處，需要我們靈活掌握；
阻止事件冒泡：標準寫法：利用事件對象里面的stopPropagation() 方法；

<body><div class="father"><div class="son">son盒子</div></div><script>var son = document.querySelector('.son')son.addEventListener('click', function (e) {alert('son')e.stopPropagation(); //stop停止  propagation 傳播 ；有兼容性問題e.cancelBubble=true;// 低版本IE瀏覽器}, false)var father = document.querySelector('.father')father.addEventListener('click', function () {alert('father')}, false)document.addEventListener('click', function () {alert('document')})if(e && e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;}</script>
</body>

5、事件委托（代理、委派）

ul里面有多個li，點擊每個li都會彈出對話框，以前需要給每個li注冊事件，是非常辛苦的，而且訪問DOM的次數越多，這就會延長整個頁面的交互就緒時間；
事件委托：也稱為事件代理，在jQuery里面稱為事件委派；
事件委托的原理：不是每個子節點單獨設置事件監聽器，而是事件監聽器設置在其父節點上，然后利用冒泡原理影響設置每個子節點。以上案例：給ul注冊點擊事件，然后利用事件對象的target 來找到當前點擊的li，因為點擊li，事件會冒泡到ul上，ul有注冊事件，就會觸發事件監聽器；
事件委托的作用：我們只操作了一次DOM ，提高了程序的性能；

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var ul = document.querySelector('ul')ul.addEventListener('click', function fn(e) {// alert('被點擊了')// e.target 可以得到我們點擊的對象e.target.style.backgroundColor = 'pink'})</script>
</body>

6、常用的鼠標事件

event 對象代表事件的狀態，跟事件相關的一系列信息的集合。現階段我們主要是用鼠標事件對象MouseEvent和鍵盤事件對象KeyboardEvent；
禁止鼠標右鍵菜單：contextmenu 主要控制應該何時顯示上下文菜單，主要用于程序員取消默認的上下文菜單；

document.addEventListener('contextmenu',function(e){e.preventDefault();
})

禁止鼠標選中：selectstart 開始選中；

document.addEventListener('selectstart',function(e){e.preventDefault();
})

<body>我是一段不愿意分享的文字<script>// contextmenu 可以禁用右鍵菜單document.addEventListener('contextmenu', function (e) {e.preventDefault();})// 禁止選中文字 selectstartdocument.addEventListener('selectstart', function (e) {e.preventDefault();})</script>
</body>

獲得鼠標在頁面中的坐標：鼠標事件對象MouseEvent

<script>// 鼠標事件對象 MouseEventdocument.addEventListener('click', function (e) {// 1、client 鼠標在可視區的x和y坐標console.log(e.clientX);console.log(e.clientY);// 2、page 鼠標在頁面文檔的x和y坐標console.log(e.pageX);console.log(e.pageY);// 3、screen 鼠標在電腦屏幕的x和y坐標console.log(e.screenX);console.log(e.screenY);})</script>

案例：跟隨鼠標的天使

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>跟隨鼠標的天使</title><style>img {position: absolute;}</style>
</head><body><img src="./images/angel.gif" alt=""><script>/*1、鼠標不斷的移動，使用鼠標移動事件：mousemove；2、在頁面中移動，給 document 注冊事件；3、圖片要移動距離，而且不占位置，我們使用絕對定位即可；4、核心原理：每次鼠標移動，我們都會獲得最新的鼠標坐標，把這個 x 和 y 坐標作為圖片的 top 和 left 值就可以移動圖片；*/var pic = document.querySelector('img')document.addEventListener('mousemove', function (e) {// mousemove 只要我們鼠標移動1px，就會觸發這個事件；var x = e.pageX;var y = e.pageY;console.log('x坐標是' + x, 'y坐標是' + y);// 注意：千萬不要忘記給 left 和 top 添加 px 單位；// 減50和40是減去圖片的長和寬的一半，從而使鼠標箭頭的位置處于圖片的中心；pic.style.left = x - 50 + 'px';pic.style.top = y - 40 + 'px';})</script>
</body></html>

7、常用的鍵盤事件

三個事件的執行順序：keydown --> keypress --> keyup
利用keyCode 判斷用戶按下哪個鍵；
鍵盤事件對象中的keyCode屬性可以得到相應鍵的ASCII值碼；

<body><script>// 鍵盤事件對象中的 keyCode 屬性可以得到相應鍵的 ASCII 碼值；// 1、我們的 keyup 和 keydown 事件不區分字母大小寫；例如：a 和 A 得到的都是65；// 2、我們的 keypress 事件，區分字母大小寫；例如：a 得到的都是 97 和 A 得到的都是 65；document.addEventListener('keyup', function (e) {console.log(e);console.log('up:' + e.keyCode);if (e.keyCode === 65) {alert('按下了a鍵')} else {alert('沒有按下a鍵')}})document.addEventListener('keypress', function (e) {console.log(e);console.log('press:' + e.keyCode);})</script>
</body>

案例：模擬京東按鍵輸入內容

<body><input type="text"><script>/*1、核心思路：檢測用戶是否按下了s鍵，如果按下s鍵，就把光標定位到搜索框里面；2、使用鍵盤事件對象里面的keyCode判斷用戶按下的是否是s鍵；3、搜索框獲得焦點：使用js里面的 focus() 方法；*/var search = document.querySelector('input')document.addEventListener('keyup', function (e) {//此處用keydowm會把s填入輸入框console.log(e.keyCode);if (e.keyCode === 83) {search.focus();}})</script>
</body>

案例：模擬京東快遞單號查詢

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模擬京東快遞單號查詢</title><style>body,html {margin: 0;padding: 0;}.search {position: relative;width: 178px;margin: 100px;}.con {display: none;position: absolute;top: -40px;width: 171px;border: 1px solid rgba(0, 0, 0, .2);box-shadow: 0 2px 4px rgba(0, 0, 0, .2);padding: 5px 0;font-size: 18px;line-height: 20px;color: #333;}.con::before {  /* 倒三角形 */content: '';width: 0;height: 0;position: absolute;top: 28px;left: 18px;border: 8px solid #000;border-style: solid dashed dashed;border-color: #fff transparent transparent;}</style>
</head><body><!-- 案例分析：（1）、快遞單號輸入內容時，上面的大號字體盒子（con）顯示（這里面的字號更大）；（2）、表單檢測用戶輸入：給表單添加鍵盤事件；（3）、同時把快遞快遞單號里面的值（value）獲取過來賦值給con盒子（innerText）作為內容；注意：keydown 和 keypress 在文本框里的特點：他們兩個事件觸發的時候，文字還沒有落入文本框中；keyup 事件觸發的時候，文字已經落入文本框里面了；--><div class="search"><div class="con">123</div><input type="text" placeholder="請輸入您的快遞單號" class="jd"></div><script>var con = document.querySelector('.con');var jd_input = document.querySelector('.jd');jd_input.addEventListener('keyup', function () {if (this.value === '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerText = this.value;}})//當我們失去焦點，就隱藏這個con盒子jd_input.addEventListener('blur', function () {con.style.display = 'none'})//當我們獲得焦點，就顯示這個con盒子jd_input.addEventListener('focus', function () {if (this.value !== '') {con.style.display = 'block'}})        </script>
</body></html>

總結

以上是生活随笔為你收集整理的JavaScript教程（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：牛客题霸 [在转动过的有序数组中寻找目标
下一篇： WindowsServer2012史记6