JZTXT

Javerscript 学习（知识点整理）

发布时间 2023-11-19 21:39:39作者: 宋苶苶

一、知识体系：

 

 

二、案例整理：

（1）需求：

实现学生的信息录入

可以实现一个个添加，也可删除

（2）知识点整理：

查找元素： 

document.getElementById("submit");（按照元素的id查找）

document.getElementsByTagName('input');（按照元素名进行查找）
箭头函数：
let myFunction = (a, b) => a * b;（使函数书写更加简洁）
内置console：
console.log()在控制台打印信息
console.error（）提示错误
console.warn()发出警告
声明方式：
var：全局作用域
let：可以重新赋值
const（常量）：不能改动，不能重新赋值（使用时要有初值，不然会报错）
迭代数组的方法：
forEach  +  map  （迭代器，这两种方法都可以让我们从数组中创建新的数组）
filter方法（选择器，可以根据条件创建新数组）
for循环语句：
for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}
条件语句：
单条件语句：
if（）{}
elseif（）{}
else（）
多条件语句：
if（xxxx||yyyy）{}
（3）代码数据： 
<html>
    <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">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="stdtab">
            <div class="input_info">
                <fieldset>
                    <legend>学生录入系统</legend>
                    <ul>
                        <li>
                            <label for="std_name">姓名：</label>
                            <input type="text" name="std_name" id="std_name">
                        </li>
                        <li>
                            <label for="std_gender">性别：</label>
                            <select name="std_gender" id="std_gender">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </li>
                        <li>
                            <label for="std_age">年龄：</label>
                            <input type="text" name="std_age" id="std_age">  
                        </li>
                        <li>
                            <label for="std_number">学号：</label>
                            <input type="text" name="std_number" id="std_number">
                        </li>
                    </ul>
                    <button id ='submit'>提交</button>
                </fieldset>
            </div>
            <div class = "show_info">
                <table border="1" cellspacing="0" bordercolor="#888">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>学号</th>
                            <th>删除</th>
                        </tr>
                    </thead>
                    <tbody id="infos"></tbody>
                </table>
            </div>
        </div>
        <script src ="main.js"></script>
    </body>
</html>

css：

body li{
list-style: none;
}
body .stdtab .input_info{
    margin: 10px 0;
}
body .stdtab .input_info fieldset{
    width: 400px;
}
body .stdtab .input_info fieldset button{
    width: 60px;
    height: 30px;
    margin: 5px auto;
    display: block;
}
body .stdtab .show_info .thead{
    background-color: aquamarine;
}
body .stdtab .show_info .th{
    width: 80px;
    height: 30px;
}
body .stdtab .show_info .delete_{
    color: #fc0404;
}

js部分：

let submitBtn = document.getElementById("submit");;
let inputs = document.getElementsByTagName('input');
let gender = document.getElementById('std_gender');
let tbody = document.getElementsByTagName('tbody')[0];

let dataArr = [];
submitBtn.addEventListener('click',() =>{
    dataArr.push({
        name:inputs[0].value,
        gender:gender.value,
        age:inputs[1].value,
        number:inputs[2].value,
        index:dataArr.length
    });
    console.log(dataArr);
    let infos = '';
    dataArr.forEach((item) =>{
        infos = infos + `<tr class="info" index="${item.index}">
                        <th>${item.name}</th>
                        <th>${item.gender}</th>
                        <th>${item.age}</th>
                        <th>${item.number}</th>
                        <th class="delete" onclick = "del(${item.index})">删除</th>
                    </tr >`;
    })
    tbody.innerHTML = infos;
    inputs[0].value = "";
})
function del(index){
    let fidx = dataArr.findIndex(item =>{
        return item.index ==index;
    })
    console.log(fidx);
    dataArr.splice(fidx,1);
    console.log(dataArr);
    let info = document.getElementsByClassName("info");
    for (let i= 0;i <info.length;i++){

        let infoIdx = info[i].getAttribute("index");
        if (infoIdx ==index){
            console.log(info);
            tbody.removeChild(info[i]);
        }
    }
}

（4）效果展示：