HTML + CSS + JavaScript

1 HTML

HTML 文件基本結構

HTML 開發工具

HTML 常見標簽

標題標簽：h1 - h6

段落標簽：p

換行標簽：br

圖片標簽：img

超鏈接標簽：a

表格標簽

表單標簽

form 標簽

input 標簽

select 標簽

textarea 標簽

無語意標簽：div & span

綜合練習

2. CSS

選擇器

標簽選擇器

class 選擇器

id 選擇器

通用選擇器

復合選擇器

引入方式

常用 CSS

color

font-size

border

width、height

padding

margin

3. JavaScript

引入方式

基本語法

變量

數據類型

運算符

JavaScript 對象

數組

函數

對象

jQuery

引入依賴

jQuery 語法

jQuery 選擇器

jQuery 事件

操作元素

綜合案例

總結?

1 HTML

瀏覽器右鍵都有個查看源代碼功能，里面就是 html，html 是超文本標記語言
超文本比文本能表示更多的內容，記事本是文本，word 屬于超文本，除了編輯文本還能設置格式
標記語言指由標簽構成的語言，標簽寫說明是如何顯示的

學習目標

認識常見標簽
后序不認識標簽通過網絡能認識（解決問題的能力）

標簽

標簽名放 <> 中
html 標簽大多是成對出現的，有開始標簽和結束標簽，中間是內容
少數標簽只有開始標簽，稱為 “單標簽”
標簽就是提前預設了一定格式

比如下方代碼

這個代碼并不規范，但瀏覽器能運行成功，是因為瀏覽器具有非常強的魯棒性

HTML 文件基本結構

<html><head><title>第?個??</title></head><body>hello world</body>
</html>

html 標簽是整個 html 文件的根標簽
head 標簽中寫頁面屬性
body 標簽中寫頁面顯示的內容
title 標簽中寫頁面標題
head 和 body 是html 的子標簽，html 是head 和 body 的父標簽
title 是 head 的子標簽，head 是title 的父標簽
head 好和 body 之間是兄弟關系

查找頁面元素

HTML 開發工具

可以 idea，也可以使用記事本，常使用 Visual Studio Code （簡稱 “VS Code” ）
在儲存文件中雙擊訪問 html，不建議在開發工具里面訪問

VS Code 使用

首先建立一個文件，在?VS Code 里面打開文件，新建一個 html 可以進行編輯
“！+ 回車” 會自動生成預設代碼

<!DOCTYPE html>  //聲明 html 代碼
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>  
</head>
<body></body>
</html>

HTML 常見標簽

html 每個標簽都有它的樣式

標題標簽：h1 - h6

有六個，從 h1 - h6，數字越大，則字體越小

<h1>hello</h1>

<h2>hello</h2>

<h3>hello</h3>

<h4>hello</h4>

<h5>hello</h5>

<h6>hello</h6>

h1 - h6 提前預設了字體大小、加粗、換行

段落標簽：p

html 中任何內容都要通過代碼實現，比如空格、換行，代碼加空格、換行是不會實現的

<p>這是?個段落</p>
<p>這是?個段落</p>
<p>這是?個段落</p>

p 標簽不會首行縮進，需要用到 css

換行標簽：br

br 標簽不像 p 標簽那樣帶有很大空隙，段落標簽換行比換行標簽換行要寬闊一些
br 是一個單標簽（不需要結束標簽）, <br/> 是規范寫法，不建議寫成 <br>

這是?個br標簽<br/>

圖片標簽：img

img 標簽必須帶有 src 屬性，表示圖片路徑，例：<img src="dog.jpg">

src 標簽的屬性，一個標簽可以有多個屬性，后面跟路徑，可以是相對路徑，也可以是絕對路徑，網絡路徑

相對路徑：以 html 位置為基準，找到圖片位置，與 html 同級直接寫或者./；在當前目錄下一級，兄弟目錄一級一級寫；在當前目錄上一級則../
絕對路徑：一個完整的磁盤路徑或者網絡路徑

<!-- 相對路徑 -->
<img src="hzw.jpg">
<!-- 網絡路徑 -->
<img src="https://cssl.dtstatic.com/uploads/blog/202408/01/
B8SxBB2DSlnDML3.thumb.1000_0.jpg">
<!-- 絕對路徑 -->
<img src="C:/Users/PC/OneDrive/圖片/圖1/787b850d9ad4e72dafebe4db28f3e70a3e112513.jpg">

【注釋 ctrl + /】

圖片設置大小

<img src="../dog.jpg" width="200px" height="200px" border="5px">

width / height：控制寬度高度，一般寬和高設置一個就可以了，圖片會等比例縮放，如果全部設置圖片可能變形
border：邊框，參數是寬度的像素，一般使用 css 來設定
px 是一個長度單位，通常前端用的長度單位是 px（像素）、em，數字越大越長

注意

屬性可以有多個，不能寫在標簽之前
屬性之間用空格分割，可以是多個空格，也可以是換行
屬性之間不分先后順序
屬性使用 “鍵值對” 的格式來表示

遇到不認識的標簽

當遇到不認識的標簽，在搜索詞前面加上 html，搜索其它東西也是，例如 Java、spring

超鏈接標簽：a

屬性 href：必須具備，表示點擊后會跳轉到哪個頁面
屬性 target：打開方式，默認是 _self 在當前自己頁面跳轉，如果是 _blank 則用新的標簽頁打開

<a href="https://www.baidu.com/" target="_self">百度頁面</a>

表格標簽

生成表格快捷方式

table 標簽：表示整個表格

tr 標簽：行

td 標簽：列

table 包含 tr，tr 包含 td
表格標簽有一些屬性，可以用于設置大小邊框，但一般使用 css 方式設置，這些屬性都要放入 table 標簽中
align 是表格相對于周邊元素的對齊方式，例 align="center"，不是內部元素對齊方式
border 表示邊框
cellpadding：內容距離邊框的距離，默認 1 像素
cellspacing：單元格之間的距離，默認為 2 像素
width / height：設置尺寸
注意，這幾個屬性，vscode 都提示不出來

 <table border="1px" align="center" cellpadding="20" cellspacing="0">><tr><td>姓名</td><td>性別</td><td>年齡</td></tr><tr><td>張三</td><td>男</td><td>10</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr></table></body>
</html>

表單標簽

表單是讓用戶輸入信息的重要途徑，如登錄界面用戶需要輸入信息進行登錄

表單分為兩個部分

表單域：包含表單元素的區域，重點是 form 標簽
表單控件：輸入框，提交按鈕等，重點是 input 標簽

form 標簽

<form action="test.html">... [form 的內容]
</form>

描述了要把數據按照什么方式，提交到哪個界面中

關于 form 需要結合后端代碼來進一步理解，后面再詳細研究

input 標簽

各種輸入控件，如單行文本框、按鈕、單選框、復選框

type 屬性必須有，取值種類很多，如 button（普通按鈕）、text（文本框）

可以使用快捷鍵，input: 后直接輸入類型

一些常用類型：

1. 普通按鈕

<input type="button" value="我是個按鈕">

2. 文本框

<input type="text">

文本框也可以提前寫一些信息

<input type="text" placeholder="請輸入昵稱">

3. 單選按鈕

<input type="radio" name="" id="">

沒有 name 和 id，當出現多個單選按鈕無法選中單個

name 用于標記同一組單選

<input type="radio" name="gender" id="">男<br/>
<input type="radio" name="gender" id="">女<br/>

暫時不考慮 id

4. 復選框

<input type="checkbox" name="運動" id="">籃球
<input type="checkbox" name="運動" id="">乒乓球
<input type="checkbox" name="運動" id="">跑步

5. 密碼框

<input type="password" name="" id="">

看不到輸入內容

6. 提交按鈕

搭配 form 標簽一起使用，提交按鈕必須放到 form 標簽內，點擊后會嘗試給服務器發送請求
只會提交 form 標簽括著的

<body><form action="hello.html"><input type="button" value="我是一個按鈕"><br/><input type="text" placeholder="請輸入昵稱"><br/><input type="radio" name="gender">男<br/><input type="radio" name="gender">女<br/><input type="checkbox">籃球<input type="checkbox">乒乓球<input type="checkbox">跑步<br/><input type="password" name="" id=""><input type="submit" value="提交"></form>
</body>

點擊提交當前頁面就會跳轉到?hell.html 頁面，加入屬性 target="_blank" 會打開新的標簽頁

<form action="hello.html" target="_blank">

此時提交上去 URL 的？后面并未看到提交的參數，因為提交信息需要用到 name、id、value 賦值
“ ？” 后面是查詢字符串，多個 key、value 組成
key：表單的 name 值
value：對應表單輸入的值

<body><form action="hello.html" target="_blank"><input type="button" value="我是一個按鈕"><br/><input type="text" placeholder="請輸入昵稱" name="userName"><br/><input type="radio" name="gender" value="1">男<br/><input type="radio" name="gender" value="2">女<br/><input type="checkbox">籃球<input type="checkbox">乒乓球<input type="checkbox">跑步<br/><input type="password" name="password"><input type="submit" value="提交"></form>
</body>
</html>

select 標簽

【下拉菜單】

option 中定義 select 表示默認選中

<select><option>北京</option><option selected="selected">上海</option>
</select>

? ?

textarea 標簽

【文本域】

<textarea rows="3" cols="100"></textarea>

文本域是多行的，可以放大縮小，文本框是單行的，不可以放大縮小
文本域中的內容是默認內容，空格也會有影響，rows 和 cols 一般使用 css 修改并不直接使用

<textarea rows="3" cols="100">123    456    
</textarea>

<textarea rows="3" cols="100">123  456</textarea>

無語意標簽：div & span

div 標簽是 division 的縮寫，含義是分割，span 標簽含義是跨度，div 會自動進行換行，span 不會
div 和 span 是為了后面樣式美化和網頁布局
div 獨占一行是一個大盒子，span 不獨占一行是一個小盒子

<div>我是一個div</div>
<div>我是一個div</div><span>我是一個span</span>
<span>我是一個span</span>
<span>我是一個span</span>

綜合練習

用戶注冊界面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>用戶注冊</h1><table><tr><td>用戶名</td><td><input type="text" placeholder="請輸入用戶名"></td></tr><tr><td>手機號</td><td><input type="text" placeholder="請輸入手機號"></td></tr><tr><td>密碼</td><td><input type="password" placeholder="請輸入密碼"></td></tr></table><div><input type="button" value="注冊"><span>已有賬號？</span><a href="#">登錄</a></div>
</body>
</html>

# 作為占位符

2. CSS

css 能夠對網頁元素進行美化，一般放在 style 標簽，head 里，因為網頁從上往下加載，放在后面容易樣式未加載出來

css 修飾前后

選擇器

選擇元素，對哪個或者哪些元素進行修飾【就近選擇，從上往下加載】

<style>span{color: red;}
</style>

選擇器 span{}
修飾 color: red
基礎選擇器包括標簽選擇器、class 選擇器、id 選擇器

標簽選擇器

html 標簽，如 span，div?

/* 選擇所有的div標簽, 設置顏?為綠? */
div {color: green;}

class 選擇器

對元素進行分類，通過 class 來標識類名，“.” 為類選擇器標識

/* 選擇class為font32的元素, 設置字體??為32px */
.font32 {font-size: 32px;}

id 選擇器

對元素進行起名，通過 id 來標識，id 不能重復，“#” 為 id 選擇器標識

/* 選擇id為submit的元素, 設置顏?為紅? */
#submit {color: red;}

通用選擇器

也叫通配符選擇器，“*” 為通用選擇器標識，表示選擇所有元素

/* 設置??所有元素, 顏?為紅?*/
* {color: red;}

復合選擇器

由多個單選擇器組成，選擇器之間使用空格隔開

/*只設置 ul標簽下的 li標簽下的 a標簽, 顏?為紅?*/
ul li a {color: blue;}

引入方式

css 有 3 種引入方式

常用 CSS

color

顏色

顏色表示：

英文單詞，如 blue、red
rjb（三色符），如（255,0,0），每一個數字都是 2 個字節，即 0-255
十六進制表示法（通過 # 表示，rjb 中數字用十六進制表示，每兩位表示一個），如 #ff00ff
還可以表示透明度，加入第四位則表示透明度，如 #56f90552、rgba(86,249,5,0.322)，1 的時候表示不透明，0 的時候就不顯示了，為完全透明

font-size

設置字體大小，chrome 瀏覽器默認字體大小是 16px，不同瀏覽器顯示的可能不一樣，因此需要通配符進行默認設置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font32{font-size: 50px;color: blue;}</style>
</head>
<body><div class="font32">我是一個div</div><div>我是一個div</div><span>我是一個span</span><span>我是一個span</span><span>我是一個span</span>
</body>
</html>

通過 class 來標識則需要加上 “.”?

border

邊框是一個復合屬性，可以同時設置多個樣式，不分先后順序

.text1{border: 1px solid purple;}

以上屬性對應邊框粗細，邊框樣式，邊框顏色

也可以分開來設置

.text1{border-color: red;border-width: 2px;border-style: solid;}

width、height

只有塊級元素可以設置寬度高度（如快遞只計算外包箱寬度高度而不是里面東西）

獨占一行的叫塊級元素，不能獨占一行叫行內元素
常見塊級元素：h1-h6，p，div 等
常見行內元素：a span

 .text1{font-size: 32px;border-color: red;border-width: 5px;border-style: solid;width: 500px;height: 200px;}

padding

內邊距，設置內容和邊框之間的距離

padding margin 是一個復合樣式，順序上右下左，寫一個上下左右一樣，寫兩個左和右一樣，上和下一樣，寫三個下改為第三個，左右一樣，如果只想調一個，可以分開設置
padding-top
padding-bottom
padding-left
padding-right

margin

外邊距，設置元素和元素之間距離

margin 是一個復合樣式，順序上右下左，寫一個上下左右一樣，寫兩個左和右一樣，上和下一樣，寫三個下改為第三個，左右一樣，如果只想調一個，可以分開設置
margin-top
margin-bottom
margin-left
margin-right

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.font32{font-size: 50px;color: blue;}.text1{font-size: 32px;border-color: red;border-width: 5px;border-style: solid;width: 500px;height: 200px;}</style>
</head>
<body><div class="font32">我是一個div</div><div class="text1">我是一個div</div><span>我是一個span</span><span>我是一個span</span><span>我是一個span</span>
</body>
</html>

? ? ? ? ??

【內外邊距是一個相對概念，如果是對于 html，那么此時內邊距就是原來外邊距】

3. JavaScript

JavaScript 簡稱 JS，是一個腳本語言，與 Java 無關，帶有?Java 名是由于 Java 熱度高，一般定義在 script 標簽，body 里，因為用戶進來以后不會立馬點擊頁面互動，1 秒加載很夠用了

HTML：表示頁面上有哪些元素
CSS：頁面上元素樣式、布局
JavaScript：頁面元素交互

引入方式

行內樣式

<input type="button" value="點我?下" onclick="alert('haha')">

onclick 標簽為鼠標點擊

內部樣式?

<script>alert("你好");
</script>

?alert 標簽為彈框

基本語法

JavaScript 是一個動態弱語言類型，Java 是一個強語言類型

變量

創建變量（變量定義/變量初始化/變量聲明），JS 申明變量有 3 種方式

【注意】

1. JavaScript 是一們動態弱語言類型語言

① 變量可以存放不同類型的值（動態）

var name = xiatian;
var age = 10；

② 隨著程序的運行，變量的類型可能會發生改變（弱變量）

var a = 10; // 數字
a = "hehe"; // 字符串

觀察 a 的類型，通過打印日志的方式

使用 typeof 可以返回數據類型變量?

<script>var a = 10;console.log(typeof a);a = "nihao";console.log(typeof a);
</script>

運行然后按 F12 看控制臺

?也就是第一次是 number 類型，隨后變成了 string 類型，說明類型并不固定

【補充】

學習 html 看頁面源代碼（右鍵檢查/F12）里面的 Elements

學習 JavaScript 看頁面源代碼（右鍵檢查/F12）里面的 Console（控制臺）

類似于 idea 中的日志

2. 變量命名規則

組成字符可以是任何字母、數字、下劃線（_）或者美元符號（$）
數字不能開頭
建議使用駝峰命名
+ 表示字符串拼接，也就是把兩個字符串首尾相接變成一個字符串
\n 表示換行

和 Java 類似

數據類型

分為原始類型和引用類型

<script>var a = 10;console.log("a:"+(typeof a));//numbervar b = 'hello';console.log("b:"+(typeof b));//stringvar c = true;console.log("c:"+(typeof c));//booleanvar d;console.log("d:"+(typeof d));//undefinedvar e = null;console.log("e:"+(typeof e));//null
</script>

對應的打印結果

運算符

JavaScript 運算符和 Java 用法基本相同

<script>var age = 20;var age1 = "20";var age2 = 20;console.log(age == age1);//true, ?較值console.log(age === age1);//false, 類型不?樣console.log(age == age2);//true, 值和類型都?樣
</script>
1

JavaScript 對象

數組

JS 數組當中元素并不要求是同一類型

1. 數組定義

創建數組有兩種方式

方式 1：使用 new 關鍵詞創建

// Array 的 A 要?寫
var arr = new Array();

方式 2：使用字面量方式創建（常用）

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 數組中保存的內容稱為 "元素"

2. 數組操作（讀增改刪）

<script>arr = [1, 2, 'haha', false , 456];//讀取數組console.log(arr[0]); //1//添加數組元素arr[5] = "add"console.log(arr[5]);//addconsole.log(arr.length);//6, 獲取數組的?度//修改數組元素arr[5] = "update"console.log(arr[5]);//update//刪除數組元素arr.splice(4,2);// 第?個參數表?從下標為4的位置開始刪除. 第?個參數表?要刪除幾個元素console.log(arr[5]);//undefined 元素已經刪除, 如果元素不存在, 結果為undefinedconsole.log(arr.length);//4, 獲取數組的?度 
</script>

【如果下標超出范圍讀取元素，則結果為 undefined】?

可以隔空賦值

arr = [1, 2, 'haha', false , 456];
arr[100] = 1;
console.log(arr);

當數組下標變成其它進行賦值時數組長度不變

arr = [1, 2, 'haha', false , 456];
arr["h"] = 1;
console.log(arr["h"]);

函數

函數定義（聲明）

function add(x,y){console.log(x+y);
}
console.log(typeof add);

函數可以賦值給一個變量

var a = function add(x,y){console.log(x+y);
}
console.log(typeof a);

函數調用

function add(x,y){console.log(x+y);
}
add(1,2);

var a = function add(x,y){console.log(x+y);
}
a(1,2);

var a = function(x,y){console.log(x+y);
}
a(1,2);

//匿名函數
var a = function(x,y){console.log(x+y);
}
a(1,2);

上述函數參數傳一個數字的時候

var a = function(x,y){console.log(x+y);
}
a(1);//NaN ，1 和一個 undefined 相加得到的不是一個數字

上述函數參數傳一個字符串的時候

var a = function(x,y){console.log(x+y);
}
a("nihao");//nihaoundefined ，字符串相加拼接在一起

上述函數參數多傳的時候只取前兩個

【實參和形參之間個數可以不匹配，但實際開發一般要求要匹配】

對象

Java 對象一定是基于類創建的，JavaScript 可以沒有類只有對象

1. 使用 {} 創建對象

var a = {}; // 創建了?個空的對象
var student = {name: '蔡徐坤',height: 175,weight: 170,sayHello: function() {console.log("hello");}
};

獲取對象屬性

//使? . 成員訪問運算符來訪問屬性 `.` 可以理解成 "的"
console.log(student.name);
//使? [ ] 訪問屬性, 此時屬性需要加上引號
console.log(student['height']);

添加屬性（Java 中只能添加類里面有的屬性，而 JavaScript 添加屬性不需要類里面有）

student.age = 18;
student["gender"] = "男";

【屬性要加引號】

2. 使用 new Object 創建對象

var student = new Object(); // 和創建數組類似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}

3. 使用構造方法創建函數

function 構造函數名(形參) {this.屬性 = 值;this.?法 = function...
}
var obj = new 構造函數名(實參);

在構造函數內部使用 this 關鍵字來表示當前正在構建的對象
構造函數的函數名首字母一般大寫
構造函數的函數名可以是名詞
構造函數不需要 return
創建對象的時候必須使用 new 關鍵字

實例

function Cat(name, type, sound) {this.name = name;this.type = type;this.miao = function () {console.log(sound); // 別忘了作?域的鏈式訪問規則}
}
var mimi = new Cat('咪咪', '中華?園喵', '喵');
var xiaohei = new Cat('??', '波斯喵', '貓嗚');
var ciqiu = new Cat('刺球', '?漸層', '咕嚕嚕');
console.log(mimi);
mimi.miao(); // 調用方法記得加()

補充：作用域的鏈式訪問規則

假設有如下代碼?

function outer() {var outerVar = '我是外部變量';function inner() {console.log(outerVar); // 試圖訪問外部變量}inner();
}
outer(); // 輸出: 我是外部變量

在這個例子中，當 inner 函數嘗試訪問 outerVar 時，它實際上是通過 outer 函數的作用域來查找 outerVar 的，因為 inner 函數是在 outer 函數的作用域內部定義的，所以它的作用域鏈會指向 outer 函數的作用域，這就是作用域的工作方式

jQuery

快速簡潔且功能豐富的 JavaScript?框架

引入依賴

使用 jQuery 前要引入對應的庫

在使用 jQuery CDN 時，只需要在 HTML 文檔中加入如下代碼

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

其中 src 屬性指明 jQuery 庫所在的 URL ，這個 URL 是 CDN（內容分發網絡服務商）服務提供商為 jQuery 庫提供一個統一資源定位符，也可以使用其他公司提供的 CDN 地址

如需其它版本可在官網下載，?參考地址：https://releases.jquery.com/

選擇其它版本

jQuery 官方共提供了 4 種類型 jQuery 庫

uncompressed：非壓縮版本（易讀，但文件較大，傳輸速度慢）
minified：壓縮版（不易讀，文件小，性能高，開發中推薦）
slim：精簡瘦身版，沒有 Ajax 和一些特效
slim minified：slim 的壓縮版

也可以從其他 CND 上下載引用 jQuery

1 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

地址：https://www.bootcdn.cn/jquery/

【開發時建議把 jQuery 庫下載到本地放入當前項目，引入外部地址會有外部地址不能訪問風險】

【復制鏈接打開右鍵另存到自己當前項目下?js 文件夾就可以存到本地了】?

jQuery 語法

示例：給按鈕添加了 click 事件，點擊后元素消失

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="test">點我看看</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script>$(document).ready(function(){$("#test").click(function(){$(this).hide();});})</script>
</body>
</html>

$(selector).action

$() 是 jQuery 提供的一個全局函數，用于選擇和操作 HTML 元素
selecter 是選擇器（對應上面案例中 "#test" ），用來查詢和查找 HTML 元素
action 是操作（對應上面案例中 .click ），執行對元素的操作

$(document).ready(function(){// jQuery functions go here
});

jQuery 代碼通常寫在 document read 函數中
document 表示整個文檔對象，一個頁面就是一個文檔對象

簡潔寫法

$(function(){$("#test").click(function(){$(this).hide();});
});

也可以直接寫，但不建議這樣寫

$("#test").click(function(){$(this).hide();
});

jQuery 選擇器

jQuery 選擇器基于已經存在的 CSS 選擇器，還有一些自定義的選擇器
jQuery 當中所有選擇器都以 $ 開頭：$()

jQuery 事件

JS 要構造動態的界面，就需要感知到用戶的行為
用戶對于頁面的一些操作（點擊，選擇，修改等）都會在瀏覽器中產生一個事件，被 JS 獲取到，從而進行更復雜的交互操作

事件由三部分組成

事件源：哪個元素觸發
事件類型：是點擊、選中還是修改等
事件處理程序：進一步如何處理，往往是一個回調函數

常見的事件有

更多事件參考 jQuery 事件參考手冊：https://www.w3school.com.cn/jquery/jquery_ref_events.asp

操作元素

1. 獲取/設置元素內容

三個簡單獲取元素內容的 jQuery 方法

獲取元素內容?

<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$(document).ready(function () {var html = $("#test").html();console.log("html內容為:"+html);var text = $("#test").text();console.log("?本內容為:"+text);var inputVal = $("input").val();console.log(inputVal);});
</script>

?設置元素屬性

<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$("#test").text("<h1>你好</h1>");
</script>

<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$("#test").html("<h1>你好</h1>");
</script>

<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$(":input").val("Java");
</script>

2. 獲取/設置元素屬性

jQuery attr() 方法用于獲取/設置屬性值，() 里只有屬性是獲取，既有屬性又有值是賦值

<p><a href="https://www.bitejiuyeke.com/index" id="bite">bit</a></p><img src="hzw.jpg" width="200px"/>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>//獲取元素的屬性var a = $("p a").attr("href");console.log(a);//設置元素屬性$("p a").attr("href","http://www.baidu.com");$(img").attr("width","500px");
</script>

3. 獲取/設置 CSS 屬性

css() 方法獲取或設置被選元素一個或多個樣式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="font-size: 36px">我是?個?本</div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script>var fontSize = $("div").css("font-size");console.log(fontSize);$("div").css("font-size","20px");$("div").css("color","red"); </script>
</body>
</html>

4. 添加元素

添加 HTML 元素

append()：在被選元素的結尾插入內容
prepend()：在被選元素的開頭插入內容
after()：在被選元素之后插入內容
before()：在被選元素之前插入內容

?未加入 li 標簽定義列表

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$("ol").append("append");$("ol").prepend("append");
</script>

加入 li 標簽定義列表

$("ol").append("<li>append</li>");
$("ol").prepend("<li>append</li>");

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>$("ol").append("append");$("ol").prepend("append");$("img").before("圖?前插?");$("img").after("圖?后插?");
</script>

【按住 Ctrl 鍵點擊圖片鏈接可以知道圖片是否存在】

5. 刪除元素

刪除元素和內容一般使用以下兩種 jQuery 方法

remove()：刪除被選元素（及其子元素）
empty()：刪除被選元素的子元素

<body><div id="div1">我是?個div</div><button id="remove">刪除 div 元素</button><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol> <button id="empty">清空o1子元素</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script>$("#remove").click(function(){$("#div1").remove();})$("#empty").click(function(){$("ol").empty();})</script>
</body>

【id 認為在一個頁面內是唯一的，動作區分通常加 id，樣式通常加 class】

綜合案例

1. 猜數字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button type="button" id="reset">重新開始一局游戲</button><br>請輸入要猜的數字：<input type="text" id="number"><button type="button" id="guess">猜</button></br><br>已經猜的次數：<span id="count">0</span><br/><br>結果：<span id="result"></span><br/><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script>$(function() {//隨機生成 1-100 的數字var guessNumber = Math.floor(Math.random() * 100) + 1;console.log(guessNumber);//Math.random() 生成[0，100)，+1后生成[1,101)//Math.floor(x) x表示數字，返回小于或等于數字 x 的最大整數 (向下取整)var count = 0;$("#guess").click(function() {count++;$("#count").text(count);var userGuess = $("#number").val();if(userGuess == guessNumber) {$("#result").text("猜對了");$("#result").css("color","gray");} else if(userGuess < guessNumber) {$("#result").text("猜小了");$("#result").css("color","blue");} else {$("#result").text("猜大了");$("#result").css("color","red");}})$("#reset").click(function() {guessNumber = Math.floor(Math.random() * 100) + 1;console.log(guessNumber);count = 0;$("#number").val("");$("#count").text(count);$("#result").text("");})})</script>
</body>
</html>

2. 表白墻

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">輸入后點擊提交, 會將信息顯示下方空白處</p><div class="row"><span>誰:</span> <input type="text" name="" id="from"></div><div class="row"><span>對誰:</span> <input type="text" name="" id="to"></div><div class="row"><span>說什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 對 B 說: hello</div> --></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script>function submit(){//1. 獲取留言的內容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from== '' || to == '' || say == '') {return;}//2. 構造節點var divE = "<div>"+from +"對" + to + "說:" + say+"</div>";console.log(divE);//3. 把節點添加到頁面上    $(".container").append(divE);//4. 清空輸入框的值$('#from').val("");$('#to').val("");$('#say').val("");}</script>
</body></html>