1. Manipulación de atributos de jQuery
- html () Puede configurar y obtener el contenido en la etiqueta de inicio y la etiqueta de finalización. Igual que el atributo dom innerHTML.
- text () Puede establecer y obtener el texto en la etiqueta de inicio y la etiqueta de finalización. Igual que el atributo dom innerText.
- val () puede establecer y obtener Elemento de formulario (entrada)El valor del atributo de valor, es decir, puede establecer el cuadro de selección múltiple, el cuadro de selección única, ya sea que la lista desplegable esté seleccionada, o establecer y obtener el valor en el cuadro de texto de texto ( preste atención para distinguir el significado de valor bajo diferentes tipos de etiquetas de entrada ). Igual que el valor del atributo dom.
<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>
demostración del atributo val:
Establecer el estado seleccionado de varios elementos de formulario al mismo tiempo:
Seleccione el cuadro de selección única, el cuadro de selección múltiple y la lista desplegable (selección única, selección múltiple) mediante el atributo val.
Tenga en cuenta la diferencia entre la comparación y el texto, los atributos html y val al establecer el tipo de elemento de formulario en texto: un corchete más []
$ (": casilla de verificación"). Val (["valor1", "valor2"]); se refiere a el valor seleccionado Opciones de valor para valor1 y valor2.
Se supone que solo hay una casilla de verificación; de lo contrario, se selecciona mediante id.
Código inicial
<!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>
Los efectos de la interfaz son los siguientes:
Parte 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>
Las 4 declaraciones anteriores también se pueden completar en una declaración al mismo tiempo:
<script>
$(":radio,:checkbox,#multiple,#single").val(
["radio2","checkbox2","checkbox1","mul1","mul3","sin2"]
);
});
</script>
Tenga en cuenta que el anterior (": radio,: checkbox, # multiple, # single") y el siguiente ["radio2", "checkbox2", "checkbox1", "mul1", "mul3", "sin2"] no necesitan uno Un partido correspondiente, sí.
<script>
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
</script>