8.7第二天jQuery()遍历

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/KKsuri/article/details/81529718

第二天jQuery


遍历

遍历祖先

父元素:parent()
遍历祖先最终到:<html>parents()
返回介于两个给定元素之间的所有祖先元素:parentsUntil()

遍历后代

返回被选元素的所有直接子元素:children()
返回被选元素的后代元素,一路向下直到最后一个后代:find()

遍历同胞

返回被选元素的所有同胞元素:siblings()
返回被选元素的下一个同胞元素:next()
返回被选元素的所有跟随的同胞元素:nextAll()
返回介于两个给定参数之间的所有跟随的同胞元素:nextUntil()
返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)
prev()
prevAll()
prevUntil()

遍历过滤

返回被选元素的首个元素:first() 
返回被选元素的最后一个元素:last() 
返回被选元素中带有指定索引号的元素:eq() 
允许规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回:filter()  
返回不匹配标准的所有元素:not()  

今日代码

<!DOCTYPE html>
<html>
<head>
    <title>学生基本信息维护</title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        var stus = [{
            id:"1",
            username:"zhangsan",
            stuNum:"S01",
            sex:"man",
            description:"xxxxx"
        },
        {
            id:"2",
            username:"lisi",
            stuNum:"S02",
            sex:"man",
            description:"xxxxx"
        },
        {
            id:"3",
            username:"wangwu",
            stuNum:"S03",
            sex:"man",
            description:"xxxxx"
        }];

        var id = 0; // 全局的ID变量

        var saveType = "add";
        var editId = -1;

        // 重置表格的序号
        var resetSeq = function() {
            $(".seq").each(function(index, element){
                $(element).html(index + 1);
            });
        }

        // 添加表单元素内容到表格中
        var saveStu = function() {

            var checkFlag = true;

            if (saveType == "add") {
                if (confirm("确认要添加记录吗?")) {
                    // step1:获取表单内容
                    var username = $("#stuFrm").find("input[name='username']").val();
                    var stuNum = $("#stuFrm").find("input[name='stuNum']").val();
                    var sex = $("#stuFrm").find("select[name='sex']").val();
                    var description = $("#stuFrm").find("textarea[name='description']").val();

                    if (username.trim().length < 2 || username.trim().length > 4) {
                        checkFlag = false;
                    }

                    if (!checkFlag) {
                        alert("表单验证失败");
                        return;
                    }

                    // step2:构建tr元素
                    var stuTr = "<tr id='stu_"+id+"'><td class='seq'>1</td><td id='username_"+id+"'>"+username+"</td><td id='stuNum_"+id+"'>"+stuNum+"</td><td id='sex_"+id+"'>"+sex+"</td><td id='description_"+id+"'>"+description+"</td><td><a href='javascript:editStu("+id+")'>修改</a>&nbsp;<a href='javascript:delStu("+id+");'>删除</a></td></tr>";

                    // step3:将tr元素追加到tbody中
                    $("#stuTbody").append(stuTr);
                    id++;
                }
                resetSeq();
            }

            if (saveType == "edit") {
                if (confirm("确认要编辑记录吗?")) {
                    // step1:获取表单内容
                    var username = $("#stuFrm").find("input[name='username']").val();
                    var stuNum = $("#stuFrm").find("input[name='stuNum']").val();
                    var sex = $("#stuFrm").find("select[name='sex']").val();
                    var description = $("#stuFrm").find("textarea[name='description']").val();

                    if (username.trim().length < 2 || username.trim().length > 4) {
                        checkFlag = false;
                    }

                    if (!checkFlag) {
                        alert("表单验证失败");
                        return;
                    }

                    // 修改对应ID元素的值
                    $("#username_" + editId).html(username);
                    $("#stuNum_" + editId).html(stuNum);
                    $("#sex_" + editId).html(sex);
                    $("#description_" + editId).html(description);

                    // 将表单元素内容置空,同时保存模式变成新增
                    $("#stuFrm").find("input[name='username']").val("");
                    $("#stuFrm").find("input[name='stuNum']").val("")
                    $("#stuFrm").find("select[name='sex']").val("");
                    $("#stuFrm").find("textarea[name='description']").val("");

                    saveType = "add";
                    editId = -1;
                }
            }

        }

        // 删除学生记录
        var delStu = function(id) {
            if (confirm("确认要删除所选的记录吗?")){
                $("#stu_"+id).remove();
                resetSeq();
            }
        }

        var editStu = function(id) {
            // 取出表格中的内容
            var username = $("#username_" + id).html();
            var stuNum = $("#stuNum_" + id).html();
            var sex = $("#sex_" + id).html();
            var description = $("#description_" + id).html();

            // 将内容赋值给表单对应元素
            $("#stuFrm").find("input[name='username']").val(username);
            $("#stuFrm").find("input[name='stuNum']").val(stuNum);
            $("#stuFrm").find("select[name='sex']").val(sex);
            $("#stuFrm").find("textarea[name='description']").val(description);

            saveType = "edit";
            editId = id;
        }

        $(function(){
            // 页面事件的注册
            $("#saveBtn").click(saveStu);

            // 加载初始化学生信息
            for (var i = 0; i < stus.length; i++) {
                var username = stus[i].username;
                var stuNum = stus[i].stuNum;
                var sex = stus[i].sex;
                var description = stus[i].description;
                // step2:构建tr元素
                var stuTr = "<tr id='stu_"+id+"'><td class='seq'>1</td><td id='username_"+id+"'>"+username+"</td><td id='stuNum_"+id+"'>"+stuNum+"</td><td id='sex_"+id+"'>"+sex+"</td><td id='description_"+id+"'>"+description+"</td><td><a href='javascript:editStu("+id+")'>修改</a>&nbsp;<a href='javascript:delStu("+id+");'>删除</a></td></tr>";

                // step3:将tr元素追加到tbody中
                $("#stuTbody").append(stuTr);
                id++;
            }
            resetSeq();


        })

    </script>


</head>
<body>
    <h1>1807班学生基本信息</h1>
    <div>
        <form id="stuFrm">
            <span>姓名:</span><input type="text" name="username">&nbsp;
            <span>学号:</span><input type="text" name="stuNum">&nbsp;
            <span>性别:</span>
            <select name="sex">
                <option value="">请选择</option>
                <option value="man"></option>
                <option value="woman"></option>
            </select><br>
            <span>个人介绍:</span><textarea name="description"></textarea><br>
            <input type="button" id="addBtn" value="新增">&nbsp;<input type="button" id="saveBtn" value="保存">
        </form>
    </div>
    <hr>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>学号</th>
                    <th>性别</th>
                    <th>个人介绍</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="stuTbody">

            </tbody>
        </table>
    </div>

</body>
</html>

知识补充

遍历所有节点:each()
取消两边空格:trim()
confirm(“确认要添加记录吗?”)

<a href:"javascript = void">
void(什么事都不用做)
展开阅读全文

没有更多推荐了,返回首页