當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

JavaScript教程（一）

發(fā)布時(shí)間：2023/12/3 综合教程 32 生活家

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

計(jì)算機(jī)語言

機(jī)器語言、匯編語言和高級語言

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

【編程語言】和【標(biāo)記語言】的區(qū)別？

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

計(jì)算機(jī)基礎(chǔ)

計(jì)算機(jī)組成

數(shù)據(jù)存儲

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

數(shù)據(jù)存儲單位

程序運(yùn)行

初識JavaScript

JavaScript簡介

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

瀏覽器執(zhí)行JS簡介

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

JS組成

ECMAScript

DOM

BOM

JS的輸入和輸出語句

變量

什么是變量？

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

變量在內(nèi)存中的存儲

本質(zhì)：變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間；

變量的使用

變量在使用時(shí)分為兩步：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、輸入用戶姓名，存儲到一個(gè) myName 的變量中var myName = prompt('請輸入用戶名')// 2、輸出這個(gè)用戶名alert(myName)</script>
</body></html>

變量的語法擴(kuò)展

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

變量的命名規(guī)范

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

案例：顯示年齡案例

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

數(shù)據(jù)類型

為什么需要數(shù)據(jù)類型？

變量的數(shù)據(jù)類型

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

數(shù)據(jù)類型的分類

數(shù)據(jù)類型轉(zhuǎn)換

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

隱式轉(zhuǎn)換

【隱式轉(zhuǎn)換】是我們在進(jìn)行算數(shù)運(yùn)算的時(shí)候，JS自動轉(zhuǎn)換了數(shù)據(jù)類型；

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

案例：計(jì)算年齡案例

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

案例：簡單加法器案例

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

補(bǔ)充：解釋型語言和編譯型語言

運(yùn)算符（算數(shù)運(yùn)算符、遞增和遞減運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、賦值運(yùn)算符）

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

補(bǔ)充：表達(dá)式和返回值

表達(dá)式：是由數(shù)字、運(yùn)算符、變量等以能求得數(shù)值的有意義排列方法所得的組合；簡單理解：是由數(shù)字、運(yùn)算符、變量等組成的式子；【表達(dá)式最終都會有一個(gè)結(jié)果，返回給我們，我們稱之為返回值?！?/li>

短路運(yùn)算（邏輯中斷）

短路運(yùn)算的原理：當(dāng)有多個(gè)表達(dá)式（值）時(shí)，左邊的表達(dá)式值可以確定結(jié)果時(shí)，就不再繼續(xù)運(yùn)算右邊的表達(dá)式的值；

邏輯與

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

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

賦值運(yùn)算符

概念：用來把數(shù)據(jù)賦值給變量的運(yùn)算符；

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

運(yùn)算符優(yōu)先級

一元運(yùn)算符里面的邏輯非（!）優(yōu)先級很高；
邏輯與比邏輯或優(yōu)先級高；

流程控制（順序結(jié)構(gòu)、分支結(jié)構(gòu)、循環(huán)結(jié)構(gòu)）

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

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

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

<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>

案例：數(shù)字補(bǔ)零

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

`switch`語句

當(dāng)要針對變量設(shè)置一系列的特定值的選項(xiàng)時(shí)，就可以用switch語句；
switch是轉(zhuǎn)換、開關(guān)的意思；case小例子或者選項(xiàng)的意思；
語法結(jié)構(gòu)：

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

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

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

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

案例：查詢水果案例

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

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

流程控制-循環(huán)（`for`循環(huán)、`while`循環(huán)、`do while`循環(huán)）

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

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

for循環(huán)可以重復(fù)執(zhí)行不同的代碼，因?yàn)槲覀冇杏?jì)數(shù)器變量i的存在，i每次循環(huán)值都會變化；

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

for循環(huán)重復(fù)某些相同操作。for循環(huán)因?yàn)橛辛擞?jì)數(shù)器的存在，我們還可以重復(fù)的執(zhí)行某些操作，比如做一些算術(shù)運(yùn)算；

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

<body><!-- 案例分析：1、需要循環(huán)100次，我們需要一個(gè)計(jì)數(shù)器i；2、我們需要一個(gè)存儲結(jié)果的變量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循環(huán)案例

 <script>// 1、求1-100之間所有數(shù)的平均值；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之間所有偶數(shù)和奇數(shù)的和；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整除的數(shù)字的和；var result = 0;for (var i = 1; i <= 100; i++) {if (i % 3 == 0) {result = result + i;}}console.log(result);//1683</script>

案例：求學(xué)生成績案例

<body><!-- 要求用戶輸入班級人數(shù)，之后依次輸入每個(gè)學(xué)生的成績，最后打印出該班級總的成績以及平均成績 --><script>var num = prompt('請輸入班級總?cè)藬?shù):');var sum = 0;var average = 0;for (var i = 1; i <= num; i++) {var score = prompt('請輸入第' + i + '個(gè)學(xué)生成績');// 因?yàn)閺膒rompt取過來的數(shù)據(jù)是 字符串型的 需要裝換為 數(shù)字型；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('請輸入星星個(gè)數(shù)');var str = '';for (var i = 0; i < num; i++) {str = str + '⭐';}console.log(str);

雙重`for`循環(huán)

循環(huán)嵌套是指在一個(gè)循環(huán)語句中再定義一個(gè)循環(huán)語句的語法結(jié)構(gòu)，例如在for循環(huán)語句中，可以再嵌套一個(gè)for循環(huán)，這樣的for循環(huán)語句我們稱之為雙重for循環(huán)；
我們可以把里面的循環(huán)看作是外層循環(huán)的語句；
外層的循環(huán)循環(huán)一次，里面的循環(huán)執(zhí)行全部；

案例：打印5行5列星星

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

案例：打印n行n列星星

 <script>var row = prompt('請輸入行數(shù)');var column = prompt('請輸入列數(shù)');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`循環(huán)

語法結(jié)構(gòu)：while(條件表達(dá)式){循環(huán)體}；
執(zhí)行思路：當(dāng)條件表達(dá)式結(jié)果為true，則執(zhí)行循環(huán)體；否則，退出循環(huán)；
代碼驗(yàn)證：

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

里面應(yīng)該也有計(jì)數(shù)器，初始化變量；
里面應(yīng)該也有操作表達(dá)式，完成計(jì)數(shù)器的更新，防止死循環(huán)；

`while`循環(huán)案例

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

`dowhile`循環(huán)

dowhile語句其實(shí)是while語句的一個(gè)變體。該循環(huán)會先執(zhí)行一次代碼塊，然后對條件表達(dá)式進(jìn)行判斷，如果條件為真，就會重復(fù)執(zhí)行循環(huán)體，否則退出循環(huán)；
語法結(jié)構(gòu)：

do{//循環(huán)體
}while(條件表達(dá)式)

執(zhí)行思路：跟while不同的地方在于dowhile先執(zhí)行一次循環(huán)體，再判斷條件；如果條件表達(dá)式結(jié)果為真，則繼續(xù)執(zhí)行循環(huán)體，否則退出循環(huán)；

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

dowhile語句至少會執(zhí)行一次循環(huán)體代碼；

`dowhile`案例

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

循環(huán)小結(jié)

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

`continue`和`break`關(guān)鍵字

`continue`關(guān)鍵字

用于【立即跳出本次循環(huán)，繼續(xù)下一次循環(huán)】（本次循環(huán)體中continue之后的代碼就會少執(zhí)行一次）；

`continue`關(guān)鍵字案例

 <script>// continue關(guān)鍵字（退出本次，即當(dāng)前次的循環(huán)；繼續(xù)執(zhí)行剩余次的循環(huán)）// for (var i = 1; i <= 5; i++) {//     if (i === 3) {//         continue; // 只要遇到continue就退出本次循環(huán)，直接跳到//     }//     console.log(i);//1 2 4 5// }// 案例：求1~100之間，除了能被7整除之外的整數(shù)和；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`關(guān)鍵字

break關(guān)鍵字用于立即跳出整個(gè)循環(huán)（循環(huán)結(jié)束）；

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

數(shù)組

案例：求數(shù)組最大值

<script>// 求數(shù)組[2,6,1,77,52,25,7]中的最大值；/*案例分析：（1）、聲明一個(gè)保存最大元素的變量max；（2）、默認(rèn)最大值可以取數(shù)組中的第一個(gè)元素；（3）、遍歷這個(gè)數(shù)組，把里面每個(gè)數(shù)組元素和max相比較；（4）、如果這個(gè)數(shù)組元素大于max就把這個(gè)數(shù)組元素存到max里面，否則繼續(xù)下一輪比較；（5）、最后輸出這個(gè)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>

數(shù)組中新增元素

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

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

案例：新建一個(gè)數(shù)組，里面存放10個(gè)整數(shù)（1-10）

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

案例：篩選數(shù)組

方法一：

<script>// 將數(shù)組[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素選出來，放入新數(shù)組；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++) {// 新數(shù)組應(yīng)該從0開始，一次遞增；if (arr[i] >= 10) {// arr1[i] = arr[i]; //[empty × 4, 77, empty, 52, empty, 25] 原因：從第四個(gè)開始有值，當(dāng)i=1，2，3時(shí)是沒有值存進(jìn)去的；arr1[j] = arr[i];j++; //[77, 52, 25]}}console.log(arr1);</script>

方法二：

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

案例：數(shù)組去重

<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結(jié)構(gòu)不能接收重復(fù)數(shù)據(jù)的特點(diǎn)；for(var val of mySet){newArr.push(val);}console.log(newArr);</script>

案例：翻轉(zhuǎn)數(shù)組

<script>// 要求：將數(shù)組['red','green','pink','blue',purper]的內(nèi)容反過來存放；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>

復(fù)習(xí)：交換兩個(gè)變量

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

案例：數(shù)組排序（冒泡排序）

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

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

函數(shù)

函數(shù)導(dǎo)讀

函數(shù)：函數(shù)就是封裝了一段可以被重復(fù)執(zhí)行調(diào)用的代碼塊；目的就是讓大量代碼重復(fù)使用；
函數(shù)使用分為兩步：【聲明函數(shù)】和【調(diào)用函數(shù)】；

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

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

案例：利用函數(shù)求1~100的累加和

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

函數(shù)的參數(shù)

我們可以利用函數(shù)的參數(shù)實(shí)現(xiàn)函數(shù)重復(fù)不同的代碼；
【形參】和【實(shí)參】；

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

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

案例：利用函數(shù)求任意兩個(gè)數(shù)的和以及累加和

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

注意點(diǎn)：
（1）、多個(gè)參數(shù)之間用逗號隔開；
（2）、形參可以看作是不用聲明的變量；

函數(shù)的形參和實(shí)參匹配問題

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

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

函數(shù)的返回值`return`

有時(shí)候，我們會希望函數(shù)將值返回給調(diào)用者，此時(shí)通過使用return語句就可以實(shí)現(xiàn)；

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

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

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

案例：求任意兩個(gè)數(shù)的和

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

案例：利用函數(shù)求兩個(gè)數(shù)的最大值

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

案例：利用函數(shù)求數(shù)組中的最大值

<script>// var arr=[5,2,99,101,67,77];function getArrMax(arr) {// arr 接收一個(gè)數(shù)組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]));//實(shí)參是一個(gè)數(shù)組送過去  var re = getArrMax([5, 2, 99, 101, 67, 77]);console.log(re);</script>

`return`終止函數(shù)并且只能返回一個(gè)值

return終止函數(shù)，return語句之后的代碼不被執(zhí)行；

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

return只能返回一個(gè)值。如果用逗號隔開多個(gè)值，以最后一個(gè)為準(zhǔn)；

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

我們求任意兩個(gè)數(shù)的加減乘除結(jié)果：

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

函數(shù)沒有`return`，返回`undefined`；

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

`break`、`continue`、`return`的區(qū)別

arguments 的使用

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

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

函數(shù)的兩種聲明方式

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

`arguments` 案例：利用函數(shù)求任意幾個(gè)數(shù)的最大值

 <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>

案例：利用函數(shù)封裝方式，翻轉(zhuǎn)任意一個(gè)數(shù)組

<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>

案例：利用函數(shù)封裝冒泡排序

<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>

案例：運(yùn)用函數(shù)封裝判斷閏年

 <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>

函數(shù)可以調(diào)用另外一個(gè)函數(shù)

因?yàn)槊總€(gè)函數(shù)都是獨(dú)立的代碼塊，用于完成特殊任務(wù)，因此經(jīng)常會用到函數(shù)相互調(diào)用的情況；

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

一個(gè)函數(shù)調(diào)用另外一個(gè)函數(shù)案例：用戶輸入年份，輸出當(dāng)前年份2月份的天數(shù)

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

Javascript作用域

作用域概述：

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

變量的作用域：

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

全局變量：

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

局部變量：

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

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

全局變量只有瀏覽器關(guān)閉的時(shí)候才會銷毀，比較占內(nèi)存資源；
局部變量當(dāng)我們程序執(zhí)行完畢就會銷毀，比較節(jié)約內(nèi)存資源；

塊級作用域：

用 {} 包裹

作用域鏈：

內(nèi)部函數(shù)訪問外部函數(shù)的變量，采取的是鏈?zhǔn)讲檎业姆绞絹頉Q定取哪個(gè)值，這種結(jié)構(gòu)我們稱為作用域鏈。（就近原則）

只要是代碼，就至少有一個(gè)作用域；
寫在函數(shù)內(nèi)部的局部作用域；
如果函數(shù)中還有函數(shù)，那么在這個(gè)作用域中就又可以誕生一個(gè)作用域；
根據(jù)在內(nèi)部函數(shù)可以訪問外部函數(shù)變量的這種機(jī)制，用鏈?zhǔn)讲檎覜Q定哪些數(shù)據(jù)能被內(nèi)部函數(shù)訪問，就稱為【作用域鏈】；

預(yù)解析

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

變量提升：

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

函數(shù)提升：

就是把所有的函數(shù)聲明提升到當(dāng)前作用域的最前面，不調(diào)用函數(shù)；

// 1問
console.log(num) // 報(bào)錯(cuò)// 2問
console.log(num) // undefined  坑1
var num=10
// 相當(dāng)于執(zhí)行了以下代碼
var num ;
console.log(num)
num=10// 3問
fn() // 11
function fn(){console.log(11) 
}
fn() // 11// 4問
fun() // 報(bào)錯(cuò) fun is not a function
var fun=function(){ // 函數(shù)表達(dá)式 調(diào)用必須寫在函數(shù)表達(dá)式的下面console.log(22) 
}
fun() // 22
//相當(dāng)于執(zhí)行了以下代碼
var fun ;
fun();
fun=function(){console.log(22) 
}

注意：

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

對象

什么是對象？

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

為什么需要對象？

保存一個(gè)值時(shí)，可以使用變量；保存多個(gè)值（一組值）時(shí)，可以使用數(shù)組。JS中的對象表達(dá)結(jié)構(gòu)更清晰，更強(qiáng)大。

創(chuàng)建對象的三種方式

1、利用【字面量】創(chuàng)建對象；

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

2、利用【new Object】創(chuàng)建對象；

3、利用【構(gòu)造函數(shù)】創(chuàng)建對象；

我們?yōu)槭裁葱枰褂脴?gòu)造函數(shù)？就是因?yàn)槲覀兦懊鎯煞N創(chuàng)建對象的方式一次只能創(chuàng)建一個(gè)對象；我們一次創(chuàng)建一個(gè)對象，里面很多的屬性和方法是大量相同的，我們只能復(fù)制；因此，我們可以利用函數(shù)的方法，重復(fù)這些相同的代碼，我們就把這個(gè)函數(shù)稱為構(gòu)造函數(shù)。又因?yàn)檫@個(gè)函數(shù)不一樣，里面封裝的不是普通代碼，而是【對象】。
構(gòu)造函數(shù)：就是把我們對象里面一些相同的屬性和方法抽象出來，封裝到函數(shù)里面；
構(gòu)造函數(shù)： 是一種特殊的函數(shù)，主要用來初始化對象，即為對象成員變量賦初始值，它總與new運(yùn)算符一起使用。我們可以把對象中一些公共的屬性和方法抽取出來，然后封裝到這個(gè)函數(shù)里面。

//構(gòu)造函數(shù)的語法格式
function 構(gòu)造函數(shù)名(){this.屬性=值this.方法=functon(){}
}
new 構(gòu)造函數(shù)名() //調(diào)用構(gòu)造函數(shù)

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

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

構(gòu)造函數(shù)和對象的區(qū)別？

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

new關(guān)鍵字執(zhí)行過程（new在執(zhí)行時(shí)會做四件事）

1、new構(gòu)造函數(shù)可以在內(nèi)存中創(chuàng)建了一個(gè)空的對象；
2、this就指向剛才創(chuàng)建的空對象；
3、執(zhí)行構(gòu)造函數(shù)里面的代碼，給這個(gè)空對象添加屬性和方法；
4、返回這個(gè)新對象（所以構(gòu)造函數(shù)里面不需要return）；

遍歷對象屬性：`for...in`語句用于對【數(shù)組】或者【對象的屬性】進(jìn)行【循環(huán)】操作；

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

小結(jié)：

對象可以讓代碼結(jié)構(gòu)更清晰；
對象是復(fù)雜數(shù)據(jù)類型 Object；
對象的本質(zhì)：就是一組無序的相關(guān)屬性和方法的集合；
構(gòu)造函數(shù)泛指某一大類，比如蘋果，不管是紅色蘋果還是綠色蘋果，都統(tǒng)稱為蘋果；
對象實(shí)例特指一個(gè)事物，比如這個(gè)蘋果等；
for in語句用于對對象的屬性進(jìn)行循環(huán)操作；

【變量】【屬性】【函數(shù)】【方法】的區(qū)別

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

JavaScript內(nèi)置對象

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

//利用對象封裝自己的數(shù)學(xué)對象，里面有 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;}
}

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

日期對象（`Date()`）

日期對象是一個(gè)構(gòu)造函數(shù)，必須使用new來調(diào)用創(chuàng)建我們的日期對象；
使用Date()，如果沒有參數(shù)，返回當(dāng)前系統(tǒng)的當(dāng)前時(shí)間；
參數(shù)常用的寫法：數(shù)字型：2019,10,01或者是字符串型：2019-10-1 8:8:8

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

//封裝一個(gè)函數(shù)返回當(dāng)前的時(shí)分秒，格式：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())

倒計(jì)時(shí)案例：

數(shù)組

字符串

基本包裝類型

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

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

字符串的不可變

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

// 案例：查找字符串“abcoefoxyozzopp”中所有o出現(xiàn)的位置以及次數(shù)；
/*
核心算法：先查找第一個(gè)o出現(xiàn)的位置，然后，只要 indexOf 返回的結(jié)果不是 -1，就繼續(xù)往后查找；因?yàn)?indexOf 只能查找到第一個(gè)，所以后面的查找一定是當(dāng)前索引加1，從而繼續(xù)查找；
*/ 
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出現(xiàn)的次數(shù)是' + num)

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

// 有一個(gè)對象，判斷該對象里有沒有該屬性 對象['屬性名']
var o={age:18
}
if(o['age']){console.log('里面有該屬性')
}else{console.log('里面沒有該屬性')
}
// 案例：統(tǒng)計(jì)字符串 'abcoefoxyozzopp' 中出現(xiàn)次數(shù)最多的字符 
/*
核心算法：利用 charAt() 遍歷這個(gè)字符串；把每個(gè)字符都存儲給對象，如果對象沒有該屬性，就為1，如果存在了就 +1；遍歷對象，得到最大值和該字符；
*/
var str = 'abcoefoxyozzopp';
var o ={}
for(var i=0;i<str.length;i++){var charts=str.charAt(i) // charts 是字符串的每一個(gè)字符if(o[charts]){ //o[charts]得到的是屬性值o[charts]++}else{o[charts]=1}
}
console.log(o)
// 遍歷對象，求出出現(xiàn)最多的次數(shù)
var max = 0;
var ch = '';//統(tǒng)計(jì)出現(xiàn)次數(shù)最多的字符
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('被替換的字符','替換為的字符')，只會替換第一個(gè)字符；

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

JavaScript簡單數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型

數(shù)據(jù)類型內(nèi)存分配

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

堆和棧

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

簡單類型傳參（簡單數(shù)據(jù)類型傳參傳值，復(fù)雜數(shù)據(jù)類型傳參傳地址）

函數(shù)的形參也可以看做是一個(gè)變量，當(dāng)我們把一個(gè)值類型變量作為參數(shù)傳給函數(shù)的形參時(shí)，其實(shí)是把變量在?？臻g里的值復(fù)制了一份給形參，那么在方法內(nèi)部對形參做任何修改，都不會影響到外部的變量；

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

復(fù)雜類型傳參

函數(shù)的形參也可以看作是一個(gè)變量，當(dāng)我們把引用類型變量傳給形參時(shí)，其實(shí)是把變量在?？臻g里保存的堆地址復(fù)制給了形參，形參和實(shí)參其實(shí)保存的是同一個(gè)堆地址，所以操作的是同一個(gè)對象。

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

Web APIs和JS基礎(chǔ)

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

Dom

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

事件

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

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

操作元素

JavaScript的DOM操作可以改變網(wǎng)頁內(nèi)容、結(jié)構(gòu)和樣式，我們可以利用DOM操作元素來改變元素里面的內(nèi)容、屬性等。注意以下都是屬性；

改變元素內(nèi)容

element.innerText從起始位置到終止位置的內(nèi)容，但它取出html標(biāo)簽，同時(shí)空格和換行也會去掉；（不識別html標(biāo)簽）非標(biāo)準(zhǔn) 去除空格和換行

<button>點(diǎn)擊改變時(shí)間</button>
<div>寫死的時(shí)間</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起始位置到終止位置的全部內(nèi)容，包括html標(biāo)簽，同時(shí)保留空格和換行；（識別html標(biāo)簽）W3C標(biāo)準(zhǔn) 保留空格和換行

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

這兩個(gè)屬性是可讀寫的，可以獲取元素里面的內(nèi)容。

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

修改元素屬性

常用元素的屬性操作

innerText、innerHTML改變元素內(nèi)容；
src、href；
id、alt、title；

//案例：分時(shí)問候案例
<img src="./images/shangwu.jpg" alt="">
<div>上午好</div><script>// 獲取元素var img = document.querySelector('img')var div = document.querySelector('div')// 得到當(dāng)前的小時(shí)數(shù)var date = new Date();var h = date.getHours();// 判斷小時(shí)數(shù)改變圖片和文字信息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 指向的是事件函數(shù)的調(diào)用者}

//案例：仿京東顯示隱藏密碼明文案例
<!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變量記錄點(diǎn)擊var flag = 0eye.onclick = function () {// 點(diǎn)擊一次過后，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： 計(jì)數(shù)器思想記錄點(diǎn)擊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行內(nèi)樣式操作；
element.className類名樣式操作；
注意：JS里面的樣式采取駝峰命名法，比如：fontSize backgroundColor；JS修改style樣式操作，產(chǎn)生的是行內(nèi)樣式，CSS權(quán)重比較高；

循環(huán)精靈圖背景

//案例：循環(huán)精靈圖背景；可以利用for循環(huán)設(shè)置一組元素的精靈圖背景。
<!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>循環(huán)遍歷精靈圖</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 就是每個(gè) li 的背景y坐標(biāo)，index就是我們的y坐標(biāo)；for (var i = 0; i < lis.length; i++) {var index = i * 24 //我這張精靈圖是24lis[i].style.backgroundPosition = '0-' + index + 'px'//精靈圖的y坐標(biāo)是負(fù)的;x坐標(biāo)永遠(yuǎn)是0//lis[i].style.backgroundPosition = '0 0' //全部展示第一張圖片//lis[i].style.backgroundPosition = '0 -24px' //全部展示第二張圖片}</script>
</body></html>

案例：當(dāng)鼠標(biāo)點(diǎn)擊文本框時(shí)，里面的默認(rèn)文字隱藏；當(dāng)鼠標(biāo)離開文本框時(shí)，里面的文字顯示；

//案例：當(dāng)鼠標(biāo)點(diǎn)擊文本框時(shí)，里面的默認(rèn)文字隱藏；當(dāng)鼠標(biāo)離開文本框時(shí)，里面的文字顯示；
//`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>顯示隱藏文本框內(nèi)容案例</title><style>input {color: #999;}</style>
</head><body><input type="text" value="手機(jī)"><script>var text = document.querySelector('input')text.onfocus = function () {console.log('得到了焦點(diǎn)');if (this.value === '手機(jī)') {this.value = ''}this.style.color = '#333'//獲得焦點(diǎn)時(shí)把文本框里的文字的顏色變深}text.onblur = function () {console.log('失去了焦點(diǎn)');if (this.value === '') {this.value = '手機(jī)'}this.style.color = '#999'//失去焦點(diǎn)時(shí)把文本框里的文字的顏色變淺}</script>
</body></html>

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

element.style 行內(nèi)樣式操作；
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 更改元素的樣式，適合于樣式較多或者功能復(fù)雜的情況       this.className='change'//點(diǎn)擊時(shí)給div加上change的類名//如果想要保留原先的類名，我們可以這么做 --->  多類名選擇器this.className='fist change'}</script>
</body>
</html>

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

案例：密碼框驗(yàn)證信息

<!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>密碼框驗(yàn)證信息案例</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 = '你輸入的位數(shù)不對，要求6~16位'} else {messege.className = 'message right';messege.innerHTML = '你輸入的正確'}}</script>
</body></html>

操作元素小結(jié)：

排他思想

如果有同一組元素，我們想要某一個(gè)元素實(shí)現(xiàn)某種樣式，需要用到循環(huán)的排他思想算法；
（1）、第一步：所有元素全部清除樣式；
（2）、第二步：給當(dāng)前元素設(shè)置樣式；

<!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>// 首先先排除其他人，然后才設(shè)置自己的樣式，這種排除其他人的思想我們稱為排他思想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、然后才讓當(dāng)前的元素背景顏色為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、循環(huán)注冊事件for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function () {// this.src 就是我們點(diǎn)擊的圖片的路徑// 把這個(gè)路徑 this.src 給 body 就可以了//document.body.style.backgroundImage獲取body的背景圖片document.body.style.backgroundImage = 'url(' + this.src + ')'}}</script>
</body></html>

表格隔行變色效果案例

//onmouseover鼠標(biāo)經(jīng)過  onmouseout鼠標(biāo)離開
<!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;//設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框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>累計(jì)凈值</th><th>前單位凈值</th><th>凈值增長率</th></tr></thead><tbody><tr><td>003526</td><td>農(nóng)行金穗3個(gè)月定期開放債券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003527</td><td>農(nóng)行金穗4個(gè)月定期開放債券</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、利用循環(huán)綁定注冊事件for(var i=0;i<trs.length;i++){// 3、鼠標(biāo)經(jīng)過事件 onmouseovertrs[i].onmouseover=function(){this.className='bg';}// 4、鼠標(biāo)離開事件 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>價(jià)錢</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>// 第一步：全選和取消全選的做法：讓下面所有復(fù)選框的checked屬性（選中狀態(tài)）跟隨 全選按鈕即可// 1、獲取元素var j_cbAll = document.getElementById('j_cbAll'); // 全選按鈕var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');//下面所有的復(fù)選框// 2、注冊事件j_cbAll.onclick = function () {// this.checked 它可以得到當(dāng)前復(fù)選框的選中狀態(tài)，如果是 true 就選中，如果是 false ，就是未選中；console.log(this.checked);for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;//將全選按鈕的選中或未選中狀態(tài)賦值給所有的 checkbox }}//第二步：下面復(fù)選框需要全部選中，上面全選才能選中做法：給下面所有復(fù)選框綁定點(diǎn)擊事件，每次點(diǎn)擊，都要循環(huán)遍歷for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function () {// flag 控制全選按鈕是否選中var flag = true// 每次點(diǎn)擊下面的復(fù)選框都要循環(huán)檢查這四個(gè)小按鈕是否全被選中for (var i = 0; i < j_tbs.length; i++) {if (!j_tbs[i].checked) {flag = false;break;//退出for循環(huán)，這樣可以提高執(zhí)行效率；因?yàn)橹灰幸粋€(gè)沒有選中，剩下的就循環(huán)判斷了；}}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('屬性') 獲取屬性值的區(qū)別？
（1）、element.屬性 獲取內(nèi)置屬性值（元素本身自帶的屬性）如：id class等；
（2）、element.getAttribute('屬性') 主要獲得自定義的屬性（標(biāo)準(zhǔn)）我們程序員自定義的屬性；

設(shè)置屬性值

element.屬性 = '值' 設(shè)置內(nèi)置屬性值；

<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>規(guī)格與包裝</li><li>售后保障</li><li>商品評價(jià)</li><li>手機(jī)社區(qū)</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介紹模塊內(nèi)容</div><div class="item">規(guī)格與包裝模塊內(nèi)容</div><div class="item">售后保障模塊內(nèi)容</div><div class="item">商品評價(jià)模塊內(nèi)容</div><div class="item">手機(jī)社區(qū)模塊內(nèi)容</div></div></div><script>// 先獲取父組件，再獲取父組件下的所有的livar tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item')// for循環(huán)綁定點(diǎn)擊事件for (var i = 0; i < lis.length; i++) {// 開始給5個(gè)小li 設(shè)置索引號lis[i].setAttribute('index', i) // element.setAttribute('屬性','值')// 1、上面的模塊選項(xiàng)卡：點(diǎn)擊某一個(gè)，當(dāng)前這個(gè)底色會是紅色，其余不變（排他思想） 修改類名的方式// 干掉所有人，其余的li清除class這個(gè)類lis[i].onclick = function () {for (var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下我自己this.className = 'current'/*2、下面的顯示內(nèi)容模塊：下面的模塊顯示內(nèi)容和上面的選項(xiàng)卡一一對應(yīng)，相匹配；給上面的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'}// 留下我自己，讓對應(yīng)的item顯示出來items[index].style.display = 'block'}}</script>
</body></html>

H5自定義屬性

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

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

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

設(shè)置H5自定義屬性

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

<div data-index='1'></div>// 或者使用JS設(shè)置 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 是一個(gè)【集合】，里面存放了所有以data開頭的自定義屬性console.log(div.dataset);// DOMStringMap {index: '2'}console.log(div.dataset.index);// 2console.log(div.dataset['index']);// 2 // 如果自定義屬性里面有多個(gè) - 連接的單詞，我們獲取的時(shí)候采用【駝峰命名法】console.log(div.dataset.listName); //andy
</script>

DOM中的節(jié)點(diǎn)操作

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

節(jié)點(diǎn)概述

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

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

節(jié)點(diǎn)操作之父節(jié)點(diǎn)

節(jié)點(diǎn)層級

利用DOM 樹可以把節(jié)點(diǎn)劃分為不同的層級關(guān)系，常見的是【父子兄層級關(guān)系】；

父級節(jié)點(diǎn)： `node.parentNode`

得到的是離元素最近的父級節(jié)點(diǎn)；如果指定的節(jié)點(diǎn)沒有父節(jié)點(diǎn)就返回null；

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

節(jié)點(diǎn)操作之子節(jié)點(diǎn)

子節(jié)點(diǎn)： `parentNode.childNodes`（標(biāo)準(zhǔn)）（獲取到的是所有的子節(jié)點(diǎn)，包含元素節(jié)點(diǎn)、文本節(jié)點(diǎn)等）

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

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

專門處理：只想要獲得里面的元素節(jié)點(diǎn)

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

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

//children 獲取所有的子元素節(jié)點(diǎn)（也是我們實(shí)際開發(fā)常用的）
var ul=document.querySelector('ul')
console.log(ul.children )

節(jié)點(diǎn)操作之第一個(gè)子元素和最后一個(gè)子元素

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

parentNode.firstElementChild 、parentNode.lastElementChild 注意：這兩個(gè)方法有兼容性問題，IE9 以上才支持；
實(shí)際開發(fā)中，firstChild 和 lastChild 包含其他節(jié)點(diǎn)，操作不方便；而firstElementChild lastElementChild 又有兼容性問題，那么我們?nèi)绾潍@取第一個(gè)子元素節(jié)點(diǎn)或最后一個(gè)子元素節(jié)點(diǎn)呢？
（1）、如果想要第一個(gè)子元素節(jié)點(diǎn)，可以使用parentNode.children[0] ；

//實(shí)際開發(fā)的寫法，既沒有兼容性問題又返回第一個(gè)子元素
console.log(ol.children[0])
console.log(ol.children[3])//第四個(gè)子元素//得到最后一個(gè)子元素
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; //得到四個(gè)小li// 2、循環(huán)遍歷事件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>

兄弟節(jié)點(diǎn) `node.nextSibling`、 `node.previousSibling`、`node.nextElementSibling`、`node.previousElementSibling`

node.nextSibling 返回當(dāng)前元素的下一個(gè)兄弟節(jié)點(diǎn)（包括【元素節(jié)點(diǎn)】和【文本節(jié)點(diǎn)】等等），找不到就返回null；同樣，也是包含所有的節(jié)點(diǎn)；

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

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

如何解決兼容性問題？自己封裝一個(gè)兼容性的函數(shù)。

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

節(jié)點(diǎn)操作之創(chuàng)建和添加節(jié)點(diǎn)

創(chuàng)建節(jié)點(diǎn)：`document.createElement('tagName')`

document.createElement() 方法創(chuàng)建由tagName 指定的HTML 元素。因?yàn)檫@些元素原先不存在，是根據(jù)我們的需求動態(tài)生成的，所以我們也稱之為【動態(tài)創(chuàng)建元素節(jié)點(diǎn)】；

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

添加節(jié)點(diǎn)：`node.appendChild(child)`、 `node.insertBefore(child,指定元素)`

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

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

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

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

總結(jié)：我們想要頁面添加一個(gè)新的元素：1、創(chuàng)建元素；2、添加元素；

案例：簡單版本發(fā)布留言

<!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>簡單版發(fā)布留言案例</title>
</head><body><textarea name="" id="" cols="30" rows="10"></textarea><button>發(fā)布</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('你沒有輸入內(nèi)容')return false} else {// （1）、創(chuàng)建元素var li = document.createElement('li');// 先有l(wèi)i才能賦值li.innerHTML = text.value// （2）、添加元素// ul.appendChild(li) //添加到最后// 添加到最前面ul.insertBefore(li,ul.children[0])}}</script>
</body></html>

節(jié)點(diǎn)操作 - 刪除節(jié)點(diǎn) `node.removeChild(child)`

node.removeChild(child)方法從DOM 中刪除一個(gè)子節(jié)點(diǎn)，返回刪除的節(jié)點(diǎn)；

<button>刪除</button>
<ul><li>熊大</li><li>熊二</li><li>光頭強(qiáng)</li>
<ul>
//1、獲取元素
var ul=document.querySelector('ul');
//2、刪除元素
//ul.removeChild(ul.children[0]) //刪除“熊大”
//3、點(diǎn)擊按鈕，依次刪除里面的孩子
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>簡單版發(fā)布留言案例</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>發(fā)布</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('你沒有輸入內(nèi)容')return false} else {// （1）、創(chuàng)建元素var li = document.createElement('li');// 先有l(wèi)i才能賦值// 小技巧：阻止連接跳轉(zhuǎn)需要添加 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）、刪除元素 刪除的是當(dāng)前鏈接的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>連接跳轉(zhuǎn)需要添加javascript:void(0); 或 javascript:; 如：<a href='javascript:void(0);'>刪除</a>

節(jié)點(diǎn)操作 - 復(fù)制節(jié)點(diǎn)（克隆節(jié)點(diǎn)） `node.cloneNode()`

node.cloneNode()方法返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本。也稱為【克隆節(jié)點(diǎn)】或【拷貝節(jié)點(diǎn)】；

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

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

案例：動態(tài)生成表格

<!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>動態(tài)生成表格案例</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、先準(zhǔn)備好學(xué)生的數(shù)據(jù)var datas = [{ name: '張三', subject: 'javaSript', score: 100 },{ name: '李四', subject: 'javaSript', score: 100 },{ name: '王五', subject: 'javaSript', score: 100 },]// 2、往 tbody 里面創(chuàng)建行，有幾個(gè)人（通過數(shù)組的長度）我們就創(chuàng)建幾行；var tbody = document.querySelector('tbody')for (var i = 0; i < datas.length; i++) { //外面的for循環(huán)管行 tr// 創(chuàng)建 tr 行var tr = document.createElement('tr')tbody.append(tr) //將創(chuàng)建的 tr 放到 tbody 里// 行里面創(chuàng)建單元格 td (跟數(shù)據(jù)有關(guān)系的三個(gè)單元格)，單元格的數(shù)量取決于每個(gè)對象里面的屬性個(gè)數(shù) for循環(huán)遍歷對象for (var k in datas[i]) { //里面的for循環(huán)管列 td//創(chuàng)建單元格var td = document.createElement('td')// 把對象里面的屬性值 datas[i][k]  給 tdconsole.log(datas[i][k]); //對象里面的屬性值 td.innerHTML = datas[i][k];tr.append(td) //將創(chuàng)建好的 td 放到 tr 里               }// 3、創(chuàng)建有刪除2個(gè)字的單元格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 () {// 點(diǎn)擊a，刪除當(dāng)前a所在的行（鏈接的爸爸的爸爸）tbody.removeChild(this.parentNode.parentNode)}}// 復(fù)習(xí)：for in 遍歷對象// for(var k in obj){//     k 得到的是屬性名//     obj[k] 得到的是屬性值// }</script>
</body></html>

節(jié)點(diǎn)操作 - `document.write` 創(chuàng)建元素

三種動態(tài)創(chuàng)建元素的區(qū)別：

document.write 是直接將內(nèi)容寫入頁面的內(nèi)容流，但是文檔流執(zhí)行完畢，則它會導(dǎo)致頁面全部重繪；（頁面上之前的元素被清除，重新創(chuàng)建了一個(gè)新的頁面，新頁面上只展示document.write創(chuàng)建的元素）

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

//當(dāng)整個(gè)頁面都加載完了，再調(diào)用里面的函數(shù)
window.onload=function(){}

element.innerHTML 和 document.createElement 效率對比：
（1）、element.innerHTML 是將內(nèi)容寫入某個(gè)DOM 節(jié)點(diǎn)，不會導(dǎo)致頁面全部重繪；創(chuàng)建多個(gè)元素效率更高（不是拼接字符串，而是采取數(shù)組的形式拼接），結(jié)構(gòu)稍微復(fù)雜；
（2）、document.createElement 創(chuàng)建多個(gè)元素效率稍微低一點(diǎn)點(diǎn)，但是結(jié)構(gòu)更清晰；
（3）、總結(jié)：不同瀏覽器下，element.innerHTML 效率要比 document.createElement 高；

`Dom` 重點(diǎn)核心總結(jié)

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

事件高級

注冊事件兩種方式

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

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

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

`addEventListener()`

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

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

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

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

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

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

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

<!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) {// 判斷當(dāng)前瀏覽器是否支持 addEventListener 方法if (element.addEventListener) {element.addEventListener(eventName, fn);//第三個(gè)參數(shù) 默認(rèn)是false} else if (element.attachEvent) {element.attachEvent('on' + eventName, fn)} else {// 相當(dāng)于 element.onclick = fnelement['on' + eventName] = fn}}</script>
</body></html>

刪除事件（解綁事件）

刪除事件的方式：

（1）、傳統(tǒng)注冊方式

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)//傳統(tǒng)方法刪除事件divs[0].onclick = null}</script>
</body>

（2）、方法監(jiān)聽注冊方式

方法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 不需要加小括號調(diào)用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){//判斷當(dāng)前瀏覽器是否支持 removeEventListener 方法if(element.removeEventListener){element.removeEventListener(eventName,fn);//第三個(gè)參數(shù)，默認(rèn)是false}else if(element.detachEvent){element.detachEvent('on'+eventName,fn);}else{element['on'+eventName]=null;}
}

DOM事件流

事件流描述的是從頁面中接收事件的順序；
事件發(fā)生時(shí)會在元素節(jié)點(diǎn)之間按照待定的順序傳播，這個(gè)傳播過程即DOM事件流；
注意：
（1）、JS代碼中只能執(zhí)行捕獲或者冒泡其中的一個(gè)階段；
（2）、onclick 和 attachEvent 只能得到冒泡階段；
（3）、addEventListener(type,listener[,useCapture]) 第三個(gè)參數(shù)如果是 true ，表示在事件捕獲階段調(diào)用事件處理程序；如果是false （不寫默認(rèn)是false），表示在事件冒泡階段調(diào)用事件處理程序；
（4）、實(shí)際開發(fā)中我們很少使用事件捕獲，更關(guān)注事件冒泡；
（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事件流 三個(gè)階段:1、JS代碼中只能執(zhí)行捕獲或者冒泡其中的一個(gè)階段；2、onclick 和 attachEvent（ie）只能得到冒泡階段；3、捕獲階段 如果 addEventListener 第三個(gè)參數(shù)是 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 第三個(gè)參數(shù)是 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){})

這個(gè)event 就是事件對象，我們還喜歡寫成 e 或者 evt；
這個(gè)event是個(gè)形參，系統(tǒng)幫我們設(shè)定為事件對象，不需要傳遞實(shí)參過去；
當(dāng)我們注冊事件時(shí)，event對象就會被系統(tǒng)自動創(chuàng)建，并依次傳遞給事件監(jiān)聽器（事件處理函數(shù)）；
官方解釋：event 對象代表事件的狀態(tài)，比如鍵盤按鈕的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)；
簡單解釋：事件發(fā)生后，跟事件相關(guān)的一系列信息數(shù)據(jù)的集合都放到這個(gè)對象里面，這個(gè)對象就是事件對象event，它有很多屬性和方法；比如：誰綁定了這個(gè)事件；鼠標(biāo)觸發(fā)事件的話，會得到鼠標(biāo)的相關(guān)信息，如鼠標(biāo)位置；鍵盤觸發(fā)事件的話，會得到鍵盤的相關(guān)信息，如按了哪個(gè)鍵；
在IE6~8中，瀏覽器不會給方法傳遞參數(shù)，如果需要的話，需要到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 就是一個(gè)事件對象，寫到我們偵聽函數(shù)的 小括號里面，當(dāng)形參來看；2、事件對象只有有了事件才會存在，它是系統(tǒng)給我們自動創(chuàng)建的，不需要我們傳遞參數(shù)；3、事件對象是我們事件的一系列相關(guān)數(shù)據(jù)的集合，跟事件相關(guān)的；比如鼠標(biāo)點(diǎn)擊里面就包含了鼠標(biāo)的相關(guān)信息，鼠標(biāo)坐標(biāo)；如果是鍵盤事件，里面就包含了鍵盤事件的信息，比如：判斷用戶按下了哪個(gè)鍵；4、這個(gè)事件對象我們可以自己命名，比如：event、evt、e；5、事件對象也有兼容性問題，ie678通過 window.event 獲取；兼容性寫法：e=e || window.event；*/        </script>
</body></html>

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

1、`target` 和 `this` 區(qū)別

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

<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>// 注意：此處沒有寫第三個(gè)參數(shù)，所以默認(rèn)是false（冒泡），li 沒有綁定點(diǎn)擊事件，點(diǎn)擊的是 li ，li沒找到事件就往上找，這是冒泡；console.log(e.currentTarget);// 了解：跟 this 有個(gè)非常相似的屬性 currentTarget （IE678不兼容）console.log(e.target);//<li><li>})/*區(qū)別：e.target 點(diǎn)擊了哪個(gè)元素，就返回哪個(gè)元素；this 哪個(gè)元素綁定了這個(gè)點(diǎn)擊事件，那么就返回誰；*/ // 考慮兼容性問題的寫法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、事件對象阻止默認(rèn)行為

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

4、阻止事件冒泡

事件冒泡：開始時(shí)由最具體的元素接收，然后逐級向上傳播到DOM最頂層節(jié)點(diǎn)；事件冒泡本身的特性，會帶來的壞處，也會帶來好處，需要我們靈活掌握；
阻止事件冒泡：標(biāo)準(zhǔn)寫法：利用事件對象里面的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里面有多個(gè)li，點(diǎn)擊每個(gè)li都會彈出對話框，以前需要給每個(gè)li注冊事件，是非常辛苦的，而且訪問DOM的次數(shù)越多，這就會延長整個(gè)頁面的交互就緒時(shí)間；
事件委托：也稱為事件代理，在jQuery里面稱為事件委派；
事件委托的原理：不是每個(gè)子節(jié)點(diǎn)單獨(dú)設(shè)置事件監(jiān)聽器，而是事件監(jiān)聽器設(shè)置在其父節(jié)點(diǎn)上，然后利用冒泡原理影響設(shè)置每個(gè)子節(jié)點(diǎn)。以上案例：給ul注冊點(diǎn)擊事件，然后利用事件對象的target 來找到當(dāng)前點(diǎn)擊的li，因?yàn)辄c(diǎn)擊li，事件會冒泡到ul上，ul有注冊事件，就會觸發(fā)事件監(jiān)聽器；
事件委托的作用：我們只操作了一次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('被點(diǎn)擊了')// e.target 可以得到我們點(diǎn)擊的對象e.target.style.backgroundColor = 'pink'})</script>
</body>

6、常用的鼠標(biāo)事件

event 對象代表事件的狀態(tài)，跟事件相關(guān)的一系列信息的集合?，F(xiàn)階段我們主要是用鼠標(biāo)事件對象MouseEvent和鍵盤事件對象KeyboardEvent；
禁止鼠標(biāo)右鍵菜單：contextmenu 主要控制應(yīng)該何時(shí)顯示上下文菜單，主要用于程序員取消默認(rèn)的上下文菜單；

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

禁止鼠標(biāo)選中：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>

獲得鼠標(biāo)在頁面中的坐標(biāo)：鼠標(biāo)事件對象MouseEvent

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

案例：跟隨鼠標(biāo)的天使

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

7、常用的鍵盤事件

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

<body><script>// 鍵盤事件對象中的 keyCode 屬性可以得到相應(yīng)鍵的 ASCII 碼值；// 1、我們的 keyup 和 keydown 事件不區(qū)分字母大小寫；例如：a 和 A 得到的都是65；// 2、我們的 keypress 事件，區(qū)分字母大小寫；例如：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>

案例：模擬京東按鍵輸入內(nèi)容

<body><input type="text"><script>/*1、核心思路：檢測用戶是否按下了s鍵，如果按下s鍵，就把光標(biāo)定位到搜索框里面；2、使用鍵盤事件對象里面的keyCode判斷用戶按下的是否是s鍵；3、搜索框獲得焦點(diǎn)：使用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）、快遞單號輸入內(nèi)容時(shí)，上面的大號字體盒子（con）顯示（這里面的字號更大）；（2）、表單檢測用戶輸入：給表單添加鍵盤事件；（3）、同時(shí)把快遞快遞單號里面的值（value）獲取過來賦值給con盒子（innerText）作為內(nèi)容；注意：keydown 和 keypress 在文本框里的特點(diǎn)：他們兩個(gè)事件觸發(fā)的時(shí)候，文字還沒有落入文本框中；keyup 事件觸發(fā)的時(shí)候，文字已經(jīng)落入文本框里面了；--><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;}})//當(dāng)我們失去焦點(diǎn)，就隱藏這個(gè)con盒子jd_input.addEventListener('blur', function () {con.style.display = 'none'})//當(dāng)我們獲得焦點(diǎn)，就顯示這個(gè)con盒子jd_input.addEventListener('focus', function () {if (this.value !== '') {con.style.display = 'block'}})        </script>
</body></html>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：牛客题霸 [在转动过的有序数组中寻找目标
下一篇：牛客题霸 [栈和排序] C++题解/答案

综合教程

JavaScript教程（一）

計(jì)算機(jī)語言

機(jī)器語言、匯編語言和高級語言

【編程語言】和【標(biāo)記語言】的區(qū)別？

計(jì)算機(jī)基礎(chǔ)

計(jì)算機(jī)組成

數(shù)據(jù)存儲

數(shù)據(jù)存儲單位

程序運(yùn)行

初識JavaScript

JavaScript簡介

瀏覽器執(zhí)行JS簡介

JS組成

ECMAScript

DOM

BOM

JS的輸入和輸出語句

變量

什么是變量？

變量在內(nèi)存中的存儲

變量的使用

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

變量的語法擴(kuò)展

變量的命名規(guī)范

案例：顯示年齡案例

數(shù)據(jù)類型

為什么需要數(shù)據(jù)類型？

變量的數(shù)據(jù)類型

數(shù)據(jù)類型的分類

數(shù)據(jù)類型轉(zhuǎn)換

隱式轉(zhuǎn)換

案例：計(jì)算年齡案例

案例：簡單加法器案例

補(bǔ)充：解釋型語言和編譯型語言

運(yùn)算符（算數(shù)運(yùn)算符、遞增和遞減運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、賦值運(yùn)算符）

補(bǔ)充：表達(dá)式和返回值

短路運(yùn)算（邏輯中斷）

邏輯與

賦值運(yùn)算符

運(yùn)算符優(yōu)先級

流程控制（順序結(jié)構(gòu)、分支結(jié)構(gòu)、循環(huán)結(jié)構(gòu)）

流程控制-分支（if分支語句、switch分支語句、三元表達(dá)式）

案例：判斷平年、閏年案例

案例：數(shù)字補(bǔ)零

switch語句

案例：查詢水果案例

流程控制-循環(huán)（for循環(huán)、while循環(huán)、do while循環(huán)）

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

案例：for循環(huán)案例

案例：求學(xué)生成績案例

案例：一行打印5顆星星

雙重for循環(huán)

案例：打印5行5列星星

案例：打印n行n列星星

案例：打印倒三角案例

while循環(huán)

while循環(huán)案例

dowhile循環(huán)

dowhile案例

循環(huán)小結(jié)

continue和break關(guān)鍵字

continue關(guān)鍵字

continue關(guān)鍵字案例

break關(guān)鍵字

數(shù)組

案例：求數(shù)組最大值

數(shù)組中新增元素

案例：新建一個(gè)數(shù)組，里面存放10個(gè)整數(shù)（1-10）

案例：篩選數(shù)組

方法一：

方法二：

案例：數(shù)組去重

案例：翻轉(zhuǎn)數(shù)組

復(fù)習(xí)：交換兩個(gè)變量

案例：數(shù)組排序（冒泡排序）

函數(shù)

函數(shù)導(dǎo)讀

案例：利用函數(shù)求1~100的累加和

函數(shù)的參數(shù)

機(jī)器語言、匯編語言和高級語言

運(yùn)算符（算數(shù)運(yùn)算符、遞增和遞減運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、賦值運(yùn)算符）

流程控制（順序結(jié)構(gòu)、分支結(jié)構(gòu)、循環(huán)結(jié)構(gòu)）

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

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

`switch`語句

流程控制-循環(huán)（`for`循環(huán)、`while`循環(huán)、`do while`循環(huán)）

雙重`for`循環(huán)

`while`循環(huán)

`while`循環(huán)案例

`dowhile`循環(huán)

`dowhile`案例

`continue`和`break`關(guān)鍵字

`continue`關(guān)鍵字

`continue`關(guān)鍵字案例

`break`關(guān)鍵字

函數(shù)的返回值`return`

`return`終止函數(shù)并且只能返回一個(gè)值

函數(shù)沒有`return`，返回`undefined`；

`break`、`continue`、`return`的區(qū)別

`arguments` 案例：利用函數(shù)求任意幾個(gè)數(shù)的最大值

1、利用【字面量】創(chuàng)建對象；

2、利用【new Object】創(chuàng)建對象；

遍歷對象屬性：`for...in`語句用于對【數(shù)組】或者【對象的屬性】進(jìn)行【循環(huán)】操作；

日期對象（`Date()`）

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