一、attr、val、prop方法示例代碼（可以直接測試）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試val、attr、prop</title>
</head>
<body>
暱稱：<input type="text" id="userName" value="德瑪西亞">
<br>
<input type="button" value="註冊" id="btn">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
$('#btn').click(function () {
let attr = $('#userName').attr("value");
let prop = $('#userName').prop("value");
let val = $('#userName').val();
console.log("輸出attr="+attr);
console.log("輸出prop="+prop);
console.log("輸出val="+val);
})
</script>
</body>
</html>
1.直接運行上述代碼
- 當我們直接運行時，瀏覽器控制檯什麼都沒有輸出，因爲我們還沒有點擊註冊按鈕，沒有觸發點擊事件。
- 頁面圖示
![刷新頁面時]()
- 從上圖中可以看出：暱稱的value值默認的出現在文本輸入框中。該功能可以出現在當用戶修改暱稱時，可以將之前的暱稱值出現在文本輸入框中，增加用戶體驗
2.點擊註冊按鈕
- 我們將暱稱中輸入框值改變，填寫爲“滑板鞋”，打開瀏覽器控制檯，看輸出情況
- 頁面圖示
![填寫輸入框值]()
![瀏覽器控制檯輸出]()
3.將value="德瑪西亞"刪除，點擊註冊按鈕
- 跟上面一樣，唯一不同的是將代碼中的value="德瑪西亞"給刪除，再次運行
- 頁面圖示
![圖示]()
- 刷新頁面時，可以看到輸入框中的默認值沒有了
- 我們現在什麼都不輸入，點擊註冊按鈕，瀏覽器控制檯輸出圖示
![在這裏插入圖片描述]()
- 可以發現attr輸出爲undefined，其他兩個什麼都沒有輸出爲：空白
- 我們在輸入框輸入“滑板鞋”，瀏覽器控制檯圖示
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
- 可以看到：attr輸出爲undefined，prop和val輸出爲滑板鞋
4.總結
- prop()和val()都能獲取到文本框的實際value值，而attr()獲取的則始終爲文檔結構中的value的屬性值，與文本框實際輸入值無關，並不會變化
- val()方法一般用在input標籤上，有些人寫input標籤，不寫value屬性，但都會有輸入框
手機：<input type="text" id="phone">
二、html方法示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試html</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn">改變 p 元素的內容</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script>
$('.btn').click(function () {
$('p').html("Hello <span style=\"color: red\">你好</span>")
})
</script>
</body>
</html>
1.執行上訴代碼
- 頁面顯示
![在這裏插入圖片描述]()
- 點擊按鈕時顯示的頁面
![在這裏插入圖片描述]()
2.總結
- html() 方法返回或設置被選元素的內容 (inner HTML)。inner HTML指的是html裏面的代碼
- 如果該方法未設置參數，則返回被選元素的當前內容（p標籤元素裏面的內容）。
$('p').html();
如果對你有幫助，不如點個贊，也算是支持一下0.0
若有不正之處，請多多諒解並歡迎批評指正，不甚感激