JS進階練習
阿新 • • 發佈：2018-06-05
match function win 質量 pla 功能 刪除 自己 tar
持續更新、學習歷程刷的好題精選：
<!--涉及知識點：JavaScript的事件機制及DOM操作、事件代理機制、簡單的表單驗證功能、外部加載JavaScript文件-->
<body> <div> <label>城市名稱：<input id="aqi-city-input" type="text"></label><br> <label>空氣質量指數：<input id="aqi-value-input" type="text"></label><br> <button id="add-btn">確認添加</button> </div> <table id="aqi-table"> <!-- <tr> <td>城市</td><td>空氣質量</td><td>操作</td> </tr> <tr> <td>北京</td><td>90</td><td><button>刪除</button></td> </tr>--> </table> </body>
下面是JS文件
/** * aqiData，存儲用戶輸入的空氣指數數據 * 示例格式： * aqiData = { * "北京": 90, * "上海": 40 * }; */ var aqiData = {}; /** * 從用戶輸入中獲取數據，向aqiData中增加一條數據 * 然後渲染aqi-list列表，增加新增的數據 */ function addAqiData() { var city = document.getElementById("aqi-city-input").value; //獲取輸入框內容 /* match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配 */ /* ^[\u4e00-\u9fa5]+$是專門用於匹配簡體中文的正則表達式 */ /* 只能輸入由26個英文字母組成的字符串：“^[A-Za-z]+$” */ if (!city.match(/^[A-Za-z]+$/) && !city.match(/^[\u4e00-\u9fa5]+$/)) { alert("城市名稱只接受中文或英文字符!"); return false; } var air = document.getElementById("aqi-value-input").value; /* ^[1-9]d*$ //匹配正整數 */ if (!air.match(/^[1-9]d*$/)) { /* ^-?\d+$ */ alert("空氣必須為整數!"); return false; } aqiData[city] = air; // city是變量不能采用aqiData.city的寫法，所以通過[]傳值,最終目的就是給 aqiData 賦值，為了後面采用單一變量去輸出用戶輸入的信息 } /** * 渲染aqi-table表格 */ function renderAqiList() { var result = "<tr><td>城市</td><td>空氣質量</td><td>操作</td>"; /*用戶每輸入提交一次，用for循環的一個變體是for ... in循環，它可以把一個對象的所有屬性依次循環出來：*/ for (var city in aqiData) { //利用city數值在aqiData存儲的次數來進行循環 result += "<tr><td>" + city + "</td><td>" + aqiData[city] + "</td><td><button>" + "刪除" + "</button></td></tr>" } document.getElementById("aqi-table").innerHTML = result; } /** * 點擊add-btn時的處理邏輯 * 獲取用戶輸入，更新數據，並進行頁面呈現的更新 */ function addBtnHandle() { var confirm = addAqiData(); if (confirm != false) { renderAqiList(); } } /** * 點擊各個刪除按鈕的時候的處理邏輯 * 獲取哪個城市數據被刪，刪除數據，更新表格顯示 */ function delBtnHandle() { //通過當前元素父節點的父節點的第一個子節點的文本內容確定當前數組的屬性並刪除 //這裏不能用e，要用this來指代對象 var cityName = this.target.parentNode.parentNode.childNodes[0].innerHTML; delete aqiData[cityName]; renderAqiList(); } var event = event || window.event; // 為了兼容FF等MOZ瀏覽器 (function init() { // 在這下面給add-btn綁定一個點擊事件，點擊時觸發addBtnHandle函數 document.getElementById(‘add-btn‘).addEventListener("click", addBtnHandle, false) //addEventListener("type",函數名,false) // 想辦法給aqi-table中的所有刪除按鈕綁定事件，觸發delBtnHandle函數 //為表格綁定事件監聽，if篩選出button按鈕，並為button按鈕添加刪除函數 document.getElementById(‘aqi-table‘).addEventListener("click", function(e) { e = e || window.event; target = e.target || e.srcElement; if (e.target.nodeName.toLowerCase() == "button") { delBtnHandle(); } }, false) /* var affirm = document.getElementById(‘add-table‘); affirm. */ // 想辦法給aqi-table中的所有刪除按鈕綁定事件，觸發delBtnHandle函數 })()
持續更新-主要用於自己復習回顧，有寫的不好的地方希望各位指導！
JS進階練習