本章主要记录前端的一些常用基础知识，话不多说，下面我们直接上代码：
<!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>
Demo源码：
链接：https://pan.baidu.com/s/14co2Jr2AcyUetXjPMoMcZA 提取码：mv27