欢迎光临
我的个人博客网站

【学习笔记】前端常用基础知识(一)

本章主要记录前端的一些常用基础知识,话不多说,下面我们直接上代码:

<!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></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") //是否为单选按钮              //文本框             $("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');             curBlock.after(prveBlock);         }          //下移         function Down(obj) {             var curBlock = $(obj).parents('tr');             var nextBlock = curBlock.next('tr');             curBlock.before(nextBlock);         }          //删除         function Del(obj) {             $(obj).parents("tr").remove();         }          //去掉指定字符串中所有空格         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的元素(中间有逗号)         */     </script> </body> </html>

 

Demo源码:

链接:https://pan.baidu.com/s/1EUOfoUmukNPSnH08YYSrqw  提取码:c2n8

赞(0) 打赏
未经允许不得转载:张拓的天空 » 【学习笔记】前端常用基础知识(一)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏