jQuery(四)——jQuery 的屬性操作：html()、text()、val()
阿新 • • 發佈：2021-02-17
技術標籤：JavaWebjqueryhtmldomjscss
1. jQuery 的屬性操作
- html() 它可以設定和獲取起始標籤和結束標籤中的內容。 跟 dom 屬性 innerHTML 一樣。
- text() 它可以設定和獲取起始標籤和結束標籤中的文字。 跟 dom 屬性 innerText 一樣。
- val() 它可以設定和獲取 表單項(input) 的 value 屬性值，即可以設定多選框、單選框，下拉列表是否被選中，也可以設定和獲得text文字框中的值(注意區分value值在input標籤不同type下的含義)。 跟 dom 屬性 value 一樣。
<script type val屬性演示：
同時設定多個表單項的選中狀態：
通過val屬性分別選中單選框、多選框、下拉列表(單選、多選)。
注意對比和text、html屬性以及val設定表單項type為text時的區別：多一箇中括號[ ]
$(":checkbox").val([“value1”,“value2”]); 指選中value值為value1和value2的選項。
這裡假設只有一個多選框，否則用id選中。
初始程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-01-31</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script> 引入jQuery的js檔案
<script type="text/javascript">
-----------------在裡面補充程式碼-----------------
</script>
</head>
<body>
單選：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多選：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多選 ：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉單選 ：
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</html>
介面效果如下：
JS部分
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//在裡面補充程式碼
$(function () {
//1.批量操作單選框：要求選中value值為radio2的單選框
$(":radio").val(["radio2"]); //這裡要多一箇中括號呦，裡面填屬性值。
//2. 批量操作篩選框的選中狀態，要求同時選中 value值為checkbox1 checkbox2
$(":checkbox").val(["checkbox2","checkbox1"]);
//實際選中的順序和裡面填入的順序無關，而與其在body中出現的上下順序有關
//3.批量操作多選的下拉框選中狀態 要求選中value值為mul1 和 mul3的選項
$("#multiple").val(["mul1","mul3"]);//由於有兩個select，一個多選，一個單選通過id選中select標籤
//4.操作單選的下拉框選中狀態，選中value值為sin2的選項
$("#single").val(["sin2"]);
});
</script>
上面4條語句也可以放在一條語句裡同時完成：
<script>
$(":radio,:checkbox,#multiple,#single").val(
["radio2","checkbox2","checkbox1","mul1","mul3","sin2"]
);
});
</script>
注意，前面的(":radio,:checkbox,#multiple,#single")和 後面的[“radio2”,“checkbox2”,“checkbox1”,“mul1”,“mul3”,“sin2”]不需要一一對應匹配，有即可。
<script>
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
</script>