本章主要记录前端的一些常用基础知识，话不多说，下面我们直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端常用基础知识（一）</title> <!-- 学习官网：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp --> <script src="./js/jquery-3.6.0.min.js"></script> <style> .pointer { cursor: pointer; color: blue; } </style> </head> <body> <form action=""> <!-- 表单元素 --> <div id="Container_1"> <table> <tr> <th>姓名</th> <td> <input type="text" id="txtName" name="txtName" autocomplete="off"> </td> </tr> <tr> <th>性别</th> <td> <input type="text" id="txtAge" name="txtAge" autocomplete="off"> </td> </tr> <tr> <th>年龄</th> <td> <input type="radio" name="Sex" value="1" id="boy"><label for="boy">男</label> <input type="radio" name="Sex" value="2" id="girl"><label for="girl">女</label> </td> </tr> <tr> <th>班级</th> <td> <select id="Grade" name="Grade"> <option value="">请选择</option> <option value="1">一班</option> <option value="2">二班</option> <option value="3">三班</option> </select> </td> </tr> <tr> <th>兴趣爱好</th> <td> <label><input type="checkbox" name="Hobby" value="1">乒乓球</label> <label><input type="checkbox" name="Hobby" value="2">羽毛球</label> <label><input type="checkbox" name="Hobby" value="3">篮球</label> </td> </tr> <tr> <th>金额文本框输入限制2位小数</th> <td> <input type="text" id="txtMoney" name="txtMoney" class="money" maxlength="11" autocomplete="off"> </td> </tr> <tr> <th>a标签onclick点击事件触发跳转</th> <td> <a href="https://www.baidu.com" target="_blank">跳转百度方式1</a> <a onclick="OnClickJump(this)" class="pointer">跳转百度方式2</a> </td> </tr> <tr> <th></th> <td> <input type="checkbox" id="IsAgree" name="IsAgree" value="True"><label for="IsAgree">是否同意</label> </td> </tr> </table> </div> <hr /> <!-- 上移下移 --> <div id="Container_2"> <table> <tr class="item"> <th width="70%"> 张三 </td> <td> <a onclick="Del(this)" class="pointer">删除</a> <a onclick="Up(this)" class="pointer">上移</a> <a onclick="Down(this)" class="pointer">下移</a> </td> </tr> <tr class="item"> <th width="70%"> 李四 </td> <td> <a onclick="Del(this)" class="pointer">删除</a> <a onclick="Up(this)" class="pointer">上移</a> <a onclick="Down(this)" class="pointer">下移</a> </td> </tr> <tr class="item"> <th width="70%"> 王五 </td> <td> <a onclick="Del(this)" class="pointer">删除</a> <a onclick="Up(this)" class="pointer">上移</a> <a onclick="Down(this)" class="pointer">下移</a> </td> </tr> </table> </div> </form> <!-- 模板 --> <script type="text/html" id="item_html"> <a href="/Home/Detail/[Id]"> <span>[Title]</span> <span>[Name]</span> </a> </script> <script type="text/javascript"> //获取表单数据 function GetFormData(){ //文本框 var val1 = $(\'#txtName\').val(); var val2 = $("input[name=\'txtAge\']").val(); console.log("txtName:" + val1); console.log("txtAge:" + val2); //单选按钮 var val3 = $(\'input[name="Sex"]:checked\').val(); console.log("Sex:" + val3); //下拉框 var val4 = $("#Grade").val(); var val5 = $("[name=\'Grade\']:first").val(); console.log("Grade:" + val4 + "=>" + val5); //复选框 var arr = []; $(":checkbox[name=\'Hobby\']:checked").each(function(){ arr.push($(this).val()); }); var val6 = arr.join(\',\'); console.log(val6); } //初始化表单数据 function InitFormData(){ //元素判断（其中element为对象） //element.is(":checkbox") //是否为复选框 //element.is("select") //是否为下拉框 //element.is(":radio") //是否为单选按钮 //element.is("textarea") //是否为多行文本框 //文本框 $("input[name=\'txtName\'],[name=\'txtAge\']").val(\'666\'); //单选按钮 $(\'input:radio[name="Sex"][value="2"]\').prop(\'checked\', true); //下拉框 //$("#Grade").val(\'2\'); $("[name=\'Grade\']:first").val(\'3\'); //复选框 var arr = [2,3]; $.each(arr, function (index, item) { $(\'input:checkbox[name="Hobby"][value="\' + item + \'"]\').prop(\'checked\', true); }); $(\'input:checkbox[name="IsAgree"][value="True"]:first\').prop(\'checked\', true); if ($(\'input:checkbox[name="IsAgree"]\').is(\':checked\')) { //判断复选框是否选择 console.log(\'选中\'); } else{ console.log(\'没有选中\'); } //启用禁用 $(\'input:radio[name="Sex"]\').attr("disabled", true); //禁用单选按钮 $(\'input:radio[name="Sex"]\').attr("disabled", false); //启用单选按钮 $(\'input:checkbox[name="Hobby"]\').attr("disabled", true); //禁用复选框 $(\'input:checkbox[name="Hobby"]\').attr("disabled", false); //启用复选框 } //清空表单 function ClearFormData(){ //文本框 $("input[name=\'txtName\'],[name=\'txtAge\']").val(\'\'); //清空 //单选按钮 $(\'input:radio[name="Sex"]\').prop(\'checked\', false); //取消选中 //下拉框 $("#Grade").val(\'\'); //复选框 $(\'input:checkbox[name="Hobby"]\').prop(\'checked\', false); //取消选中 } //上移 function Up(obj) { var curBlock = $(obj).parents(\'tr\'); var prveBlock = curBlock.prev(\'tr\'); //var prveBlock = curBlock.prevAll(\'tr:visible:first\'); curBlock.after(prveBlock); } //下移 function Down(obj) { var curBlock = $(obj).parents(\'tr\'); var nextBlock = curBlock.next(\'tr\'); //var nextBlock = curBlock.nextAll(\'tr:visible:first\'); curBlock.before(nextBlock); } //删除 function Del(obj) { $(obj).parents("tr").remove(); } //a标签onclick点击事件触发跳转 function OnClickJump(obj){ var url = \'https://www.baidu.com\'; $(obj).attr(\'href\', url).attr(\'target\', \'_blank\').removeAttr(\'onclick\'); } //去掉指定字符串中所有空格 function removeAllSpace(text) { //判断是否为空 if (!text) { return ""; } text = text.replace(/\s+/g, ""); return text; } //模板占位替换 //想将带[]的字符串替换为指定字符串 function ReplaceTemplate(){ var jsonArr = [ { "Id": 1000, "Title": "学员库", "Name": "张三" }, { "Id": 1001, "Title": "学员库", "Name": "李四" } ]; var reg = new RegExp("\\[([^\\[\\]]*?)\\]", \'igm\'); $.each(jsonArr, function (index, jsonData) { var html = $(\'#item_html\').html().replace(reg, function (node, key) { //console.log(node); return jsonData[key]; }); console.log(html); }); /* 输出结果： <a href="/Home/Detail/1000"> <span>学员库</span> <span>张三</span> </a> <a href="/Home/Detail/1001"> <span>学员库</span> <span>李四</span> </a> */ /* 参考博文：https://blog.csdn.net/lixiaonaaa/article/details/110867102 那么为什么第二个参数key输出的就是[]中的字符串呢？ 其原因在于正则表达式的()，正则表达式中小括号内的内容为一个分组，可以将想要提出来的字符串放在()中为一个分组，这样就可以直接用第二个参数key输出了！ 所以研究到replace第二个参数为函数时，此函数的参数有四个function(match, key, index, source) match：正则匹配到的字符串 key：分组中的内容 index：字符串中开始匹配的下标 source：原字符串 */ } //jquery选择器中两个class是什么意思？ /* $(".class1 .class2") 选择class1元素下class2的元素（中间有空格）（后代选择器） $(".class1.class2") 选择同时含有class1和class2的元素（中间没有空格） $(".class1,.class2") 选择class1或者class2的元素（中间有逗号） */ $(function () { //金额文本框输入限制2位小数 $(".money").on("input", function () { var value = $(this).val(); if (\'\' != value.replace(/\d{1,}\.{0,1}\d{0,2}/, \'\')) { $(this).val(value.match(/\d{1,}\.{0,1}\d{0,2}/) == null ? \'\' : value.match(/\d{1,}\.{0,1}\d{0,2}/)); } }); }); </script> </body> </html>
解决多行文本框缩进换行显示问题，如下所示：
//表单 <textarea name="summary" placeholder="请输入简介" maxlength="1000">@(Model.summary)</textarea> //展示（注意：此处p标签的内容不要加空格或者换行） <p style="white-space:pre-wrap">@Html.Raw(Model.summary)</p>
Demo源码：
链接：https://pan.baidu.com/s/14co2Jr2AcyUetXjPMoMcZA 提取码：mv27