【學習筆記】前端常用基礎知識（一）
阿新 • • 發佈：2021-07-28
【學習筆記】前端常用基礎知識（一）
本章主要記錄前端的一些常用基礎知識，話不多說，下面我們直接上程式碼：
<!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