02-前端Web開發(JS+Vue+Ajax)

介紹

在前面的課程中，我們已經學習了HTML、CSS的基礎內容，我們知道HTML負責網頁的結構，而CSS負責的是網頁的表現。而要想讓網頁具備一定的交互效果，具有一定的動作行為，還得通過JavaScript來實現。那今天,我們就來講解JavaScript，這門語言會讓我們的頁面能夠和用戶進行交互。

那什么是JavaScript呢 ?

JavaScript（簡稱：JS）是一門跨平臺、面向對象的腳本語言，是用來控制網頁行為的，實現人機交互效果。JavaScript 和 Java 是完全不同的語言，不論是概念還是設計。但是基礎語法類似。

組成：

- ECMAScript: 規定了JS基礎語法核心知識，包括變量、數據類型、流程控制、函數、對象等。
- BOM：瀏覽器對象模型，用于操作瀏覽器本身，如：頁面彈窗、地址欄操作、關閉窗口等。
- DOM：文檔對象模型，用于操作HTML文檔，如：改變標簽內的內容、改變標簽內字體樣式等。

備注：ECMA國際（前身為歐洲計算機制造商協會），制定了標準化的腳本程序設計語言 ECMAScript，這種語言得到廣泛應用。而JavaScript是遵守ECMAScript的標準的（ES2024是最新版本）。

1. JS 核心語法

1.1 JS引入方式

同樣，js代碼也是書寫在html中的，那么html中如何引入js代碼呢？主要通過下面的2種引入方式：

第一種方式：內部腳本，將JS代碼定義在HTML頁面中

- JavaScript代碼必須位于<script></script>標簽之間
- 在HTML文檔中，可以在任意地方，放置任意數量的<script></script>
- 一般會把腳本置于<body>元素的底部，可改善顯示速度
- 例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS 引入方式</title>
</head>
<body><script>alert('Hello JS')</script>
</body>
</html>

第二種方式：外部腳本，將JS代碼定義在外部 JS文件中，然后引入到 HTML頁面中

- 外部JS文件中，只包含JS代碼，不包含<script>標簽
- 引入外部js的<script>標簽，必須是雙標簽
- 例子：

- - 在js目錄下，定義一個js文件demo.js，在文件中編寫js代碼，如下：

alert('Hello JS')

- - 在html文件中，通過<script></script>引入js文件demo.js，如下：

<script src="js/demo.js"></script>

- 注意1：demo.js中只有js代碼，沒有<script>標簽
- 注意2：通過<script></script>標簽引入外部JS文件時，標簽不能自閉合，如：<script src="js/demo.js" />

JS書寫規范：

- 結束符：每行js代碼，結尾以分號結尾，而結尾的分號可有可無。（建議在一個項目中保持一致，要么全部都加，要么全部都不加）
- 注釋：單行注釋，多行注解的寫法，與java中一致。

1.2 JS基礎語法

1.2.1 輸出語句

在JS中有3種輸出語句，分別是：

api	描述
window.alert(...)	警告框
document.write(...)	在HTML 輸出內容
console.log(...)	寫入瀏覽器控制臺

我們定義如下這么一段JS，來做一個測試：

<!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>JS基礎語法</title>
</head>
<body><script>//方式一: 寫入瀏覽器的body區域document.write("Hello JS (document.write)");//方式二: 彈出框window.alert("Hello JS (window.alert)");//方式三: 控制臺console.log("Hello JS (console.log)")</script>
</body>
</html>

1.2.2 變量

接下來，我們再來講解JS中的變量。在js中，變量的聲明和java中還是不同的。

JS中主要通過 let 關鍵字來聲明變量的。
JS是一門弱類型語言，變量是可以存放不同類型的值的。
變量名需要遵循如下規則：

- 組成字符可以是任何字母、數字、下劃線（_）或美元符號（$），且數字不能開頭
- 變量名嚴格區分大小寫，如：name和Name是不同的變量
- 不能使用關鍵字作為變量名，如：let、if、for等

變量的聲明示例如下所示：

<script>//變量let a = 20;a = "Hello";alert(a);
</script>

上述的示例中，大家會看到變量a既可以存數字，又可以存字符串。因為JS是弱類型語言。

PS. 在早期的JS中，聲明變量還可以使用 var 關鍵字來聲明。例如:

<body><script>//var聲明變量var name = "A";name = "B";alert(name);var name = "C"alert(name);</script>
</body>

打開瀏覽器運行之后，大家會發現，可以正常執行，第一次彈出 B，第二次彈出 C 。我們看到 name變量重復聲明了，但是呢，如果使用var關鍵字，是沒有問題的，可以重復聲明。

var聲明的變量呢，還有一些其他不嚴謹的地方，這里就不再一一列舉了，所以這個聲明變量的關鍵字，并不嚴謹【不推薦】。

2.2.2 常量

在JS中，如果聲明一個場景，需要使用const關鍵字。一旦聲明，常量的值就不能改變（不可以重新賦值）。

如下所示：

<body><script>//常量const PI = 3.14;PI = 3.15;alert(PI);</script>
</body>

瀏覽器打開之后，會報如下錯誤：

該錯誤就表示，常量不可以被重新分配值。

1.2.3 數據類型

雖然JS是弱數據類型的語言，但是JS中也存在數據類型，JS中的數據類型分為：原始數據類型和引用數據類型。那這部分，我們先來學習原始數據類型，主要包含以下幾種類型：

數據類型	描述
number	數字（整數、小數、NaN(Not a Number)）
string	字符串，單雙引('...')、雙引號("...")、反引號(`...`)皆可，正常使用推薦單引號
boolean	布爾。true，false
null	對象為空。 JavaScript 是大小寫敏感的，因此 null、Null、NULL是完全不同的
undefined	當聲明的變量未初始化時，該變量的默認值是 undefined

使用typeof 關鍵字可以返回變量的數據類型，接下來我們需要通過書寫代碼來演示js中的數據類型。代碼如下:

<!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>JS-數據類型</title>
</head>
<body><script>//原始數據類型alert(typeof 3); //numberalert(typeof 3.14); //numberalert(typeof "A"); //stringalert(typeof 'Hello');//stringalert(typeof true); //booleanalert(typeof false);//booleanalert(typeof null); //object var a ;alert(typeof a); //undefined</script>
</body>
</html>

對于字符串類型的數據，除了可以使用雙引號（"..."）、單引號（'...'）以外，還可以使用反引號（``）。而使用反引號引起來的字符串，也稱為 模板字符串。

模板字符串的使用場景：拼接字符串和變量。
模板字符串的語法：

- `...` ：反引號（英文輸入模式下鍵盤 tab 鍵上方波浪線 ~ 那個鍵）
- 內容拼接時，使用 ${ } 來引用變量

具體示例如下：

<script>let name = 'Tom';let age = 18;console.log('大家好, 我是新入職的' + name + ', 今年' + age + '歲了, 請多多關照'); //原始方式 , 手動拼接字符串console.log(`大家好, 我是新入職的${name}, 今年${age}歲了, 請多多關照`); //使用模板字符串方式拼接字符串</script>

1.2.4 函數

函數（function）是被設計用來執行特定任務的代碼塊，方便程序的封裝復用。那我們學習函數，主要就是學習JS中函數的定義及調用的語法。

1.2.4.1 方式一

格式如下：

function 函數名(參數1,參數2..){要執行的代碼
}

因為JavaScript是弱數據類型的語言，所以有如下幾點需要注意：

形參不需要聲明類型，并且JS中不管什么類型都是let去聲明，加上也沒有意義。
返回值也不需要聲明類型，直接return即可

示例：

function add(a, b){return a + b;
}

如果要調用上述的函數add，可以使用：函數名稱(實際參數列表)

let result = add(10,20);
alert(result);

我們在調用add函數時，再添加2個參數，修改代碼如下：

var result = add(10,20,30,40);
alert(result);

瀏覽器打開，發現沒有錯誤，并且依然彈出30，這是為什么呢？

因為在JavaScript中，函數的調用只需要名稱正確即可，參數列表不管的。如上述案例，10傳遞給了變量a，20傳遞給了變量b，而30和40沒有變量接受，但是不影響函數的正常調用。

注意：由于JS是弱類型語言，形參、返回值都不需要指定類型。在調用函數時，實參個數與形參個數可以不一致，但是建議一致。

1.2.4.2 方式二

剛才我們定義函數，是為函數指定了一個名字。那我們也可以不為函數指定名字，那這一類的函數，我們稱之為匿名函數。那接下來，方式二，就來介紹一下匿名函數的定義和調用。

匿名函數：是指一種沒有名稱的函數，由于它們沒有名稱，因此無法直接通過函數名來調用，而是通過變量或表達式來調用。

匿名函數定義可以通過兩種方式：函數表達式和箭頭函數。

示例一（函數表達式）：

var add = function (a,b){return a + b;
}

示例二（箭頭函數）：

var add = (a,b) => {return a + b;
}

上述匿名函數聲明好了之后，是將這個函數賦值給了add變量。那我們就可以直接通過add函數直接調用，調用代碼如下：

let result = add(10,20);
alert(result);

而箭頭函數這種形式，在現在的前端開發中用的會更多一些。

1.2.4.3 自定義對象

在 JavaScript 中自定義對象特別簡單，其語法格式如下：

let 對象名 = {屬性名1: 屬性值1,屬性名2: 屬性值2,屬性名3: 屬性值3,方法名稱: function(形參列表){}
};

我們可以通過如下語法調用屬性：

對象名.屬性名

通過如下語法調用函數：

對象名.方法名()

代碼演示：

<script>//自定義對象let user = {name: "Tom",age: 10,gender: "男",sing: function(){console.log("悠悠的唱著最炫的民族風~");}}console.log(user.name);user.eat();
<script>

瀏覽器控制臺結果如下：

其中，上述函數定義的語法可以簡化成如下格式：

<script>//自定義對象let user = {name: "Tom",age: 10,gender: "男",sing(){console.log("悠悠的唱著最炫的民族風~");}}console.log(user.name);user.eat();
<script>

1.2.4..4 JSON

JSON對象：JavaScript Object Notation，JavaScript對象標記法。JSON是通過JavaScript標記法書寫的文本。其格式如下：

{"key":value,"key":value,"key":value
}

其中，key必須使用引號并且是雙引號標記，value可以是任意數據類型。

而由于語法簡單，層級結構鮮明，現多用于作為數據載體，在網絡中進行數據傳輸。

代碼演示:

//3. JSON - JS對象標記法
let person = {name: 'itcast',age: 18,gender: '男'
}
alert(JSON.stringify(person)); //js對象 --> json字符串let personJson = '{"name": "heima", "age": 18}';
alert(JSON.parse(personJson).name);

API說明：

JSON.stringify(...)：作用就是將js對象，轉換為json格式的字符串。

JSON.parse(...)：作用就是將json格式的字符串，轉為js對象。

1.2.5 流程控制

在JS中，當然也存在對應的流程控制語句。常見的流程控制語句如下：

if ... else if ... else ...
switch
for
while
do ... while

而JS中的流程控制語句與JAVA中的流程控制語句的作用，執行機制都是一樣的。這個呢，我們現在就不再一個一個的如研究了，后面用到的時候，我們再做說明。

1.2.6 JS DOM

1.2.6.1 DOM介紹

DOM：Document Object Model 文檔對象模型。也就是 JavaScript 將 HTML 文檔的各個組成部分封裝為對象。

DOM 其實我們并不陌生，之前在學習 XML 就接觸過，只不過 XML 文檔中的標簽需要我們寫代碼解析，而 HTML 文檔是瀏覽器解析。封裝的對象分為

Document：整個文檔對象
Element：元素對象
Attribute：屬性對象
Text：文本對象
Comment：注釋對象

如下圖，左邊是 HTML 文檔內容，右邊是 DOM 樹

那么我們學習DOM技術有什么用呢？主要作用如下：

改變 HTML 元素的內容
改變 HTML 元素的樣式（CSS）
對 HTML DOM 事件作出反應
添加和刪除 HTML 元素

1.2.6.2 DOM操作

DOM的核心思想：將網頁的內容當做對象來處理，標簽的所有屬性在該對象上都可以找到，并且修改這個對象的屬性，就會自動映射到標簽身上。
document對象

- 網頁中所有內容都封裝在document對象中
- 它提供的屬性和方法都是用來訪問和操作網頁內容的，如：document.write(…)

DOM操作步驟:

- 獲取DOM元素對象
- 操作DOM對象的屬性或方法 (查閱文檔)

我們可以通過如下兩種方式來獲取DOM元素。

- 根據CSS選擇器來獲取DOM元素，獲取到匹配到的第一個元素：document.querySelector('CSS選擇器');
- 根據CSS選擇器來獲取DOM元素，獲取匹配到的所有元素：document.querySelectorAll('CSS選擇器');

注意：獲取到的所有元素，會封裝到一個NodeList節點集合中，是一個偽數組（有長度、有索引的數組，但沒有push、pop等數組方法）

代碼演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-DOM</title>
</head>
<body><h1 id="title1">11111</h1><h1>22222</h1><h1>33333</h1><script>//1. 修改第一個h1標簽中的文本內容//1.1 獲取DOM對象// let h1 = document.querySelector('#title1');//let h1 = document.querySelector('h1'); // 獲取第一個h1標簽let hs = document.querySelectorAll('h1');//1.2 調用DOM對象中屬性或方法hs[0].innerHTML = '修改后的文本內容';</script>
</body>
</html>

PS：在早期的JS中，我們也可以通過如下方法獲取DOM元素（了解）。

document.getElementById(...)：根據id屬性值獲取，返回單個Element對象。
document.getElementsByTagName(...)：根據標簽名稱獲取，返回Element對象數組。
document.getElementsByName()：根據name屬性值獲取，返回Element對象數組。
document.getElementsByClassName()：根據class屬性值獲取，返回Element對象數組。

2. JS 事件監聽

2.1 事件介紹

什么是事件呢？HTML事件是發生在HTML元素上的 “事情”，例如：

按鈕被點擊
鼠標移到元素上
輸入框失去焦點
按下鍵盤按鍵
........

而我們可以給這些事件綁定函數，當事件觸發時，可以自動的完成對應的功能，這就是事件監聽。

例如：對于我們所說的百度注冊頁面，我們給用戶名輸入框的失去焦點事件綁定函數，當我們用戶輸入完內容，在標簽外點擊了鼠標，對于用戶名輸入框來說，失去焦點，然后執行綁定的函數，函數進行用戶名內容的校驗等操作。

JS事件是JS非常重要的一部分，接下來我們進行事件的學習。那么我們對于JavaScript事件需要學習哪些內容呢？我們得知道有哪些常用事件，然后我們得學會如何給事件綁定函數。

所以主要圍繞2點來學習：①. 事件監聽、②. 常用事件

2.2 事件監聽語法

JS事件監聽的語法:

事件源.addEventListener('事件類型', 要執行的函數);

在上述的語法中包含三個要素:

事件源: 哪個dom元素觸發了事件, 要獲取dom元素
事件類型: 用什么方式觸發, 比如: 鼠標單擊 click, 鼠標經過 mouseover
要執行的函數: 要做什么事

演示：

<!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>JS-事件-事件綁定</title>
</head><body><input type="button" id="btn1" value="點我一下試試1"><input type="button" id="btn2" value="點我一下試試2"><script>document.querySelector("#btn1").addEventListener('click', ()=>{alert("按鈕1被點擊了...");})</script>
</body>
</html>

JavaScript對于事件的綁定還提供了另外2種方式（早期版本）：

1). 通過html標簽中的事件屬性進行綁定

例如一個按鈕，我們對于按鈕可以綁定單機事件，可以借助標簽的onclick屬性，屬性值指向一個函數。

<input type="button" id="btn1" value="點我一下試試1" onclick="on()"><script>function on(){alert('試試就試試')}
</script>

2). 通過DOM中Element元素的事件屬性進行綁定

依據我們學習過得DOM的知識點，我們知道html中的標簽被加載成element對象，所以我們也可以通過element對象的屬性來操作標簽的屬性。

例如一個按鈕，我們對于按鈕可以綁定單機事件，可以通過DOM元素的屬性，為其做事件綁定。

<body><input type="button" id="btn1" value="點我一下試試1"><script>document.querySelector('#btn1').onclick = function(){alert("按鈕2被點擊了...");}</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>JS-事件-事件綁定</title>
</head><body><input type="button" id="btn1" value="事件綁定1"><input type="button" id="btn2" value="事件綁定2"><script>document.querySelector("#btn1").addEventListener('click', ()=>{alert("按鈕1被點擊了...");})document.querySelector('#btn2').onclick = function(){alert("按鈕2被點擊了...");}</script>
</body>
</html>

addEventListener 與 on事件區別:

on方式會被覆蓋，addEventListener 方式可以綁定多次，擁有更多特性，推薦使用 addEventListener .

2.3 隔行換色案例

需求：實現鼠標移入數據行時，背景色改為#f2e2e2，鼠標移出時，再將背景色改為白色。

效果：

這個功能，我們就可以直接基于通義零碼來幫我們實現了。

提示詞（prompt）：

通過js實現鼠標移入移出效果，鼠標移入，背景色為 #f2e2e2，鼠標移出，背景色為白色。

最終完整代碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tlias智能學習輔助系統</title><style>body {margin: 0;}/* 頂欄樣式 */.header {display: flex;justify-content: space-between;align-items: center;background-color: #c2c0c0;padding: 20px 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 加大加粗標題 */.header h1 {margin: 0;font-size: 24px;font-weight: bold;}/* 文本鏈接樣式 */.header a {text-decoration: none;color: #333;font-size: 16px;}/* 搜索表單區域 */.search-form {display: flex;align-items: center;padding: 20px;background-color: #f9f9f9;}/* 表單控件樣式 */.search-form input[type="text"], .search-form select {margin-right: 10px;padding: 10px 10px;border: 1px solid #ccc;border-radius: 4px;width: 26%;}/* 按鈕樣式 */.search-form button {padding: 10px 15px;margin-left: 10px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;}/* 清空按鈕樣式 */.search-form button.clear {background-color: #6c757d;}.table {min-width: 100%; border-collapse: collapse;}/* 設置表格單元格邊框 */.table td, .table th { border: 1px solid #ddd; padding: 8px; text-align: center;}.avatar { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }/* 頁腳版權區域 */.footer {background-color: #c2c0c0;color: white;text-align: center;padding: 10px 0;margin-top: 30px;}.footer .company-name {font-size: 1.1em;font-weight: bold;}.footer .copyright {font-size: 0.9em;}#container {width: 80%;margin: 0 auto;}</style>
</head>
<body><div id="container"><!-- 頂欄 --><div class="header"><h1>Tlias智能學習輔助系統</h1><a href="#">退出登錄</a></div><!-- 搜索表單區域 --><form class="search-form" action="#" method="post"><input type="text" name="name" placeholder="姓名" /><select name="gender"><option value="">性別</option><option value="1">男</option><option value="2">女</option></select><select name="job"><option value="">職位</option><option value="1">班主任</option><option value="2">講師</option><option value="3">學工主管</option><option value="4">教研主管</option><option value="5">咨詢師</option></select><button type="submit">查詢</button><button type="reset" class="clear">清空</button></form><table class="table table-striped table-bordered"><thead><tr><th>姓名</th><th>性別</th><th>頭像</th><th>職位</th><th>入職日期</th><th>最后操作時間</th><th>操作</th></tr></thead><tbody><tr><td>令狐沖</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐沖" class="avatar"></td><td>講師</td><td>2021-03-15</td><td>2023-07-30T12:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td><td>學工主管</td><td>2020-04-10</td><td>2023-07-29T15:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>岳不群</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td><td>教研主管</td><td>2019-01-01</td><td>2023-07-30T10:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>寧中則</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="寧中則" class="avatar"></td><td>班主任</td><td>2018-06-01</td><td>2023-07-29T09:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>令狐沖</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐沖" class="avatar"></td><td>講師</td><td>2021-03-15</td><td>2023-07-30T12:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td><td>學工主管</td><td>2020-04-10</td><td>2023-07-29T15:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>岳不群</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td><td>教研主管</td><td>2019-01-01</td><td>2023-07-30T10:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>寧中則</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="寧中則" class="avatar"></td><td>班主任</td><td>2018-06-01</td><td>2023-07-29T09:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>令狐沖</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐沖" class="avatar"></td><td>講師</td><td>2021-03-15</td><td>2023-07-30T12:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td><td>學工主管</td><td>2020-04-10</td><td>2023-07-29T15:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>岳不群</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td><td>教研主管</td><td>2019-01-01</td><td>2023-07-30T10:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr><tr><td>寧中則</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="寧中則" class="avatar"></td><td>班主任</td><td>2018-06-01</td><td>2023-07-29T09:00:00Z</td><td class="btn-group"><button class="edit">編輯</button><button class="delete">刪除</button></td></tr></tbody></table><!-- 頁腳版權區域 --><footer class="footer"><p class="company-name">江蘇傳智播客教育科技股份有限公司</p><p class="copyright">版權所有 Copyright 2006-2024 All Rights Reserved</p></footer><script>//點擊列表中每一條記錄后面的刪除按鈕，彈出一個提示框，提示：您是否要刪除這條記錄？ 如果確定，則移出這條記錄const deleteButtons = document.querySelectorAll('.delete');for (let i = 0; i < deleteButtons.length; i++) {deleteButtons[i].addEventListener('click', function () {if (confirm('您是否要刪除這條記錄？')) {//點擊確定按鈕，刪除當前記錄this.parentNode.parentNode.remove();}});}//通過js實現鼠標移入移出效果，鼠標移入，背景色為 #f2e2e2，鼠標移出，背景色為 白色。const trs = document.querySelectorAll('tr');for (let i = 1; i < trs.length; i++) {trs[i].addEventListener('mouseenter', function () {this.style.backgroundColor = '#f2e2e2';});trs[i].addEventListener('mouseleave', function () {this.style.backgroundColor = '#fff';});}</script></div></body>
</html>

2.4 常見事件

上面案例中使用到了事件 click、mouseenter、mouseleave，那都有哪些事件類型供我們使用呢？下面就給大家列舉一些比較常用的事件屬性:

示例演示：

<!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>JS-事件-常見事件</title>
</head><body><form action="" style="text-align: center;"><input type="text" name="username" id="username"><input type="text" name="age" id="age"><input id="b1" type="submit" value="提交"><input id="b2" type="button" value="單擊事件"></form><br><br><br><table width="800px" border="1" cellspacing="0" align="center"><tr><th>學號</th><th>姓名</th><th>分數</th><th>評語</th></tr><tr align="center"><td>001</td><td>張三</td><td>90</td><td>很優秀</td></tr><tr align="center" id="last"><td>002</td><td>李四</td><td>92</td><td>優秀</td></tr></table><script>//click: 鼠標點擊事件document.querySelector('#b2').addEventListener('click', () => {console.log("我被點擊了...");})//mouseenter: 鼠標移入document.querySelector('#last').addEventListener('mouseenter', () => {console.log("鼠標移入了...");})//mouseleave: 鼠標移出document.querySelector('#last').addEventListener('mouseleave', () => {console.log("鼠標移出了...");})//keydown: 某個鍵盤的鍵被按下document.querySelector('#username').addEventListener('keydown', () => {console.log("鍵盤被按下了...");})//keydown: 某個鍵盤的鍵被抬起document.querySelector('#username').addEventListener('keyup', () => {console.log("鍵盤被抬起了...");})//blur: 失去焦點事件document.querySelector('#age').addEventListener('blur', () => {console.log("失去焦點...");})//focus: 元素獲得焦點document.querySelector('#age').addEventListener('focus', () => {console.log("獲得焦點...");})//input: 用戶輸入時觸發document.querySelector('#age').addEventListener('input', () => {console.log("用戶輸入時觸發...");})//submit: 提交表單事件document.querySelector('form').addEventListener('submit', () => {alert("表單被提交了...");})</script>
</body></html>

前面兩天，我們已經學習了前端網頁開發的三劍客：HTML、CSS、JS。那通過這三種技術呢，我們就可以開發出一個網頁程序了，但是如果我們使用原生的JS來處理界面的交互行為，開發效率呢，是比較低的。而在現在的企業項目開發中，一般會借助于Vue這樣的js框架來簡化操作、提高開發效率。那么我們今天接下來呢，就來學習Vue這個框架。