以下皆以引入jQuery文件
表单元素属性操作
<!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>body{padding-bottom: 800px;}</style><script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body><!-- 表单元素的内容：1. 输入型表单的内容是 value 属性操作的值 --><input type="text" value="默认值"> <br><input type="password" value="1234"> <br><!-- 日期选择器需要按照固定格式定义 --><input type="date" value="2021-01-23"> <br><input type="color" value="#ff0000"> <br><!-- textarea 默认值由标签内容提供，但只有默认会存储在该位置后续的修改都被记录在value属性上，但value属性不能textarea标签上直接使用--><textarea>多行文本域的内容</textarea> <br><hr><input type="text" placeholder="提示" id="input1" value="默认值"> <br><input type="text" id="input2"> <br><input type="color" value="#ff0000" id="input3"> <br><input type="button" value="取值" onclick="getInputValue1()"><input type="button" value="赋值" onclick="setInputValue1()"><script>function getInputValue1(){var $input1 = $("#input1");// log的多值同时输出，可以在浏览器控制台激活数据类型console.log( 1 , $input1.val() );// 表单元素如果没有定义value，默认值是 "" 字符串 ！！！var $input2 = $("#input2");console.log( 2 , $input2.val() );}function setInputValue1(){var $input1 = $("#input1");// var user = {// name:"tom",// age:23// } // toString [object,Object]// $input1.val( user ); // var arr = [1,2,3,4];// $input1.val( arr ); // 1,2,3,4$input1.val( '字符串' );// 输入框需要基于类型接收输入框有效值// $("#input3").val("字符串");$("#input3").val("#00ff00");}</script><hr><textarea id="text">多行文本框</textarea> <br><input type="button" value="获取值" onclick="getTextarea()"><input type="button" value="赋值" onclick="setTextarea()"><script>function getTextarea(){var text = $("#text").val();var html = $("#text").html();console.log("value:",text);console.log("html:",html);}function setTextarea(){// 多多行文本框进行赋值，使用html方法可以完成，但不建议// $("#text").html( Math.random() )$("#text").val( Math.random() )}</script><hr><!-- onchange 内容改变 1. 单选按钮，复选按钮，下拉列表，文件选择器，…… 内容改变直接触发change事件2. 输入框文本 内容改变并失去焦点，会触发change事件--><!--下拉列表的option是由三大属性组成1. value 用于为下拉列表选中时提供值得2. label 标签内容,用于视觉上得选项提示3. selected 用于初始化时默认选中项得定义--><select id="select" onchange="getSelectValue()"><option value="-1" disabled selected>请选择</option><option value="A">选项A</option><option value="B">选项B</option><option value="C">选项C</option><option value="D">选项D</option><option>选项E</option></select><input type="button" value="选中选项B" onclick="setSelectValue()"><script>function getSelectValue(){// JS对下拉列表得选中进行值获取，直接通过 select元素得value属性进行操作即可// 取出得值由option定义得value决定，如果没有定义value,由label替代var selectValue = $("#select").val();console.log(selectValue);}function setSelectValue(){$("#select").val("B")// $("#select").val("b")// $("#select").val("选项E")}</script><hr><!-- 单选按钮 name 取值相同为一组，可形成互斥单选按钮得组成：1. 通过name分组2. 通过外部标签和位置描述当前单选按钮得页面显示含义3. checked 描述单选按钮得默认选中4. value 提供单选按钮选中得对于得数据值--><input type="radio" value="男11" name="sex">男<input type="radio" value="女11" name="sex">女<input type="radio" value="保密11" name="sex" checked>保密<input type="button" value="获取性别" onclick="getSexValue()"><input type="button" value="选中男" onclick="setSexValue()"><script>function getSexValue(){var $radios = $("input[name=sex]:checked");console.log($radios);console.log( $radios.val() );}function setSexValue(){var $radio = $("input[name='sex'][value=男11]")$radio.prop("checked",true);}</script><hr><input type="checkbox" name="skill" value="html">HTML<input type="checkbox" name="skill" value="css">CSS<input type="checkbox" name="skill" value="js">JS<input type="button" value="获取选中值" onclick="getCheckValue()"><input type="button" value="选中HTML和CSS" onclick="setCheckValue()"><script>function getCheckValue(){var $checks = $("input[name=skill]:checked");console.log($checks);var skills = [];for (var i = 0; i < $checks.length; i++) {// $checks[i];skills.push( $checks[i].value )}console.log(skills);}function setCheckValue(){$("input[name=skill][value=html]").prop("checked",true);$("input[name=skill][value=css]").prop("checked",true)}</script>
</body>
</html>表单属性练习
<!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>.user-info{width: 300px;}.user-info>label{display: block;margin-bottom: 4px;display: flex;flex-flow: row nowrap;}/* .user-info span{vertical-align: text-top;} */.user-info>label>*{vertical-align: text-top;}.user-info .full{flex-grow: 1;}.btn{text-align: center;}td{border: 1px solid black;padding: 6px 12px;}table{border-collapse: collapse;width: 100%;}</style><script src="./jquery/jquery-3.7.1.js"></script><!-- 提供 window.Qs 对象 --><script src="./qs/qs.js"></script>
</head>
<body><form class="user-info" id="stuForm"><label><span>姓名:</span><input class="full" type="text" name="name"></label><label><span>年龄:</span><input class="full" type="number" name="age"></label><label><span>性别:</span><!-- 0表示男 1表示女 2表示保密 --><input type="radio" name="sex" value="0">男<input type="radio" name="sex" value="1">女<input type="radio" name="sex" value="2">保密</label><label><span>技能:</span><input type="checkbox" name="skill" value="html">HTML<input type="checkbox" name="skill" value="css">CSS<input type="checkbox" name="skill" value="js">JS<input type="checkbox" name="skill" value="vue">JS</label><label><span>学历:</span><select class="full" name="edu"><option value="-1" disabled selected>请选择</option><option value="研究生">研究生</option><option value="本科">本科</option><option value="大专">大专</option></select></label><label><span>介绍:</span><textarea class="full" rows="10" name="info"></textarea></label><div class="btn"><input type="button" value="添加新学员" onclick="addNewStu()"><input type="button" value="添加新学员2" onclick="addNewStu2()"></div></form><hr><table><thead><tr><td>序号</td><td>姓名</td><td>年龄</td><td>性别</td><td>技能</td><td>学历</td><td>介绍</td><td>操作</td></tr></thead><tbody id="stuTable"></tbody></table><script>var stuList = [];var sex = ["男","女","保密"];function initTable(){var temp = "";for (var i = 0; i < stuList.length; i++) {temp += `<tr><td>${i+1}</td><td>${ stuList[i].name }</td><td>${ stuList[i].age }</td><!-- 通过表单获取数值，使用数组作为下标，通过下标加载页面显示内容 --><td>${ sex[ stuList[i].sex ] }</td><td>${ stuList[i].skill }</td><td>${ stuList[i].edu }</td><td>${ stuList[i].info }</td><td><input type="button" value="删除"></td></tr>`;}$("#stuTable").html( temp ); }initTable();function addNewStu(){// 将表单中带有name属性得元素值组合成一个 URL参数格式 key=value&key=value&……// var stu = $("#stuForm").serialize();// console.log(stu);// 将表单中带有name属性得元素值组合成一个 数组，数组中按照元素提供对象，对象包含 name 和 value// 例如[ { name: a value: 1 }, { name: b value: 2 },...] var stuArr = $("#stuForm").serializeArray();console.log(stuArr);var stu = {};for (var i = 0; i < stuArr.length; i++) {var obj = stuArr[i];// 判断是不是由 name=skill 提供复选框得值if( obj.name=="skill" ){// 一个对象中如果不存在对应得属性，返回 undefinedif( stu["skill"] ){// stu 中有skill属性stu["skill"].push( obj.value )}else{// stu 中没有skill属性stu["skill"] = [ obj.value ];}}else{stu[ obj.name ] = obj.value;}}console.log(stu);stuList.push( stu );initTable(); // 表格重新渲染一次}function addNewStu2(){var stuString = $("#stuForm").serialize();console.log(stuString);// Qs.parse 提供将 a=1&b=2&c=3 格式字符串 转换为 { a:1,b:2,c:3 } 对象// Qs.stringify 提供将 { a:1,b:2,c:3 } 对象 转换为 a=1&b=2&c=3 格式字符串 // console.log( Qs );var stu = Qs.parse( stuString );console.log("stu",stu);stuList.push( stu );initTable();}</script>
</body>
</html>
