1. jQuery attribute manipulation
- html() It can set and get the content in the start tag and end tag. Same as dom attribute innerHTML.
- text() It can set and get the text in the start tag and end tag. Same as dom attribute innerText.
- val() it can set and get Form item (input)The value attribute value, that is, you can set the multi-select box, single-select box, whether the drop-down list is selected, or set and get the value in the text text box ( pay attention to distinguish the meaning of value under different types of input tags ). Same as dom attribute value.
<script type="text/javascript">
不传参数，是获取，传递参数是设置
alert( $("div").html() );// 获取
$("div").html("<h1>我是div中的标题 1</h1>");// 设置
alert( $("div").text() ); // 获取
$("div").text("我是div中的标题"); // 设置
$("button").click(function () {
alert($("#username").val());//获取
$("#username").val("陆亿行-2021-01-31");// 设置
});
</script>
<body>
<div>我是div标签 <span>我是div中的span</span></div>
<input type="text" name="username" id="username" />
<button>操作输入框</button>
</body>
val attribute demonstration:
Set the selected state of multiple form items at the same time:
Select the single selection box, multiple selection box, and drop-down list (single selection, multiple selection) through the val attribute.
Note the difference between comparison and text, html attributes and val when setting the form item type to text: one more square bracket []
$(":checkbox").val(["value1","value2"]); refers to the selected value value Options for value1 and value2.
It is assumed that there is only one check box, otherwise it is selected by id.
Initial code
<!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>
The interface effects are as follows:
JS part
<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>
The above 4 statements can also be completed in one statement at the same time:
<script>
$(":radio,:checkbox,#multiple,#single").val(
["radio2","checkbox2","checkbox1","mul1","mul3","sin2"]
);
});
</script>
Note that the preceding (":radio,:checkbox,#multiple,#single") and the following ["radio2","checkbox2","checkbox1","mul1","mul3","sin2"] do not need one One corresponding match, yes.
<script>
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
</script>