Web學習筆記5

Javascript概述

1、JS簡介

JS是運行在瀏覽器的腳本編程語言，最初用于Web表單的校驗。現在的作用主要有三個：

網頁特效、表單驗證、數據交互

JS由三部分組成，分別是ECMAscript、DOM、BOM，其中ECMAscript規定了JS的基本語法和規則；DOM和BOM統稱Web API；DOM叫做文檔對象模型，用于操作Web頁面上的元素；BOM叫做瀏覽器對象模型，用于操作瀏覽器窗口

JS的書寫位置和CSS一致，分為內部JS、外部JS、行內JS

內部JS：書寫在<body>下方，JS代碼被<script>標簽包裹，<script>標簽寫在<body>的最下方

外部JS（最常用）：新建一個.js文件，在<body>底端通過<script src=".js文件路徑"></script>引入，外部JS不要在標簽中間寫代碼，會被忽略

行內JS：VUE框架用，寫在標簽中間

JS是單線程，所有任務排隊執行，前一個任務結束，后一個任務才去執行。但HTML5里為了讓JS多線程執行，提出了同步與異步的概念。

<body><script>alert("你好")</script><script src="./test.js"></script>
</body>

JS語句使用英文;表示語句結束，為了風格統一，結束符要么全加，要么全不加

2、JS輸入輸出語句

輸出語句

往文檔里輸出內容，可以輸出文字，也可以輸出標簽：document.write(" ")

    <script>document.write('<h1>你好</h1>')</script>

頁面彈出警示對話框：alert（“ ”）

在控制臺輸出語法，給程序員調試用:console.log（‘ ’）

輸入語句

彈出一個對話框，對話框包含文字信息，提示用戶輸入文字：prompt(' ')

alert('你好');
prompt("請輸入姓名");
document.write('<h1>你好</h1>');
console.log('控制');

瀏覽器按照HTML文檔順序執行JS代碼，但alter和prompt會跳過頁面渲染先被執行

3、變量

聲明變量：let 變量名，聲明多個變量用逗號let 變量名1，變量名2……,不同變量之間用逗號隔開

變量賦值：使用賦值符號‘=’,變量名=值

變量名可以是數字、下劃線、$和字母的組合，數字不能做開頭，JS變量名區分大小寫

let name=prompt('請輸入你的姓名：')
let age=prompt('請輸入你的年齡：')
document.writeln(name,age)

4、常量

初始化賦值后就不需要改變的變量稱作常量，JS中常量用const聲明，const聲明后的常量不可重新賦值，一般使用全大寫的英文作為常量名

const N = 1
console.log(N)

5、數據類型

JS數據類型分為基本數據類型和引用數據類型

基本數據類型有：

數字:number，JS無需聲明數字類型，根據賦值的數據判斷類型。若數字類型運算結果錯誤或者數字的不當操作會返回NaN，對NaN的任何操作都會返回NaN。

字符串:string：用‘ ’或者" "包裹的數據，兩個字符串拼接使用+，也可以使用模版字符串進行拼接，模板字符串語法為：`字符串${變量}字符串`

let usrName=prompt("請輸入用戶姓名")
let age=prompt("請輸入用戶年齡")
document.writeln(`<h1>用戶的姓名為${usrName}年齡為${age}</h1>`)

布爾:true\false

未定義：undefined:聲明一個變量未賦值就是undefined

空:null

引用數據類型有：

object 對象

數據類型可以進行轉換，隱式轉換：在運算時自動進行轉換，如+兩端有一個是字符串兩邊都轉換為字符串，-*/自動轉換為數字類型，+字符串會將字符串轉換為數字型；顯式轉換：使用函數強制轉換

parseint(數據)：只保留整數

parsefloat(數據)：只保留小數

6、運算符

運算符除了+-*/這種基礎運算符外，還有：

自增運算符：++：讓變量+1，分為前置自增和后置自增，前置優先級高

自減運算符：--：讓變量-1

比較運算符：<\>\>=\<=，以及，==：判斷左右值是否相等；===：判斷左右值和類型是否相等（常用）；!=判斷左右是否不等；!==：判斷左右是否不全等；NaN不等于任何值，包括自己；字符串可以比較，比較其ASCLL碼

邏輯運算符：與：&&；或：||；非：!；

7、分支語句

?分支語句包括：if語句、三元運算符、switch語句

if語句為：

if(條件1){滿足條件1需要執行的代碼}

else if(條件2){滿足條件2的代碼}

……

else {不滿足條件的代碼}

三元運算符用于處理雙分支的條件語句，比if寫法簡單：

條件？滿足條件執行代碼：不滿足條件執行的代碼

switch語句為，執行代碼后一定要加break：

switch(數據){

case 值1：

? ? ? ? 代碼1

? ? ? ?break

case 值2：

? ? ? ? 代碼2

? ? ? ? break

……

default (上述條件都不滿足)：

????????代碼n

? ? ? ? break

}

8、循環語句

while循環語句：

while(循環條件) {需要重復執行的代碼}

for循環語句：

for(變量起始值；終止條件；變量變化量){循環語句}

結束循環語句有兩種：

break：結束循環

continue：結束本次循環，繼續下次循環

// 輸出九九乘法表
let a = 1
let i = 1
for(a=1;a<=9;a++) {for(b=i;b<=9;b++) {document.writeln(`${a} X ${b} =${a*b} `)}i++document.writeln('<br>')
}

9、數組

聲明數組：let 數組名[數據1，數據2……]

返回數組長度：數組名.length()

遍歷數組：for循環+索引

修改元素：數組[索引]=重新賦值

增加元素：在數組末尾添加元素：數組名.push（數據1，數據2……）,返回新增元素后數組的長度；在數組開頭添加元素：數組名.unshift（數據1，數據2，……）,返回新增元素后數組的長度

刪除元素：刪除數組中最后一個元素：數組名.pop（）返回值是刪除的元素；刪除指定的元素：數組名.splice(起始索引位置，刪除元素個數）；刪除數組中第一個元素數組名.shift()，返回值是刪除的元素

// 冒泡排序，輸入數組長度，輸入數組數字，輸出由大到小排序的數組
let len = +prompt("輸入數組的長度")
let nums=[]
for(i=0;i<len;i++){let num=+prompt('輸入數字：')nums.push(num)
}
for(i=0;i<len-1;i++){for(j=0;j<len-1;j++){if(nums[j]<=nums[j+1]){n=nums[j+1]nums[j+1]=nums[j]nums[j]=n}}
}
document.writeln(nums)

10、函數

函數的聲明語法：

function 函數名(形參列表){

函數體

}

函數名命名規則和變量名一致，建議用動詞約定，例如：

can:是否可行；has：判斷是否含有某個值；is：判斷是否為某個值；get：獲取某個值；set：獲取某個值；load:加載某個值

函數調用語法：

函數名(實參列表)

函數返回值：return 值，若函數沒有返回值，則默認返回undefined

//返回一個數組最大值
function find_max(arr) {res=0for(let i=0;i<arr.length;i++){if (res<= arr[i]){res=arr[i]}}return res
}
nums=[7,11,14,3,2,4,8,10]
document.writeln(find_max(nums))
//自動轉換時分秒,自動補0
function auto_turn(second) {let hour = 0let minute = 0while(second>=60){second-=60minute+=1if(minute===60){minute-=60hour+=1}}if(second<10){second='0'+second}if(minute<10){minute='0'+minute}if(hour<10){hour='0'+hour}document.writeln(`${hour}時${minute}分${second}秒`)
}
num=+prompt('請輸入秒：')
auto_turn(num)

匿名函數，沒有名字的函數，無法直接使用：

語法：function() {}?

調用方法：

函數表達式：將函數賦值給一個變量，立即執行函數必須加封號

立即執行函數：（function {}）（）;

數組的map方法

用于遍歷數組并返回新的數組，與forEach不同，map有返回值語法為：

數組.map(function(變量1，變量2){})；其中變量1為數組的元素，變量2為數組的索引

數組的join方法

用于將數組所有元素拼接為一個字符串，語法為：

數組.join('用來分隔的字符')，其中join里如果是空串，則說明元素之間沒有字符

11、對象

對象是JS里的一種數據類型，類似于C++里的結構體或者python里的字典，是一組無序數據的集合

對象聲明語法：

let 對象名={}(更常用)；let 對象名=new Object()

對象內容有兩種：屬性和方法

let 對象名={

? ? ? ? 屬性名：屬性值，

? ? ? ? 方法名：函數

}

屬性

查找對象內容：對象名.屬性或對象名[‘屬性名’]

更改對象的數據：對象名.屬性=新值

增加對象的屬性：對象名.新屬性=新值

刪除對象的數據：delete 對象名.屬性

方法

對象的方法使用匿名函數

方法名:function(){函數體}

方法調用：對象名.方法名

對象遍歷可以用來渲染web動態頁面，語法：

for(let k in 對象名){

獲得對象屬性：k

獲得對象值：obj[k]

}

對象可以和數組結合使用，放置批量對象

let 對象名 = [{對象1}，{對象2}……]

//CSS渲染 
<style>table {text-align: center;}table,td,th {margin: 0 auto;font-family: '黑體';border: 1px solid  #000;border-collapse:collapse;}tr {width: 100px;cursor: pointer;}th,td {padding: 30px;}table tr :not(:first-child):hover{background-color: aliceblue;}</style>

//在web中添加學生信息，生成表格
let system_info =[]
nums= +prompt('請輸入學生人數')
for(i=0;i<nums;i++){names=prompt('請輸入姓名')gender=prompt('請輸入性別')score=prompt('請輸入分數')level=prompt('請輸入等級')system_info.push({uname:names,ugender:gender,uscore:score,ulevel:level})
}
for (let i=0;i<system_info.length;i++){document.writeln(`<tr><td>${i+1}</td><td>${system_info[i].uname}</td><td>${system_info[i].ugender}</td><td>${system_info[i].uscore}</td><td>${system_info[i].ulevel}</td></tr>`)
}

常用的內置對象

math

包含方法有：

random：生成0-1之間的隨機數;ceil：向上取整；floor：向下取整；max:查找最大數；min：查找最小數；pow：冪運算；abs：絕對值；round：四舍五入

12、DOM

DOM基礎

API是指使用JS操作html和瀏覽器，API包括DOM和BOM，其中DOM是用來操作網頁內容的內容的，用于開發網頁特效、用戶交互

在寫API中盡量使用const聲明變量，數組和對象盡量用const聲明。

DOM樹：將HTML以樹狀結構表現出來，稱之為DOM樹，樹中document是最頂級的文件

DOM對象：將HTML的標簽獲取作為JS中的對象，所有的標簽屬性可以在對象上找到，修改對象的屬性可以映射到標簽，DOM的核心思想就是將網頁標簽作為JS對象處理

DOM中最大的對象叫做document

獲取DOM元素：使用CSS選擇器獲取，語法：

選擇匹配的第一個元素(常用)：document.querySelector('CSS選擇器') ，可以直接操作修改

選擇匹配的所有元素（常用）：document.querySelectorAll('CSS選擇器')，獲取的是一個包含所有對象的偽數組，修改元素需要遍歷，并且不能使用pop、push等方法

根據id獲取第一個元素：document.getElementById(‘ID’)

根據標簽獲取元素：document.getElementsByTagName（‘標簽’）

根據類名獲取元素：document.getElementsByClassName('類名‘)

修改元素里的內容，可以用兩種方式：

對象.innerText屬性；對象.innerHTML屬性

innerText屬性：

將文本內容添加、更新到任意標簽位；顯示純文本，不解析標簽

innerHTML屬性：

將文本內容添加、更新到任意標簽位；解析標簽，多標簽時使用模板字符串

 <script>//實現抽獎const staff=['小明','小紅','小藍','小綠']let num= Math.floor(Math.random()*staff.length)console.log(num);    const one = document.querySelector('#one')one.innerHTML = `一等獎：${staff[num]}`staff.splice(num,1)console.log(staff);num= Math.floor(Math.random()*staff.length)console.log(num);const two=document.querySelector('#two')two.innerHTML=`二等獎：${staff[num]}`staff.splice(num,1)console.log(staff);num= Math.floor(Math.random()*staff.length)console.log(num);const three=document.querySelector('#three')three.innerHTML=`三等獎：${staff[num]}`</script>

修改元素屬性

可以通過JS設置、修改、刪除元素屬性

語法：對象.屬性=值

可以通過樣式標簽修改元素的樣式屬性

對象.style.屬性=值（帶橫杠的值使用駝峰命名法，一定要帶上引號和單位）

可以通過類名修改樣式屬性，將JS和CSS配合使用（修改樣式比較多時使用）

對象.className=‘類名’（如果原先的標簽有類名了要加上原來的類名，新類名就不會覆蓋原來的類名）

可以通過classList修改樣式屬性（h5新增，最常用）

追加一個類：對象.classlist.add('類名')

刪除一個類：對象.classlist.remove(‘類名’)

切換一個類，有就刪除，沒有就鏟除：對象.classlist.toggle（‘類名’）

.bigbox {width: 560px;height: 400px;background-color: #ffffff;border: 1px solid #000000;display: flex;flex-direction: column;}
.slipImg {width:100%;height: 400px;background-color: antiquewhite;display: flex;overflow: hidden;
}
.slipImg img {width: 100%;height: 100%;object-position:center ;
}
.imgTitle{background-color: gray;
}
.imgTitle p {align-self: center;text-align: center;
}

const img = [       //添加數據{url:`./0.jpeg`,title:'讓我來結束這一切'},{url:`./1.jpeg`,title:'我沒說不去'},{url:`./2.jpeg`,title:'這話才不會告訴小愛音呢'},{url:`./3.jpeg`,title:'你是來吵架的嗎'},{url:`./4.jpeg`,title:'歐內該'},{url:`./5.jpeg`,title:'瓦塔西'},{url:`./6.jpeg`,title:'這不是小睦的錯哦'},{url:`./7.jpeg`,title:'無論這次，還是那次'}
]
let randomNum=parseInt(Math.random()*img.length)
console.log(randomNum)
const slipImg = document.querySelector('.slipImg img')
slipImg.src=img[randomNum].url
const imgTitle = document.querySelector('.imgTitle p')
imgTitle.innerHTML=img[randomNum].title

操作表單元素屬性

獲取表單里的內容：表單.value=值

更改表單的類型：表單.type=值

表單的一些屬性如disable、checked、selected添加了就具有效果，移除就沒有效果，有無屬性用布爾值表示，true表示有該屬性

const inp = document.querySelector('input')
inp.type='text'
const butt = document.querySelector('button')
butt.disabled= false

標簽屬性

標簽屬性分為標準屬性和自定義屬性，HTML5可以自定義屬性，用于給標簽添加功能

自定義屬性的命名為data-屬性名

在標簽上屬性一律以data-開頭，在DOM對象上一律以dataset對象的方式獲取

間歇函數（定時器）

實現網頁中每隔一段時間自動執行一段代碼，無需手動刷新

開啟定時器：setInterval(函數，間隔時間)，作用：每間隔一段時間，調用一次這個函數，間隔單位是毫秒，定時器有返回值，返回值是一個id數字

關閉定時器：首先給開啟定制器一個變量名let 變量名=setInterval(函數，間隔時間)，

????????????????? ? ? 之后使用clearInterval(變量名)去關閉定時器

//用戶協議
const butt = document.querySelector('.butt')
butt.disabled=true
let i = 10
let daojishi=setInterval(function(){i--butt.innerHTML= `倒計時${i}`if(i===0){clearInterval(daojishi)butt.disabled=falsebutt.innerHTML= `我同意`}
},1000)

事件監聽

事件是編程系統內發生的用戶操作，事件監聽就是程序檢測是否有事件產生，若產生則調用一個函數回應

語法：對象.addEventListener('事件類型'，調用的函數)

事件監聽三要素：事件源、事件類型和事件調用函數

事件源：確定出發的是哪個DOM元素

事假類型：事件觸發方式，事件類型分為四種：鼠標事件、焦點事件、鍵盤事件、文本事件

? ? ? ? ? ? ? ? ? 鼠標事件有：click 鼠標點擊；mouseenter 鼠標經過；mouseleave 鼠標離開

//隨機點名案例
const imgSlip = document.querySelector('.slipImg img')
const imgTitle = document.querySelector('.imgTitle p')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
start.addEventListener('click',function(){Slip =setInterval(function(){let random = parseInt(Math.random()*img.length)console.log(random)imgSlip.src = img[random].urlimgTitle.innerHTML = img[random].title},100)
})
end.addEventListener('click',function(){clearInterval(Slip)
})

? ? ? ? ? ? ? ? ? 焦點事件有：表單獲得光標觸發，focus 獲得焦點；blur 失去焦點

//下拉菜單案例
const input = document.querySelector('[type=search]')
const list = document.querySelector('.list')
input.addEventListener('focus',function(){list.style.display='block'
})
input.addEventListener('blur',function(){list.style.display='none'
})

? ? ? ? ? ? ? ? ? 鍵盤事件有：keydown 鍵盤按下觸發；keyup 鍵盤抬起觸發

? ? ? ? ? ? ? ? ? 文本事件有：input 用戶輸入文本觸發

事件調用函數

//評論字數案例
const comment = document.querySelector('[type=text]')
const commentMoni = document.querySelector('.comment-moni')
commentMoni.style.opacity=0
comment.addEventListener('input',function(){let charNum = comment.value.lengthcommentMoni.style.opacity=1commentMoni.innerHTML=`已經輸入${charNum}個字`console.log(1);
})

事件對象

事件對象也是對象，對象里存儲了事件觸發的相關信息，事件對象可以判斷用戶進行了哪些操作，例如鼠標點擊了某個元素或者鍵盤按下了哪些鍵

獲取事件對象：在事件調用函數中第一個參數就是事件對象，一般命名為e\ev\event

事件對象的屬性

部分常用屬性有：

type：獲取當前事件類型

clientX/clientY：獲取光標相對于瀏覽器可見窗口最左上角的位置

offsetX/offsetY：獲取光標相對于當前DOM元素左上角的位置

key：用戶按下鍵盤的值

//評論案例
comment.addEventListener('keyup',function(e){let charNum = comment.value.lengthcommentMoni.style.opacity=1commentMoni.innerHTML=`已經輸入${charNum}個字`console.log(1);if(e.key==='Enter'){alert(comment.value)comment.value=''commentMoni.style.opacity=0}})

環境對象

環境對象指每個函數里特殊的對象this，用于指向調用函數的對象，普通函數里this指向瀏覽器窗口window，粗略來說誰調用函數this指向誰

回調函數

若函數A可以作為參數傳遞給函數B時，A稱為回調函數，常用的有定時器函數、事件監聽函數里的函數就是回調函數，匿名函數常用作回調函數

//模擬導航欄
const navList = document.querySelectorAll('.nav-list li')
const contentList = document.querySelectorAll('.content-list li')
console.log(navList)
console.log(contentList)
for(let i = 0;i<navList.length;i++){navList[i].addEventListener('mouseenter',function(){document.querySelector('.nav-list .active').classList.remove('active')this.classList.add('active')document.querySelector('.content-list .content-active').classList.remove('content-active')document.querySelector(`.content-list  li:nth-child(${i+1})`).classList.add('content-active')})
}

//全選案例
//獲取全選框和所有的小選擇框
const checkAll = document.querySelector('#checkall')
console.log(checkAll)
const checks = document.querySelectorAll('.ck')
console.log(checks)
//當勾選全選框時控制小選擇框
checkAll.addEventListener('click',function(){for(let i = 0;i<checks.length;i++){checks[i].checked=this.checked}
})
//循環判斷選擇小選擇框的長度（偽類選擇器）是否等于小選擇框的總長度,每選中一個小框監聽一次
for(let i = 0;i<checks.length;i++){checks[i].addEventListener('click',function(){console.log(document.querySelectorAll('.ck:checked'))checkAll.checked=document.querySelectorAll('.ck:checked').length===checks.length})  
}

事件流

事件流指事件完整執行中的流動路徑，事件流的分為兩個階段：捕獲階段和冒泡階段，實際工作以冒泡階段為主

捕獲階段：從document到標簽對象的過程，例如：document.addEventlistener(事件，函數，[是否捕獲事件])，第三維若為true，則事件按照document到選中的對象從大到小流動執行，一般省略不寫，默認為false（冒泡）

冒泡階段：從標簽對象到document的過程,當一個元素事件被觸發時，會依次向上調用所有的父級元素同名事件

阻止冒泡：將事件限制在當前元素內，阻止冒泡的前提是拿到事件對象，語法為：

??????????????????事件對象.stopPropagation()；此方法為阻止事件流，同樣適用于捕獲

//阻止冒泡
const fa = document.querySelector('.father')
const so = document.querySelector('.son')
fa.addEventListener('click',function(){alert('爸爸')
})
so.addEventListener('click',function(e){alert('兒子')e.stopPropagation()
})

事件解綁

可以在觸發一次事件后不再觸發該事件，語法：

removeEventListener(事件類型，事件處理函數，[冒泡或捕獲階段])；匿名函數無法解綁

事件委托

可以用冒泡階段實現事件委托，事件委托可以減少事件注冊次數，提高程序性能。只給父元素綁定事件，當觸發子元素時觸發父元素的事件，使用事件對象.target.tagName獲得真正需要觸發的元素

//事件委托版本導航欄
const tabNav = document.querySelector('.nav-list')//拿到父元素
tabNav.addEventListener('click',function(e){document.querySelector('.table-nav .nav-list .active').classList.remove('active')//將上一個元素解綁e.target.classList.add('active')//綁定點擊的事件console.log(e.target.dataset.id)//使用自定義屬性去一一對應圖片const id = +e.target.dataset.iddocument.querySelector('.content-list .content-active').classList.remove('content-active')document.querySelector(`.content-list li:nth-child(${id+1})`).classList.add('content-active')//更換圖片
})

阻止元素默認行為

例如在填寫表單時，只要有內容不合法，就阻止提交按鈕，語法為：

事件對象.preventDefault()

頁面加載事件

頁面加載事件寫在<title>標簽的下方，頁面加載事件有兩種：

用于加載外部資源全部加載完畢時觸發的事件，使用較少，監聽頁面所有資源是否加載完成；給window添加事件，事件名：load

window.addEventListener('load',function(){})

用于只加載出HTML結構，而無需等待CSS、圖片等資源加載出來的事件；給document添加事件，事件名：DOMContentLoaded

document.addEventListener('DOMContentLoaded',function(){})

頁面滾動事件

用于在頁面滾動或頁面滾動到一個區域時進行一些處理

事件名：scroll

可以監聽整個頁面的滾動：window.addEventListener('scroll',function(){})(給documengt或者window添加都可)

也可以監聽單個元素的滾動

有關頁面滾動的屬性有：

scrollTop和scrollLeft：返回元素內容向上/左滾動時被卷去的內容長度，即超出元素上/左邊框的長度

如果向知道整個頁面滾動的長度：document.documentElement：獲取整個html

//當頁面下滑一段距離后顯示側邊欄
window.addEventListener('scroll',function(){const elevator = document.querySelector('.soyo-elevator')if(document.documentElement.scrollTop>=300){elevator.style.opacity=1}else{elevator.style.opacity=0}
})

日期對象

日期對象是用來表示時間的對象，用于得到當前系統時間，在JS代碼中使用new關鍵字對對象進行賦值的，稱為實例化

獲得當前系統時間：const date = new Date（）

獲得指定時間: const date = new Date('指定的時間')

日期對象的方法有：

getFullyear()：獲得四位年份

getMonth()：獲得月份，取值為0-11

getDate()：獲得月份中的每一天

getDay()：獲取星期，取值為0-6

getHours()：獲取小時，取值為0-23

getMinutes()：獲取分鐘，取值為0-59

getSeconds()：獲取秒，取值為0-59

時間戳

JS中時間戳是指1970年01月01日00時00分00秒起至現在時間相差的毫秒數，通過時間戳可以得到真隨機數和兩段時間的時間差，有三種方法獲得時間戳：

getTime()方法：必須實例化，再用實例化的對象調用這個方法

簡寫為+new Date()(最常用)：無需實例化，直接獲取當前時間的時間戳，也可以使用+new Date（‘指定的時間’）獲取指點時間時間戳

使用Date.now()：無需實例化，直接獲取當前時間的時間戳

//在網頁實時演示時鐘和指定時間的倒計時
const myDate = document.querySelector('.time-date')//獲取對象
const timeCount = document.querySelector('.time-count')
const targetTime = +new Date('2025-8-30 00:00:00')//指定時間的時間戳
const weekTable = ['日','一','二','三','四','五','六']
console.log(targetTime)
setInterval(function(){const date = new Date()//獲得當前系統時間const nowDate = +new Date()//獲得當前系統時間的時間戳let year = date.getFullYear()//獲得當前年let month = date.getMonth()+1//獲得當前月let day = date.getDate()let week = date.getDay()let hours = date.getHours()let minutes = date.getMinutes()+1let second = date.getSeconds()+1myDate.innerHTML = `現在的時間為：${year}年${month}月${day}日${hours}時${minutes}分${second}秒 星期${weekTable[week]}`//顯示當前時間let timeDown = (targetTime-nowDate)/1000//得到相差的時間秒數let hourDown = 0//相差的小時數let minuteDown = 0 //相差的分鐘數let secondDown = 0//相差的秒數if(timeDown>=3600){hourDown=Math.floor(timeDown/3600)timeDown=timeDown%3600  }if(timeDown>=60){minuteDown=Math.floor(timeDown/60)timeDown=timeDown%60}secondDown=Math.floor(timeDown)timeCount.innerHTML=`倒計時:${hourDown}時 ${minuteDown}分 ${secondDown}秒`
},1000)

節點

DOM樹里的每一個內容都稱為節點，節點分為：

元素節點：所有的標簽

屬性節點：所有的屬性

文本節點：所有的文本

節點可以進行查找、新增、克隆和刪除操作

查找節點

根據關系查找節點，使用查找節點方法可以減少標簽獲取，節點的關系分為父節點、子節點、兄弟節點

父節點查找：子元素.parentNode，查找子元素最近的一級父節點，若找不到就返回null

子節點查找：父元素.chlidNodes：獲得所有的子節點，以偽數組的形式返回

? ? ? ? ? ? ? ? ? ? ? 父元素.children（常用）：獲得所有的最近的子元素節點，以偽數組的形式返回

兄弟節點查找：下一個兄弟節點：nextElementSibling

? ? ? ? ? ? ? ? ? ? ? ? ? 上一個兄弟節點：previousElementsSibling

增加節點

新增節點指創建一個新的節點并將其放入指定元素內部

創建節點的方法：document.createElement('標簽名')

將創建的節點插入指定父元素內部的方法：

插入到父元素的最后：父元素.appendChild('需要插入的元素')

插入到父元素指定子元素之前：父元素.insertBefore（‘插入在前的元素’）

克隆節點

克隆節點用于復制一個原有的節點，并可將該節點放入指定元素內部，方法為：

元素.cloneNode(布爾值)；布爾值若為true，則代表包含后代節點一起克隆，若為false，則克隆不包含后代節點，默認為false

刪除節點

在JS的原生DOM中，刪除節點必須經過父元素，語法為：

父元素.removeChild('需要刪除的子元素')；若兩個元素無父子關系，則不可刪除

M端事件

M端指移動端，有自己獨有的事件，包括：

觸屏事件torch

torchstart：手指觸摸到一個DOM元素觸發；

touchmove：手指在一個DOM元素上上滑觸發；

touchend：手指在一個DOM元素上移開時觸發；

swiper插件

別人寫好的代碼，可以在寫自己的網頁時復用

//表單提交案例：在表單上填寫信息提交后在下方的表格顯示
const submit = document.querySelector('.info-submit')//獲取元素
const info = document.querySelector('.info div').children//獲取所有的表單
const infoTable = document.querySelector('.info-table')//獲取表格
console.log(submit,info,infoTable)
submit.addEventListener('click',function(){const newLine = document.createElement('tr')//點擊后在表格里創建新的一行infoTable.appendChild(newLine)//將新行添加到表格下方for(i=0;i<info.length;i++){const infoma = document.createElement('td')//創建新的一個單元格infoma.innerText=info[i].value//獲取表單的內容newLine.appendChild(infoma)//將單元格添加到新的行中}//循環寫入表單的內容到表格
})//監聽提交按鈕

13、BOM

BOM概念

BOM，為瀏覽器對象模型，BOM里包含DOM，BOM是瀏覽器提供的一組對象，里面最重要的是window對象，BOM里的其他對象都是通過window對象來訪問

window是全局對象，也是JS中最頂級的對象，基本所有的BOM屬性和方法都是基于window的，因此window對象下的屬性和方法調用時可以省略window。所有通過var定義的全局變量、函數都會變成window的屬性和方法

延時函數

JS內置的一個讓代碼延遲執行的函數，代碼只執行一次，因為有延遲，因此延遲函數后的代碼會先執行，與間歇函數一樣，都屬于BOM的方法，因此調用時一般省略window，語法為：

setTimeout(回調函數，等待的毫秒數)

清除延時函數，與間歇函數方法一致：

將延遲函數賦予給一個變量：let 變量=setTimeout()

???????????????????????????????????????????????clearTimeout(timer)

//設計一個五秒后自動關閉的廣告
const adv = document.querySelector('.advertisement')
setTimeout(function(){adv.style.display= 'None'
},5000)

?location對象

location的數據類型為對象，其拆分并保存了URL地址的各個組成部分，其常用的屬性和方法有：

herf：獲取完整的URL地址，對其賦值可以完成頁面跳轉

search：獲取地址中的參數，即?后面的部分

hash：獲取地址中的哈希值，即#后面的部分

reload：用于刷新當前頁面，傳入參數為ture時強制刷新

navigator對象

navigator記錄瀏覽器的相關信息，常用的屬性有：

userAgent：檢測瀏覽器的版本和所在平臺

history對象

history管理歷史記錄，不常用，主要屬性和方法有：

back()：后退

forward()：前進

go(參數)：實現前進后退，如果是1則前進一個頁面，-1則后退一個頁面

本地存儲

HTML5中新增了本地存儲的功能，即將數據存儲在本地瀏覽器中，方便數據的讀取，且頁面刷新時不丟失數據，本地存儲分為兩類：localStorage和sessionStorage

localStorage：永久性的將數據以鍵值對的形式存儲在本地電腦上，可以利用同一個瀏覽器多窗口共享，語法有：

存儲數據:localStorage.setItem(key,value),若有該數據則進行更改，沒有則進行新增

獲取數據:localStorage.getItem(key)

刪除數據：localStorage.removeItem(key)

sessionStorage：生命周期為關閉瀏覽器窗口，同一個窗口可以共享數據，以鍵值對的形式存儲，方法和localStorage相同

因為本地存儲只能存儲字符串，所以當需要在本地存儲復雜數據類型時需要將復雜數據類型轉換為JSON字符串，將復雜數據類型轉換為字符串保存，語法為：

JSON.stringify(復雜數據)

將JSON字符串轉換為對象：

JSON.parse(JSON字符串)

//表單提交本地存儲版
const submit = document.querySelector('.info-submit')//獲取元素
const info = document.querySelector('.info div').children//獲取所有的表單
const infoTable = document.querySelector('.info-table')//獲取表格
const objStrore = []//創建一個空數組，用于存儲信息
console.log(submit,info,infoTable)
submit.addEventListener('click',function(){const newLine = document.createElement('tr')//點擊后在表格里創建新的一行infoTable.appendChild(newLine)//將新行添加到表格下方let data ={}//空對象const valueList = []//創建一個值表for(i=0;i<info.length;i++){const infoma = document.createElement('td')//創建新的一個單元格infoma.innerText=info[i].value//獲取表單的內容newLine.appendChild(infoma)//將單元格添加到新的行中valueList.push(info[i].value)//向值表添加信息}console.log(valueList)data.name= valueList[0]//填入信息data.tele= valueList[1]data.address= valueList[2]data.school= valueList[3]console.log(data)//將數據存儲到數組中objStrore.push(data)console.log(objStrore)//將數組的數據存儲到本地try {let jsondata = JSON.stringify(objStrore) // 將數組轉換為 JSON 字符串localStorage.setItem('obj', jsondata)} catch (error) {console.error('存儲到 localStorage 失敗:', error)}
})
//下次打開用本地存儲渲染頁面
let datalocal = JSON.parse(localStorage.getItem('obj'));
console.log(datalocal);
console.log(datalocal.length);
for (let i = 0; i < datalocal.length; i++) { const newLine = document.createElement('tr');infoTable.appendChild(newLine); // 將新行添加到表格下方// 創建單元格并添加數據const nameCell = document.createElement('td');nameCell.innerText = datalocal[i].name;newLine.appendChild(nameCell);const teleCell = document.createElement('td');teleCell.innerText = datalocal[i].tele;newLine.appendChild(teleCell);const addressCell = document.createElement('td');addressCell.innerText = datalocal[i].address;newLine.appendChild(addressCell);const schoolCell = document.createElement('td');schoolCell.innerText = datalocal[i].school;newLine.appendChild(schoolCell);
}

14、正則表達式

正則表達式是用于匹配字符串中字符組合的模式，通常用于查找、替換符合正則表達式中的文本，在JS中正則表達式也是對象。在JS中正則表達式用于驗證用戶輸入的表單、替換敏感詞。

正則表達式的編寫分為兩步：定義規則和查找

在JS中定義正則表達式的語法有兩種

正則表達式語法

定義規則：通過定義自變量的方式；const 變量名 = /表達式/，其中/ /中包裹的部分稱為正則表達式的字面量

查找：使用test()方法，用來查看檢測字符與指定字符是否匹；變量名.test(被檢測的字符)；如果有匹配的字符則返回ture，否則返回false（常用）

? ? ? ? ? ?使用exec()方法，語法與test()一致，匹配成功返回一個數組，數組包含字面量、用于匹配的字符、字面量第一個字符在檢測字符串里的索引和groups，否則返回null

元字符

使用元字符的方法，元字符指一些具有特殊意義的字符，可以極大提高靈活性和匹配功能。元字符分為三類

邊界符：表示字符在字符串中所處的位置，一般用于判斷字符串的開頭和結尾，主要有：

????????????????^ 用于匹配行首的文本，

? ? ? ? ? ? ? ? $ 用于匹配行尾的文本

????????????????^字符$ 用于精準匹配字符，必須以該字符開頭，以該字符結尾，例如^a$，測試文本是'a'為ture，是'aa'則為false

量詞：表示某種字符或某個字符的重復次數，主要有：

? ? ? ? ? ??* 表示重復0次或多次

? ? ? ? ? ? + 表示重復一次或多次

? ? ? ? ? ? ？表示重復一次或0次

? ? ? ? ? ? {n} 重復n次

? ? ? ? ? ? {n,} 至少重復n次

? ? ? ? ? ? {n,m} 重復n到m次

字符：表示匹配某種字符，比如：

? ? ? ? ? ?[a-z] 表示a-z26個小寫字母

? ? ? ? ? ?[a-zA-Z]表示26個大小寫字母

? ? ? ? ? ?[0-9]：表示0-9的數?

//在線驗證表單案例：輸入用戶名和密碼
//用戶名長度為6-12位大小寫字母、數字和下劃線組合，不允許有特殊符號
//密碼長度為6-20位大小寫字母、數字、下劃線和特殊符號，且密碼第一位必須為大寫字母或特殊符號
//判斷后給出提示，如果格式正確則顯示綠色并允許提交，否則顯示紅色
const userName = document.querySelector('.username input')//獲取元素
const userPassword = document.querySelector('.user-password input')
const userNamebox = document.querySelector('.username')
const userPassbox = document.querySelector('.user-password')
const userNamefomu = /^[a-zA-Z0-9_]{6,12}$/ //正則表達式用于匹配用戶名的字符
const userPassfomu = /^[A-Z_@#$%^&*!][a-zA-Z_@#$%^&*!]{5,19}$/ //用于匹配用戶密碼的字符
console.log(userName,userPassword)
userName.addEventListener('blur',function(){const userNameinfo = userName.value//獲取表單信息userName.classList.remove('ture')//移除表單元素userName.classList.remove('false')if(userNamefomu.test(userNameinfo)){//判斷userName.classList.add('ture')//若為真，則表單變綠}else{userName.classList.add('false')const extips =userNamebox.querySelector('p')//移除之前的提示信息if(extips){userPassbox.removeChild(e)}const tips = document.createElement('p')//新建一個提示標簽tips.innerText='用戶名長度為6-12位大小寫字母、數字和下劃線組合，不允許有特殊符號'userNamebox.appendChild(tips)}
})//監聽用戶名表單失去焦點時觸發事件
userPassword.addEventListener('blur',function(){const userPassinfo = userPassword.valueuserPassword.classList.remove('ture')userPassword.classList.remove('false')userPassword.classList.add('false')if(userPassfomu.test(userPassinfo)){userPassword.classList.add('ture')}else{const extips =userPassbox.querySelector('p')//移除之前的提示信息if(extips){userPassbox.removeChild(e)}const tips = document.createElement('p')//新建一個提示標簽tips.innerText='密碼長度為6-20位大小寫字母、數字、下劃線和特殊符號，且密碼第一位必須為大寫字母或特殊符號'userPassbox.appendChild(tips)}
})//監聽用戶密碼表單失去焦點觸發事件

元字符中預定義類

指常見模式的間歇方式

\d 匹配0-9之間的數字

\D 匹配除0-9之外的數字

\w 匹配任意的字母、數字、下劃線

\W 匹配除字母、數字、下劃線以外所有字符

\s 匹配空格

\S 匹配除空格以外所有字符